더 많은 기술 문장은 나의github 주소를 조회할 수 있고,https://github.com/HuYuee/blog
원 영문 링크
10월 23일, React는 16.6 버전을 발표했는데, 이 버전에서는 매우 유용한 새로운 기능을 가져왔다.새로운 주요 기능은 다음과 같습니다.

React.memo()

React.lazy()

static contextType()

static getDerivedStateFromError()

React.memo()
React.memo()는 React와 유사한 간단한 함수 구성 요소에 작용할 수 있습니다.PureComponent는class 구성 요소에 대한 역할을 합니다.그것은 본질적으로 고급 함수로서, 달성한 효과는 자동으로 구성 요소가shouldComponentUpdate () 를 실행하도록 도와주지만, 단지 얕은 비교만 실행하는 것이다
Using memo()
다음과 같이 고급 함수처럼 레이어를 구성합니다.

const MemoizedComponent = React.memo(function MyComponent(props) {
  //_ only rerenders if props change_
});

// for arrow functions
const OtherMemoized = React.memo(props => {
    return 
 Memoized Component 
}

이미 존재하는 함수도 다음과 같이 포장할 수 있다.

const MyComponent = props => 
 This is memorable!! 

const Memoized = React.memo(MyComponent)

홈페이지는 마지막에 명확하게 다음과 같이 언급했다.
This method only exists as a performance optimization. Do not rely on it to “prevent” a render, as this can lead to bugs.---- React 홈페이지
이 고급 함수가 존재하는 것은 성능 최적화의 방식이라는 뜻이다.그것 을 사용하여 순수하게 렌더링 을 막지 마라. 그렇지 않으면 버그 가 발생할 수 있다
React.lazy() and Suspense
이 API를 통해 우리는 코드 분할 효과에 도달할 수 있다.코드 분할은 현재 페이지를 렌더링할 때 현재 페이지의 성능을 향상시키고 렌더링 속도를 향상시키는 것을 의미합니다.
React.lazy () 및 Suspense는 현재 서버 측 렌더링을 지원하지 않습니다.서버에서 코드 분할을 하려면 React Loadable을 사용하는 것이 좋습니다. ----React 홈페이지
React.lazy()
React.lazy () 는 동적 구성 요소를 불러올 수 있도록 합니다.
일반적인 도입:

import OtherComponent from './OtherComponent';
import AnotherComponent from './AnotherComponent';

function MyComponent(bool) {
  return (
    

      {bool?:}
    
  );
}

구성 요소를 동적으로 로드하는 방법:

function MyComponent(bool) {
    let Component;
    if(bool){
       Component = React.lazy(() => import('./OtherComponent'));
    }else{
       Component = React.lazy(() => import('./AnotherComponent'));
    }
  return (
    

      
    
  );
}

Suspense
OtherComponent가 불러오지 않으면, Suspense라는 구성 요소의 매개 변수 fallback 를 사용하여 불러오는 것과 유사한 알림 내용을 표시할 수 있습니다.다음과 같습니다.

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    

      Loading...
}>
        
      
    

);
}
가장 중요한 것은 Suspense 구성 요소 중 여러 개의 동적 불러오는 구성 요소를 감싸서 통일적으로 관리하면 매우 편리하다.

const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));

function MyComponent() {
  return (
    

      Loading...
}>
        

          
          
        
      
    

);
}
동적 불러오는 구성 요소에 대한 더 자세한 사용법은 루트에서 장면을 사용하는 것을 포함하여 주소를 참고할 수 있습니다
static contextType
class에 이contextType 속성을 추가했습니다. 이 속성은 모든 생명주기 함수에서this를 통과할 수 있도록 합니다.context는 React.createContext() 를 통해 만든 Context 대상을 사용합니다.아래에서 나는 두 가지 예로 이 속성의 장점을 비교할 것이다.
contextType 사용:

import {ThemeContext} from './theme-context';

class ThemedButton extends React.Component {
  render() {
    let props = this.props;
    let theme = this.context;
    return (
      
    );
  }
}
ThemedButton.contextType = ThemeContext;

export default ThemedButton;

未使用contextType：

import {ThemeContext} from './theme-context';

function ThemedButton(props) {
  return (
    
      {theme => (
        

      )}
    
  );
}

export default ThemedButton;

是不是发现方便了很多，不需要再包一层Consumer组件。但是这个现在支持class组件，函数组件还不支持。

static getDerivedStateFromError()

这个生命周期函数会在子组件抛出一个错误之后被调用。它会接收到这个throw出来的参数，然后去return一个值去更新state来处理这个错误。设置错误边界可以让代码在出错的情况下，也能将错误显示到页面中，而不是出现空白页面。demo

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return 
Something went wrong.
;
    }

    return this.props.children; 
  }
}

일반적으로 static getDerivedStateFromError () 를 사용하여 오류를 알리는 UI를 렌더링하고,componentDidCatch () 를 사용하여 error의 상세한 정보, 오류 호출 창고 등을 기록합니다.
원 영문 링크
더 많은 기술 문장은 나의github 주소를 조회할 수 있고,https://github.com/HuYuee/blog