React Context API

Context API是一種在應用之間傳遞狀態的巧妙方法,而無需使用道具

上下文API引入該功能是為了允許您在應用中傳遞狀態(並允許狀態更新),而無需使用道具。

如果您只有幾個級別的孩子要通過,React團隊建議堅持使用道具,因為它仍然比Context API複雜得多。

在許多情況下,它使我們避免使用Redux,大大簡化了我們的應用程序,還學習瞭如何使用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值中,並且使用者將使用這些函數來更新上下文狀態:

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

您可以看到此動作在這個小故障

您可以創建多個上下文,以使您的狀態分佈在各個組件之間,但可以公開它並使任何所需的組件都可以訪問它。

使用多個文件時,可以在一個文件中創建內容,然後將其導入所有使用位置:

//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

免費下載我的反應手冊


更多反應教程: