在React中，什么是context（上下文）？如何使用它？-ReactJS面试指南

当前位置:　首页>> 技术小册>> ReactJS面试指南

答案：

在React中，context是一种在组件树中共享数据的方法，避免了将props一层层地传递给需要它们的组件的麻烦。context允许您在组件树中传递数据，而无需显式地将它们传递给每个组件。

context包含两个主要组件：

Provider：它是一个React组件，允许我们在组件树中的任何地方提供一个值。
Consumer：它是一个React组件，允许我们在组件树中的任何地方使用Provider提供的值。
在使用context时，您需要遵循以下步骤：

创建一个context对象：您可以使用React.createContext函数创建一个新的context对象。

`const MyContext = React.createContext(defaultValue);`
其中，defaultValue是context提供的默认值。

提供一个Provider：使用Provider组件来提供context的值。Provider组件应该被放置在您想要共享数据的组件的父组件中。

```asp
<MyContext.Provider value={/* value */}>
  {/* children */}
</MyContext.Provider>
```
在上面的示例中，value是要共享的数据。

使用一个Consumer：使用Consumer组件来获取context的值。Consumer组件可以被放置在任何地方，它将从离它最近的匹配的Provider组件中获取context的值。

```asp
<MyContext.Consumer>
  {value => /* render something based on the context value */}
</MyContext.Consumer>
```
在上面的示例中，value是从context中获取的值。

除了Consumer之外，还有一种使用context的方法是使用contextType属性。这个属性可以用来给一个类组件赋值一个context，使得这个类组件的所有实例都可以访问到该context。
```asp

class MyClass extends React.Component {
  static contextType = MyContext;
  render() {
    const value = this.context;
    // ...
  }
}
```
需要注意的是，context应该被用来共享一些全局的数据，而不是用来共享组件的状态。过度使用context可能会使组件之间的依赖关系变得复杂。

该分类下的相关小册推荐：

深入学习React实战进阶

剑指Reactjs

React 进阶实践指南

React全家桶--前端开发与实例(上)

React全家桶--前端开发与实例(下)