React v16.3.0: 新しいライフサイクルとコンテキスト API-PHPチュートリアル-php.cn

React v16.3.0: 新しいライフサイクルとコンテキスト API

不言

リリース： 2023-03-22 18:56:02

オリジナル

1372 人が閲覧しました

数日前、段階的な移行戦略など、従来のライフサイクルアプローチに対する今後の変更についての記事を書きました。 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(&#39;light&#39;);

class ThemeProvider extends React.Component {
  state = {theme: &#39;light&#39;};

  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 (
      <ThemeContext.Consumer>
        {theme => <Component {...props} theme={theme} />}
      </ThemeContext.Consumer>
    );
  };
}

ログイン後にコピー

上記の特別な方法を使用して、テーマコンテキストを使用せずにコンポーネントをテーマコンテキストに接続できます。直接。例:

## by 司徒正美

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

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

  render() {
    const {label, theme, ...rest} = this.props;
    return (
      <button
        {...rest}
        className={`${theme}-button`}
        ref={this.buttonRef}>

        {label}
      </button>
    );
  }
}

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.
<FancyThemedButton
  label="Click me!"
  onClick={handleClick}
/>;

ログイン後にコピー

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 (
      <ThemeContext.Consumer>
        {theme => (
          <Component {...props} ref={ref} theme={theme} />
        )}
      </ThemeContext.Consumer>
    );
  }

  // 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
<FancyThemedButton
  label="Click me!"
  onClick={handleClick}
  ref={fancyButtonRef}
/>;

ログイン後にコピー

コンポーネントのライフサイクルフックの変更

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 组件

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

注意
<StrictMode />
この変更が多くの既存のコンポーネントに影響を与えることを認識しています。したがって、移行パスは可能な限りスムーズになり、移行オプションが提供されます。 (Facebook には 50,000 を超える React コンポーネントがあります。また、段階的なリリースサイクルにも依存しています!

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

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