React Context API

Context APIは、小道具を使用せずにアプリ全体で状態を渡すための優れた方法です。

ザ・コンテキストAPI小道具を使用せずに、アプリ全体で状態を渡す（および状態を更新できるようにする）ために導入されました。

Reactチームは、通過する子のレベルが数レベルしかない場合は、コンテキストAPIよりもはるかに複雑でないAPIであるため、小道具に固執することを提案します。

多くの場合、使用を回避できます戻ってきた、アプリを大幅に簡素化し、Reactの使用方法も学びます。

それはどのように機能しますか？

を使用してコンテキストを作成しますReact.createContext()、Contextオブジェクトを返します。：

const { Provider, Consumer } = React.createContext()

次に、を返すラッパーコンポーネントを作成しますプロバイダーコンポーネントであり、コンテキストにアクセスするすべてのコンポーネントを子として追加します。

class Container extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      something: 'hey'
    }
  }
render() {
return (
<Provider value={{ state: this.state }}>{this.props.children}</Provider>
)
}
}
class HelloWorld extends React.Component {
render() {
return (
<Container>
<Button />
</Container>
)
}
}

これはグローバルプロバイダーになるため、このコンポーネントの名前としてContainerを使用しました。より小さなコンテキストを作成することもできます。

プロバイダーにラップされているコンポーネント内では、消費者コンテキストを利用するコンポーネント：

class Button extends React.Component {
  render() {
    return (
      <Consumer>
        {context => <button>{context.state.something}</button>}
      </Consumer>
    )
  }
}

関数をプロバイダー値に渡すこともできます。これらの関数は、コンシューマーがコンテキスト状態を更新するために使用します。

<Provider value={{
  state: this.state,
  updateSomething: () => this.setState({something: 'ho!'})}}>
  {this.props.children}
</Provider>
/* … */
<Consumer>
{(context) => (
<button onClick={context.updateSomething}>{context.state.something}</button>
)}
</Consumer>

あなたはこれが実際に動いているのを見ることができますこのグリッチで。

複数のコンテキストを作成して、状態をコンポーネント間で分散させながら、状態を公開して、必要なコンポーネントから到達可能にすることができます。

複数のファイルを使用する場合は、1つのファイルにコンテンツを作成し、使用するすべての場所にインポートします。

//context.js
import React from 'react'
export default React.createContext()
//component1.js
import Context from ‘./context’
//… use Context.Provider

//component2.js
import Context from ‘./context’
//… use Context.Consumer

私の無料ダウンロードReactハンドブック

React Context API

Context APIは、小道具を使用せずにアプリ全体で状態を渡すための優れた方法です。

その他の反応チュートリアル：