React 16의 새로운 기능은 무엇입니까? React16의 새로운 특징과 기능 소개
- 寻∝梦원래의
- 2018-09-11 16:05:553108검색
이 글에서는 주로 react16의 새로운 기능 몇 가지를 소개하고, React16의 자세한 기능 소개도 소개합니다. 이 글의 주요 내용을 살펴보겠습니다
React 16 업데이트
새로운 js 환경 요구 사항
react16依靠Map和Set集合和requestAnimationFrame（一个针对动画效果的API）
새로운 기능
- Fragments：render函数可以返回数组和字符串 - error boundaries：错误处理 - portals ：支持声明性地将子树渲染到另一个DOM节点 - custom DOM attributes ：ReactDom允许传递非标准属性 - improved server-side rendering:提升服务端渲染性能
-
Fragments
render() { return [ <li key="A"/>First item</li>, <li key="B"/>Second item</li>, <li key="C"/>Third item</li>, ]; }자세한 내용은 API
-
오류 경계
를 참조하세요. 이전에는 구성 요소에 오류가 발생하면 전체 구성 요소 트리가 루트 노드에서 마운트 해제되었습니다. React 16에서는 이를 수정하고 중국어로 "오류 경계"로 번역되는 Error Boundary 개념을 도입합니다. 컴포넌트에서 오류가 발생하면 Error Boundary를 사용하는 등 오류를 우아하게 처리할 수 있습니다. . 내용이 오류 구성 요소를 대체합니다. Error Boundary는 특별한 React 구성 요소로 간주될 수 있습니다. 이는 자체 및 하위 트리에 대한 오류를 캡처하고 오류 로그 보고 및 전체 구성 요소 트리 제거를 포함하여 정상적으로 처리할 수 있습니다. (참고: 구성 요소 콜백 이벤트의 오류와 같은 모든 런타임 오류를 캡처하지는 않습니다. 전통적인 try-catch 문으로 생각하면 됩니다.)
연습:
오류 경계 추상 검사 공용 구성 요소:
class ErrorBoundary extends React.Component{ constructor(props){ super(props); this.state=({ ifError:false }); } componentDidCatch(err, info) { this.setState({ ifError: true }) console.log(err); } render(){ if(this.state.ifError){ return `this or its children has error`; } return this.props.children } }Create A 오류가 포함된 단순 하위 구성 요소:
class ErrorComponent extends React.Component{ render(){ const str = '123'; return str.toFixed(2); } }오류 경계 구성 요소를 사용하여 잘못될 수 있는 구성 요소를 래핑
class MainShowComponent extends React.Component{ render(){ return ( <p> <ErrorBoundary> <ErrorComponent/> </ErrorBoundary> </p> ) } }오류 경계 구성 요소로 래핑된 하위 구성 요소에서 오류가 발생하면 오류 구성 요소는 문자열로 대체됩니다. 전체 구성 요소 트리가 언로드되지 않고 오류가 발생했습니다. (자세한 내용을 알고 싶으면 PHP 중국어 웹사이트React Reference Manual 열로 이동하여 학습하세요.)
-
Portals
Portals는 부모의 DOM 계층 구조 외부에 있는 DOM에 자식을 제공하는 최고 수준의 방법을 제공합니다. 구성 요소 노드.
ReactDOM.createPortal( child, container );
첫 번째 매개변수(하위)는 요소, 문자열 또는 조각과 같은 렌더링 가능한 React 하위 요소입니다. 두 번째 매개변수(컨테이너)는 DOM 요소입니다.
일반적으로 구성 요소의 렌더링 메서드에서 요소를 반환하면 가장 가까운 부모 노드의 자식으로 DOM에 로드됩니다.
render() { // React mounts a new p and renders the children into it return ( <p> {this.props.children} </p> ); }그러나 때로는 DOM의 다른 위치에 자식을 삽입하는 것이 유용할 수 있습니다.
render() { // React does *not* create a new p. It renders the children into `pNode`. // `pNode` is any valid DOM node, regardless of its location in the DOM. return React.createPortal( this.props.children, pNode, ); }포털 및 이벤트 버블링에 대한 자세한 내용은 공식 웹사이트와 CodePen 예제를 참조하세요.
-
사용자 정의 DOM 속성
비표준 사용자 정의 DOM 속성을 지원합니다. 이전 버전에서는 React가 인식할 수 없는 HTML 및 SVG 속성을 무시했습니다. 사용자 정의 속성은 data-* 형식을 통해서만 추가할 수 있습니다. 이제 이러한 속성을 DOM에 직접 전달할 수 있습니다. 이 변경을 통해 React는 속성 허용 목록을 제거하여 파일 크기를 줄일 수 있습니다. 그러나 DOM이 전달한 사용자 정의 속성이 함수 유형 또는 이벤트 핸들러 유형인 경우 React에서도 무시됩니다.
<p a={()=>{}}></p> //错误 -
서버 측 렌더링 성능 향상
서버 측 렌더링 성능 향상, React 16의 SSR이 완전히 다시 작성되었습니다. 새로운 구현은 매우 빠르고 React 15 성능의 거의 3배에 달하며 이제 스트리밍 모드 스트리밍을 제공합니다. 렌더링된 바이트를 클라이언트에 더 빠르게 보낼 수 있습니다.
주요 변경 사항
예약 및 수명 주기 변경
-
null을 반환하기 위해 setState를 호출하면 렌더링이 업데이트되지 않으므로 업데이트 방법에서 직접 업데이트할지 여부를 결정할 수 있습니다.
this.setState( (state)=>{ if(state.curCount%2 === 0){ return {curCount:state.curCount+1} }else{ return null; } } ) 렌더링 메소드에서 setState를 호출하면 항상 업데이트가 발생하므로 이전 버전에서는 지원되지 않습니다. 하지만 렌더링에서 setState를 호출하지 마세요.
-
setState의 콜백 함수는 모든 구성 요소가 렌더링된 후가 아니라, componentDidMount/ComponentDidUpdate가 실행된 직후에 실행됩니다.
this.setState( (state)=>{ if(state.curCount%2 === 0){ return {curCount:state.curCount+1} }else{ return null; } }, ()=>{ console.log(this.state.curCount); } )
ReactDOM.render() 및 ReactDom.unstable_renderIntoContainer()는 수명 주기 함수에서 호출되면 null을 반환합니다. 따라서 이러한 문제를 해결하려면 포털이나 refs
setState 변경 사항을 사용할 수 있습니다.
두 개의 구성 요소
<A />和<B />가 교체되면 B.comComponentWillMount는 항상 A.comComponentWillUnmount 이전에 실행되고 A.comComponentWillUnmount 이전에 실행됩니다. 사전에 실행될 수 있습니다.이전 버전에서는 컴포넌트의 ref를 변경할 때 해당 컴포넌트의 render 메서드가 호출되기 전에 ref와 dom이 분리되었습니다. 이제 dom 요소가 변경될 때까지 ref 변경을 지연하고 ref가 dom에서 분리되지 않습니다.
-
React가 아닌 다른 방법을 사용하여 컨테이너를 다시 렌더링하는 것은 안전하지 않습니다. 이전 버전에서는 이 기능이 작동했을 수도 있지만 지원되지 않는 것 같습니다. 이제 이 경우에 대한 경고가 발행되며 ReactDOM.unmountComponentAtNode를 사용하여 노드 트리를 지워야 합니다.
ReactDOM.render(<App />, p); p.innerHTML = 'nope'; ReactDOM.render(<App />, p);//渲染一些没有被正确清理的东西
그리고 다음이 필요합니다.
ReactDOM.render(<App />, p); ReactDOM.unmountComponentAtNode(p); p.innerHTML = 'nope'; ReactDOM.render(<App />, p); // Now it's okay
이 문제를 확인하세요
comComponentDidUpdate 수명 주기는 더 이상 prevContext 매개 변수를 허용하지 않습니다.
고유하지 않은 키를 사용하면 하위 구성요소가 중복되거나 손실될 수 있습니다. 고유하지 않은 키를 사용하는 것은 지원되지 않으며 지원된 적도 없지만 이전에는 심각한 버그였습니다.
DOM 참조를 사용할 수 없기 때문에 Shallow 렌더러는 더 이상 componentDidUpdate()를 트리거하지 않습니다. 이는 또한 이전 버전의 componentDidMount() 호출과 일관성을 유지합니다.
Shallow 렌더러는 더 이상 불안정한_batchedUpdates()를 지원하지 않습니다.
ReactDOM.unstable_batchedUpdates에는 이제 콜백 뒤에 추가 매개변수가 하나만 있습니다.
개발 버전과 프로덕션 버전의 차이를 강조하기 위해 단일 파일 브라우저 버전의 이름과 경로가 변경되었습니다
react/dist/react.js → React/umd/react.development.js
react/dist/react .min.js → 반응/umd/react.production.min.js
react-dom/dist/react-dom.js → 반응-dom/umd/ React-dom.development.js
react-dom/dist/react-dom.min.js → React-dom/umd/react-dom.production.min Node.js 렌더링은 더 이상 마크업 유효성 검사를 사용하지 않고 대신 최선의 방법으로 기존 DOM에 추가하여 불일치를 경고합니다. 또한 더 이상 각 노드의 데이터 피드백 속성에 빈 구성 요소와 주석을 사용하지 않습니다.
- 알 수 없는 속성이 DOM 구성 요소에 전달되면 React는 유효한 값인 경우 해당 속성을 DOM으로 렌더링합니다. 문서 보기
- 렌더링 및 수명 주기 함수의 오류는 기본적으로 전체 DOM 트리를 언로드합니다. 이를 방지하려면 UI의 해당 위치에 오류 경계를 추가할 수 있습니다. .
- 이 글은 여기에서 끝납니다. (자세한 내용을 보려면 PHP 중국어 웹사이트
- React 사용자 매뉴얼
열로 이동하세요.), 질문이 있으시면 아래에 메시지를 남겨주세요.
위 내용은 React 16의 새로운 기능은 무엇입니까? React16의 새로운 특징과 기능 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!