React v16.3.0: 새로운 수명주기 및 컨텍스트 API

며칠 전 우리는 단계별 마이그레이션 전략을 포함하여 기존 수명 주기 접근 방식의 향후 변경 사항에 대한 기사를 작성했습니다. React 16.3.0에서는 마이그레이션을 돕기 위해 몇 가지 새로운 수명 주기 메서드를 추가했습니다. 또한 공식 컨텍스트 API, 참조 전달 API, 보다 의미론적인 참조 API 등 장기 실행 요청 기능을 위한 새로운 API도 도입했습니다.

이 릴리스에 대해 자세히 알아보려면 계속 읽어보세요.

공식적으로 인증된 Context API

수년 동안 React는 Context를 위한 실험적인 API를 제공해 왔습니다. 강력한 도구임에도 불구하고 API에 내재된 문제로 인해 사용이 눈살을 찌푸리게 되므로 이 실험적인 API를 더 나은 API로 교체할 계획입니다.

React 16.3에는 보다 효율적이고 정적 유형 검사와 심층 업데이트를 모두 지원하는 새로운 Context API가 도입되었습니다.

참고
이전 ContextAPI는 React 16.x에 계속 유지되므로 마이그레이션할 시간이 있습니다.

다음은 새로운 컨텍스트 API를 사용하여 "주제"를 삽입하는 방법에 대한 예입니다:

## by 司徒正美
const ThemeContext = React.createContext('light');

class ThemeProvider extends React.Component {
  state = {theme: 'light'};

  render() {
    return (
      <ThemeContext.Provider value={this.state.theme}>
        {this.props.children}
      </ThemeContext.Provider>
    );
  }
}

class ThemedButton extends React.Component {
  render() {
    return (
      <ThemeContext.Consumer>
        {theme => <Button theme={theme} />}
      </ThemeContext.Consumer>
    );
  }
}

createRef API

이전에 React는 ref를 관리하는 두 가지 방법, 즉 문자열 ref API와 콜백 ref API를 제공했습니다. String ref API가 더 편리하지만 몇 가지 단점이 있으므로 공식적인 권장 사항은 callback ref를 사용하는 것입니다.

React 16.3은 아무런 단점 없이 문자열 참조에 대한 편의성을 제공하는 새로운 참조 관리 체계를 제공합니다.

## by 司徒正美

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.inputRef = React.createRef();
  }

  render() {
    return <input type="text" ref={this.inputRef} />;
  }

  componentDidMount() {
    this.inputRef.current.focus();
  }
}

참고

새로운 createRef API 외에도 콜백 참조가 계속 지원됩니다.

구성요소에서 콜백 참조를 교체할 필요가 없습니다. 약간 더 유연하므로 계속해서 고급 기능으로 사용됩니다.

forwardRef API

고차 구성 요소(또는 HOC)는 구성 요소 간에 코드를 재사용하는 일반적인 방법입니다. 위의 테마 컨텍스트 예를 기반으로 현재 "테마"를 속성으로 주입하는 임시 개체를 만들 수 있습니다.

## by 司徒正美

function withTheme(Component) {
  return function ThemedComponent(props) {
    return (
      cc08703116ce42022d08955abae73f54
        {theme => 6ed8e9073d9c761724eb70bf3f0fade5}
      bf7c81c161b24597f4bb608217085ce7
    );
  };
}

위의 특별한 방법을 사용하면 테마 컨텍스트를 사용하지 않고도 구성 요소를 테마 컨텍스트에 연결할 수 있습니다. 곧장. 예:

## by 司徒正美

class FancyButton extends React.Component {
  buttonRef = React.createRef();

  focus() {
    this.buttonRef.current.focus();
  }

  render() {
    const {label, theme, ...rest} = this.props;
    return (
      3f01e199a4239832cc42b335d0472095

        {label}
      65281c5ac262bf6d81768915a4a77ac0
    );
  }
}

const FancyThemedButton = withTheme(FancyButton);

// We can render FancyThemedButton as if it were a FancyButton
// It will automatically receive the current "theme",
// And the HOC will pass through our other props.
ad6931a2197aede9d7a61bfc94e4cffa;

HOC는 일반적으로 자신이 래핑하는 구성 요소에 props를 전달합니다. 불행히도 심판은 침투하지 못했습니다. 즉, FancyThemedButton을 사용하면 FancyButton에 참조를 추가할 수 없으므로 focus()를 호출할 수 없습니다.

새로운 프록시 API는 참조를 가로채서 일반 prop으로 전달하는 방법을 제공하여 이 문제를 해결합니다.

## by 司徒正美

function withTheme(Component) {
  // Note the second param "ref" provided by React.forwardRef.
  // We can attach this to Component directly.
  function ThemedComponent(props, ref) {
    return (
      cc08703116ce42022d08955abae73f54
        {theme => (
          f3d328559b51a9b75ca8e71699437894
        )}
      bf7c81c161b24597f4bb608217085ce7
    );
  }

  // These next lines are not necessary,
  // But they do give the component a better display name in DevTools,
  // e.g. "ForwardRef(withTheme(MyComponent))"
  const name = Component.displayName || Component.name;
  ThemedComponent.displayName = `withTheme(${name})`;

  // Tell React to pass the "ref" to ThemedComponent.
  return React.forwardRef(ThemedComponent);
}

