- 1.什么是Context
Context是React提供的一种跨层级组件通信的机制。它能够让我们在不必经过逐层传递props的情况下，将数据传递给任意深度的组件。
- 2.如何使用Context
在React中，我们可以通过React.createContext()方法创建一个Context对象，然后将其传递给组件中的Provider组件。Provider组件接收一个value属性，它的值将会被传递给子组件。子组件可以通过在组件中调用Consumer组件，来访问这个值。
下面是一个简单的例子：
// 创建一个Context对象constMyContext=React.createContext(); // 定义一个Provider组件classMyProviderextendsReact.Component { state= { count: 0 } incrementCount= () => { this.setState({ count: this.state.count+1 }); } render() { return ( // 将Context对象传递给Provider组件<MyContext.Providervalue={{ count: this.state.count, incrementCount: this.incrementCount }}> {this.props.children} </MyContext.Provider> ); } } // 定义一个消费Context的组件classMyConsumerextendsReact.Component { render() { return ( // 在组件中调用Consumer组件，访问Context中的值<MyContext.Consumer> {({ count, incrementCount }) => ( <div><p>Count: {count}</p><buttononClick={incrementCount}>Increment</button></div> )} </MyContext.Consumer> ); } } // 渲染组件classAppextendsReact.Component { render() { return ( <MyProvider><MyConsumer/></MyProvider> ); } } ReactDOM.render(<App/>, document.getElementById('root'));
在上面的例子中，我们创建了一个名为MyContext的Context对象，并定义了一个MyProvider组件和一个MyConsumer组件。MyProvider组件有一个名为count的状态值，它可以通过incrementCount方法进行修改。我们将MyContext对象传递给MyProvider组件，并在其value属性中设置了一个包含count和incrementCount方法的对象。
在MyConsumer组件中，我们使用了MyContext.Consumer组件来访问MyContext中的值。Consumer组件接收一个函数作为其子元素，并将MyContext中的值作为该函数的参数。我们在这个函数中渲染了一个包含count值和一个按钮的div元素。
最后，在App组件中，我们渲染了一个MyProvider组件和一个MyConsumer组件，从而实现了对Context中值的访问。
