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

免费下载我的反应手册


更多反应教程: