React와 React Fiber의 차이점은 무엇입니까?

React와 React Fiber의 차이점은 무엇입니까?

---

반응 섬유가 준비되었다고 들었습니다. react와 react-fiber의 큰 차이점은 무엇입니까? 그 차이에 대한 완전히 새로운 개념을 배우는 것이 가치가 있습니까?

---

React Fiber 는 React의 핵심 알고리즘을 지속적으로 재 구현 한 것이며 React의 완전한 내부 재 작성일 뿐입니다 .

React Fiber는 React 코어의 완전하고 이전 버전과 호환되는 재 작성입니다.

React Fiber 의 목표는 애니메이션, 레이아웃 및 제스처와 같은 영역에 대한 적합성을 높이는 것입니다. 헤드 라인 기능은 증분 렌더링입니다. 렌더링 작업을 청크로 분할하고 여러 프레임에 분산시키는 기능입니다.

React Fiber 는 가상 스택 프레임이며 React Fiber는 React 구성 요소에 특화된 스택 프레임을 다시 구현합니다. 각 광섬유는 프레임의 정보가 힙의 메모리에 보존되는 가상 스택 프레임으로 생각할 수 있으며 정보가 힙에 저장되기 때문에 데이터 구조를 제어 및 재생하고 필요에 따라 관련 정보를 처리 할 수 ​​있습니다.

이 비디오 에서 Lin Clark의 훌륭한 설명을 찾을 수 있습니다 .

자세한 내용은 다음 링크를 확인하십시오.

1. React Fiber 란?

2. React Fiber 아키텍처

3. React 16은 당신에게 무엇을 의미합니까?

이것이 당신을 도울 것입니다!

---

React Fiber는 React의 핵심 알고리즘을 지속적으로 재 구현 한 것입니다. 반응 섬유와 반응 섬유의 주요 차이점은 다음과 같은 새로운 기능입니다.

1. 증분 렌더링 : -React v16.0에는 완전히 재 작성된 서버 렌더러가 포함되어 있습니다. 정말 빠릅니다. 스트리밍을 지원하므로 클라이언트에 바이트 전송을 더 빠르게 시작할 수 있습니다.

2. 렌더링 API의 오류 처리 : 클래스 구성 요소를 오류 경계로 만들기 위해 componentDidCatch (error, info)라는 새로운 수명주기 메서드를 정의합니다.

3. 렌더링에서 여러 요소 반환 : React v16.0의이 새로운 기능을 사용하여 이제 요소의 배열과 구성 요소의 렌더링 메서드에서 문자열을 반환 할 수 있습니다.

4. 포털 : 포털은 상위 구성 요소의 DOM 계층 구조 외부에있는 DOM 노드로 하위를 렌더링하는 최고급 방법을 제공합니다.

5. Fragments : React의 일반적인 패턴은 컴포넌트가 여러 요소를 반환하는 것입니다. 프래그먼트를 사용하면 DOM에 추가 노드를 추가하지 않고도 자식 목록을 그룹화 할 수 있습니다.

---

React 16 베타는 몇 시간 전에 출시되었습니다 : https://github.com/facebook/react/issues/10294 .

재 작성된 React 코어 (내부적으로 "fiber"로 명명 된 것)는 몇 가지 주요 변경 사항을 제외하고 기존 앱과 호환되어야합니다 (Github의 릴리스 노트 참조). 대부분의 변경 사항이 내부에 있으므로 완전히 새로운 개념을 다시 배울 필요가 없습니다.

---

여기에있는 모든 사람들은 반응 섬유와 함께 제공되는 모든 새로운 기능에 대해 이미 언급 한 바 있습니다. 코어 변경 반응 섬유가 스스로를 개선하기 위해 어떤 일을하고 있는지 강조하겠습니다. React fiber는 실제로 브라우저가 수행하는 다른 작업의 일시 중지 및 재생을 허용합니다. 특정 작업에 우선 순위를 부여합니다.

예를 들어, 백그라운드에서 데이터를 가져 오는 것보다 특정 애니메이션이 중요한 경우입니다. 애니메이션 작업을 실행 스택의 우선 순위로 푸시하고 애니메이션이 완료되거나 너무 오래 걸리면 데이터 가져 오기 작업으로 전환 할 수 있습니다. 이러한 최신 브라우저를 허용하기 위해 작업을 일시 중지하고 재생할 수있는 requestIdleCallback 인 API를 열었습니다. requestIdleCallback

반응 섬유가 사용하는 것. 이것은 반응 섬유가 후드에서 사용하는 것이고 놀랍습니다.

참고 : 몇 가지 점에서 정확히 정확하지 않을 수 있습니다. 수정 사항이있는 경우 열려 있습니다.

참고 URL : https://stackoverflow.com/questions/45341423/what-is-difference-between-react-vs-react-fiber