const fancyButtonRef = React.createRef();

// fancyButtonRef will now point to FancyButton
f3c9e20fcfb699cb163492c96d8d5bf1;

컴포넌트 수명 주기 후크의 변경 사항

React의 클래스 컴포넌트 API가 이미 존재합니다. 수년 동안 거의 변경되지 않았습니다. 그러나 오류 범위 및 곧 출시될 비동기 렌더링 모드와 같은 고급 기능에 대한 지원을 추가함에 따라 원래 의도하지 않은 방식으로 이 모델을 확장합니다.

예를 들어 현재 API에서는 특이한 수단으로 초기 렌더링을 방지하는 것이 매우 쉽습니다. 부분적으로 이는 주어진 작업을 수행하는 데 너무 많은 후크가 있고 어느 것이 가장 좋은지 명확하지 않기 때문입니다. 우리는 오류 처리의 인터럽트 동작이 종종 고려되지 않고 메모리 누수로 이어질 수 있음을 확인했습니다(이는 향후 비동기 렌더링 모드에도 영향을 미칩니다). 현재 클래스 구성 요소 API는 코드 최적화 프로그램(Prepack)의 작업과 같은 다른 작업도 복잡하게 만듭니다.

comComponentWillMount, comComponentWillReceiveProps, comComponentWillUpdate 이러한 후크는 쉽게 문제를 일으키고 React의 수명 주기를 심각하게 방해할 수 있습니다. 이러한 이유로 우리는 더 나은 대안을 위해 이러한 방법을 더 이상 사용하지 않습니다. componentWillMount, componentWillReceiveProps, componentWillUpdate这些钩子很容易引发问题，并且也严重扰乱React的生命周期。基于这些原因，我们将废弃这些方法，以支持更好的替代方案。

我们认识到这一变化将影响许多现有的组件。因此，迁移路径将尽可能平缓，并提供迁移方案。(在Facebook，我们拥有5万多个React组件。我们也依赖于一个渐进的发布周期!

注意

弃用警告将在React16以后的版本中启用， 一直保留到17发布时。

即使在React17中，仍然可以使用它们，但是它们将添加“UNSAFE_”前缀，以表明它们可能导致问题。我们还准备了一个自动化的脚本，以便现有代码中重命名它们。

除了废弃不安全的生命周期钩子外，我们还增加了一些新的生命周期钩子:

getDerivedStateFromProps 用来componentWillReceiveProps。

getSnapshotBeforeUpdate，用在更新前从DOM中安全地读取属性。

StrictMode 组件

8a50a6ab2ed5f48935ba47798a0657e4是一种专门用于暴露潜在问题的工具。与20b482145aa8764fe95d208d18a8c1ba一样，50449077873ac5e8cb1383836e576ad1将 不会渲染到视图中。它能为其子组件激活额外的检查和警告。

注意

8a50a6ab2ed5f48935ba47798a0657e4

이 변경 사항이 기존의 많은 구성 요소에 영향을 미칠 것이라는 점을 인식하고 있습니다. 따라서 마이그레이션 경로는 최대한 원활하게 진행되며 마이그레이션 옵션이 제공됩니다. (Facebook에는 50,000개가 넘는 React 구성 요소가 있습니다. 또한 점진적인 릴리스 주기를 따릅니다!

참고 🎜🎜 지원 중단 경고는 React 16의 향후 버전에서 활성화되며 17이 릴리스될 때까지 유지됩니다. 🎜🎜 React17에서도 , 계속 사용할 수 있지만 문제가 발생할 수 있음을 나타내기 위해 접두사 "UNSAFE_"가 붙습니다. 또한 기존 코드에서 이름을 바꾸는 자동화된 스크립트도 준비했습니다. 주기 후크와 함께 몇 가지 새로운 수명 주기 후크도 추가했습니다. 🎜🎜getDerivedStateFromProps는 업데이트하기 전에 DOM에서 콘텐츠를 검색하는 데 사용되는 componentWillReceiveProps 🎜🎜getSnapshotBeforeUpdate에 사용됩니다. 🎜🎜StrictMode 구성 요소 🎜🎜8a50a6ab2ed5f48935ba47798a0657e4는 20b482145aa8764fe95d208d18a8c1ba와 관련된 잠재적인 문제를 노출하도록 설계된 도구입니다. 50449077873ac5e8cb1383836e576ad1는 하위 구성 요소에 대한 추가 확인 및 경고를 활성화할 수 있습니다. 🎜🎜🎜Note🎜🎜09ecb2b572a6fafad6711f265545ded4검사는 개발 모드에서만 실행되며 프로덕션 빌드에는 영향을 미치지 않습니다. 🎜🎜🎜엄격 모드는 특정 유형의 변조 등 모든 문제를 포착할 수는 없지만, 엄격 모드에서 경고를 확인하면 많은 사람들에게 도움이 될 수 있습니다. 모드에서는 이러한 것들이 비동기 렌더링에 오류를 일으킬 가능성이 높습니다 🎜

버전 16.3에서 StrictMode는 다음을 지원합니다.

1. 안전하지 않은 수명 주기 후크가 있는 구성 요소를 식별합니다.

2. 레거시 문자열 참조 API 사용에 대한 경고입니다.

3. 예상치 못한 부작용 감지

위 내용은 React v16.3.0: 새로운 수명주기 및 컨텍스트 API의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!