React 16.3のContext APIの詳細説明

React はバージョン 16.3-alpha で新しい Context API を導入しており、コミュニティはそれを楽しみにしています。まず簡単な例を使用して新しい Context API がどのようなものであるかを確認し、次に新しい API の意味について簡単に説明します。 16.3-alpha里引入了新的Context API，社区一片期待之声。我们先通过简单的例子，看下新的Context API长啥样，然后再简单探讨下新的API的意义。

需要安装16.3-alpha版本的react。构建步骤非本文重点，本文主要和大家分享React 16.3之Context API详解，希望能帮助到大家。

npm install react@next react-dom@next

下面，直接来看代码，如果用过react-redux应该会觉得很眼熟。

首先，创建context实例：

import React from 'react';
import ReactDOM from 'react-dom';

// 创建context实例
const ThemeContext = React.createContext({
  background: 'red',
  color: 'white'
});

然后，定义App组件，注意这里用到了Provider组件，类似react-redux的Provider组件。

class App extends React.Component {

  render () {
    return (
      <ThemeContext.Provider value={{background: &#39;green&#39;, color: &#39;white&#39;}}>
        <Header />
       </ThemeContext.Provider>
    );
  }
}

接下来，定义Header、Title组件。注意：

1. Title组件用到了Consumer组件，表示要消费Provider传递的数据。

2. Title组件是App的孙组件，但跳过了Header消费数据。

class Header extends React.Component {
  render () {
    return (
      <Title>Hello React Context API</Title>
    );
  }
}

class Title extends React.Component {
  render () {
    return (
      <ThemeContext.Consumer>
        {context => (
          <h1 style={{background: context.background, color: context.color}}>
            {this.props.children}
          </h1>
        )}
      </ThemeContext.Consumer>
    );
  }
}

最后，常规操作

ReactDOM.render(
  <App />, 
  document.getElementById('container')
);

看下程序运行结果：

为什么有新的Context API

用过redux + react-redux的同学，应该会觉得新的Context API很眼熟。而有看过react-redux源码的同学就知道，react-redux本身就是基于旧版本的Context API实现的。

既然已经有了现成的解决方案，为什么还会有新的Context API呢？

1. 现有Context API的实现存在一定问题：比如当父组件的shouldComponentUpdate

   React の 16.3-alpha バージョンをインストールする必要があります。この記事では、構築手順については主に説明しませんが、React 16.3 の Context API について詳しく説明します。
rrreee
2. それでは、react-redux を使用したことがある場合は、コードを直接見てみましょう。
   まず、context インスタンスを作成します:
rrreee

次に、App コンポーネントをここでも同様に使用していることに注意してください。 react - redux の Provider コンポーネントに。

rrreee

次に、Header コンポーネントと Title コンポーネントを定義します。注:

🎜 Title コンポーネントは Consumer コンポーネントを使用し、Provider を使用する必要があることを示します pass データ。 🎜🎜🎜🎜 Title コンポーネントは App の grandson コンポーネントですが、Header 消費データをスキップします。 🎜🎜🎜rrreee🎜最後に、通常の操作です🎜rrreee🎜プログラムの実行結果を見てください:🎜🎜🎜🎜新しい Context API があるのはなぜですか🎜🎜redux + reverse-redux を使用した学生は次のように感じるはずです。新しいコンテキスト API は見覚えのあるものです。 react-redux のソース コードを読んだ生徒は、react-redux 自体が古いバージョンの Context API に基づいて実装されていることを知っているでしょう。 🎜🎜既製のソリューションがすでにあるのに、なぜ新しい Context API があるのでしょうか? 🎜
🎜🎜 既存の Context API の実装には特定の問題があります。たとえば、親コンポーネントの shouldComponentUpdate パフォーマンスが最適化されている場合、コンテキスト データを消費する子は更新されません。 🎜🎜🎜🎜複雑さの軽減: redux ファミリー バケットのようなソリューションはプロジェクトにある程度の複雑さをもたらします。特にソリューションについて十分な知識がない学生は問題を解決できない可能性があります。新しい Context API の導入により、多くのプロジェクトの redux ファミリ バケットへの依存をある程度減らすことができます。 🎜🎜🎜🎜後ろに書いてあります🎜🎜新しいContext API、パフォーマンスの向上がさらに楽しみです。複雑さを軽減し、redux を置き換えることについては、私の焦点では​​ありません。次の計画は、複数の構築ポイントのユースケースで比較テストを実施することです。 🎜

以上がReact 16.3のContext APIの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。