React中的context

context的优点是 我们假如有一个父组件和2个组件a,b 从父组件传值给b
a中嵌套的b不能直接传得父组件=》b组件=》a组件
 
当我们使用context的时候就可以直接从父元素传给子组件a
 
有两种写法  一种是class 还有一种是函数组件 
 
首先我们先用class写 
在父组件中写
import React, { Component } from 'react'
import B from './b'
import Context from './c'
export class Move extends Component {
  state = {
    data:{
      name: '小花'
    }
  }
  Onclick = opt => {
    console.log(opt,23);
  }
  render() {
    const obj = {...this.state.data, one : this.Onclick }
    return (
      <div>
        <Context.Provider value={obj}>
          <B />
        </Context.Provider>
      </div>
    )
  }
}
 
export default Move
 
 
在子组件中是 
 
import React, { Component } from 'react'
import Theme from './c'
 
export class A extends Component {
  // static contextType = Theme
  render() {
    // const { name , one } = this.context
    return (
      <div>
        {/* <h1 onClick={() => one('wsw')}>{name}</h1>
        123 */}
        <Theme.Consumer>
          {
            ({name , one}) => {
              return (
                <h1 onClick={() => one('wsw')}>{name}</h1>
              )
            }
          }
        </Theme.Consumer>
      </div>
    )
  }
}
 
export default A
 
 
但是我们需要一个公共的组件c来承接他们的值
 
import React from 'react'
export default React.createContext('light')
 
默认是一个值 要是父元素不传的话 就显示出这个默认值
 
 
 
 
 
 
接下来是函数组件的写法  主页面照常写 组件c 照常写  唯一改变的是a组件
 
import React from 'react'
import Theme from './c'
 
export function A() {
  const { name, one } = React.useContext(Theme)
    return (
      <div>
        123456
          <h1 onClick={() => one('wsw')}>{name}</h1>
      </div>
    )
}
 
export default A
  利用hook中的useContext减少代码 更加简洁