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 を管理する 2 つの方法、string ref API と callback ref API を提供していました。文字列 ref API の方が便利ですが、いくつかの欠点があるため、コールバック ref を使用することを公式に推奨しています。

React 16.3 は、ref を管理するための新しいスキームを提供します。これにより、文字列 ref が欠点なく便利になります:

## 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 に加えて、コールバック ref も引き続きサポートされます。

コンポーネント内のコールバック参照を置き換える必要はありません。これらは若干柔軟性が高いため、今後も高度な機能であり続けます。

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 に ref を追加できないため、focus() を呼び出すことができないことを意味します。

新しいプロキシ API は、ref をインターセプトし、通常の 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 では、通常とは異なる方法で初期レンダリングを防ぐのは非常に簡単です。その理由の 1 つは、この与えられたタスクを達成するためのフックが非常に多く、どれが最適であるかが明らかでないためです。エラー処理の割り込み動作が考慮されていないことが多く、メモリ リークを引き起こす可能性があることに気づきました (これは今後の非同期レンダリング モードにも影響します)。現在のクラス コンポーネント API は、コード オプティマイザー (Prepack) の作業など、他のタスクも複雑にします。

componentWillMount、componentWillReceiveProps、componentWillUpdate これらのフックは簡単に問題を引き起こし、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 がリリースされるまで残ります。 🎜🎜 React 17 でも、引き続き使用できますが、問題を引き起こす可能性があることを示すために「UNSAFE_」という接頭辞が付けられます。安全な生活に加えて、既存のコードで名前を変更するための自動スクリプトも用意しました。サイクル フックに加えて、新しいライフ サイクル フックもいくつか追加しました。 🎜🎜getDerivedStateFromProps は、componentWillReceiveProps に使用されます 🎜🎜getSnapshotBeforeUpdate は、更新前に DOM からコンテンツを取得するために使用されます。プロパティを安全に読み取ります。🎜🎜StrictMode コンポーネント 🎜🎜8a50a6ab2ed5f48935ba47798a0657e4 は、20b482145aa8764fe95d208d18a8c1ba の潜在的な問題を明らかにするために設計されたツールです。 50449077873ac5e8cb1383836e576ad1 はビューにレンダリングされません。子コンポーネントに対する追加のチェックと警告をアクティブにすることができます 🎜🎜🎜35ffd950d6cb7a0b770e22000943a92cチェックは開発モードでのみ実行され、実稼働ビルドには影響しません 🎜🎜🎜厳密モードではすべての問題 (特定の種類の改ざんなど) が検出されるわけではありませんが、厳密モードで警告が表示される場合は、多くの人が役立ちます。モードでは、これらのことが非同期レンダリングでエラーを引き起こす可能性が高くなります 🎜

バージョン 16.3 では、StrictMode が次のことに役立ちます:

1. 安全でないライフサイクル フックを持つコンポーネントを特定します。

2. 従来の文字列参照 API の使用に関する警告。

3. 予期せぬ副作用を検出

以上がReact v16.3.0: 新しいライフサイクルとコンテキスト APIの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。