06.React组件进阶(二）Context

Context

作用：跨组件传递数据（比如主题，语言等）

使用步骤：

1.使用Reat.creatContext()创建Provider(提供数据和 Consumer(消费数据) 两个组件

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

2.使用Provider组件作为父节点

```

```

3.使用value属性，表示要传递的数据

``` ```

4.使用Consumer 组件接收数据

``` {data => data参数表示接收到的数据---data} ``` ``` //2.接收数据 //创建Context得到两个组件 const {Provider,Consumer} = React.createContext() //父组件 class App extends React.Component{ render(){ return(

) } } //子组件 const Node = props => { return (

) }

const SubNode = props =>{
return (

)
}

const Child = props =>{
return (

{data =>我是子节点--{data}}

)
}
//1.传递数据
ReactDOM.render(,document.getElementById('root'))

<h2>总结</h2>

1.如果两个组件是远方亲戚（比如，嵌套多层）可以使用Context实现组件通讯
2.Context提供了两个组件：Provider 和 Consumer
3.Provider组件:用来提供数据
4.Consumer组件:用来消费数据