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

免费下载我的反应手册

React Context API

Context API是一种在应用之间传递状态的巧妙方法，而无需使用道具

更多反应教程：