React入门八：Context

1.思考：App组件要传递数据给Child组件，该如何处理

• 处理方式：使用props一层层组件往下传递（繁琐）
  

• 更好的办法：使用Context

• 作用：跨组件传递数据（比如：主题、语言）。直接从App组件传递到Child
  

2. Context使用步骤：

• 调用React.createContext()创建Provider(提供数据)和Consumer(消费数据)两个组件

const {Provider,Consumer} = React.createContext()

• 使用Provider组件作为父节点

<Provider>
	<div className="App">
		<Child1/>
	</div>
</Provider>

• 设置value属性，表示要传递的数据

<Provider value="pink">

• 调用Consumer组件接收数据

 <Consumer>
    {/* 回调 */}
    {
         data => <span>{data}</span>
    }
 </Consumer>

3. 完整代码：

// ES6 中模块化语法
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

// 创建context得到两个组件
const { Provider, Consumer } = React.createContext()

class App extends React.Component {
  render() {
    return (
      <Provider value="pink">
        <div className="app">
          <Node />
        </div>
      </Provider>
    )
  }
}

const Node = props => {
  return (
    <div className="node">
      <SubNode />
    </div>
  )
}
const SubNode = props => {
  return (
    <div className="subnode">
      <Child />
    </div>
  )
}

const Child = props => {
  return (
    <div className="child">
      <Consumer>
        {/* 回调 */}
        {
          data => <span>{data}</span>
        }
      </Consumer>
    </div>
  )
}
ReactDOM.render(<App />, document.getElementById('root'))

4. 总结：

• 如果两个组件嵌套多层 可以使用Context实现组件通讯
• Context提供两个组件：Provider 和 Consumer
• Provider ：用来提供数据
• Consumer：用来接收数据的