반응 기본

1830 단어
JSX 란 무엇입니까?
JSX는 JavaScript XML의 약자입니다. HTML과 같은 템플릿 구문과 함께 JavaScript의 표현력을 활용하는 React에서 사용하는 파일 유형입니다. 이것은 HTML 파일을 이해하기 쉽게 만듭니다.
JSX의 예:

render(){
    return(        

<div>

<h1> Hello World from Asif!!</h1>

         </div>

    );
}


Virtual DOM이 무엇을 이해합니까? 그 작동을 설명하십시오.

가상 DOM은 원래 실제 DOM의 복사본에 불과한 가벼운 JavaScript 객체입니다. 요소, 속성 및 내용을 개체 및 속성으로 나열하는 노드 트리입니다. React의 render 함수는 React 컴포넌트에서 노드 트리를 생성합니다. 그런 다음 사용자가 수행한 다양한 작업으로 인해 발생하는 데이터 모델의 변형에 대한 응답으로 이 트리를 업데이트합니다. 이 가상 DOM은 세 가지 간단한 단계로 작동합니다.
  • 기본 데이터가 변경될 때마다 전체 UI가 가상 DOM 표현으로 다시 렌더링됩니다
  • .
  • 그런 다음 이전 DOM 표현과 새 DOM 표현 간의 차이가 계산됩니다.
  • 계산이 완료되면 실제 DOM은 실제로 변경된 내용으로만 업데이트됩니다.

  • React에서 render()의 목적을 설명하십시오.
    각 React 구성 요소에는 render() 함수가 있어야 합니다. Render 함수는 컴포넌트에 표시하고자 하는 HTML을 반환하는 데 사용됩니다. 둘 이상의 HTML 요소를 렌더링해야 하는 경우 , 등의 단일 둘러싸는 태그(상위 태그) 내부에 함께 그룹화되어야 합니다. 이 함수는 호출될 때마다 동일한 결과를 반환합니다.

    예: 제목을 표시해야 하는 경우 아래와 같이 할 수 있습니다.

    import React from 'react'
    
    class App extends React.Component {
    render (){
    return (
    <h1>Hello World</h1>
    )
    }
    }
    export default App
    

    참고 사항:
     각 render() 함수는 return 문을 포함합니다.
     return 문에는 부모 HTML 태그가 하나만 있을 수 있습니다.
    수명 주기 방법 장착 순서:
    탑재는 React 구성 요소 수명 주기의 첫 번째 단계입니다. 컴포넌트의 인스턴스가 생성되어 DOM에 삽입될 때 다음 메소드가 호출됩니다. 생성자(), 렌더(), componentDidMount().

    화해:
    Reconciliation은 컴포넌트의 props 또는 state가 변경될 때 React는 새로 반환된 요소를 이전에 렌더링된 요소와 비교하여 실제 DOM 업데이트가 필요한지 여부를 결정합니다. 같지 않으면 React는 DOM을 업데이트합니다. 이 과정을 화해라고 합니다.
    고차 구성 요소:
    고차 컴포넌트는 컴포넌트 로직을 재사용하기 위한 React의 고급 기술입니다. 고차 구성 요소는 구성 요소를 가져와 새 구성 요소를 반환합니다. 간단히 말해서 고차 구성 요소는 구성 요소를 다른 구성 요소로 변환합니다. 고차 컴포넌트의 적절한 예는 redux의 connect와 relay의 createContainer입니다.

    좋은 웹페이지 즐겨찾기