react Context/Provider/Consumer传参使用

react Context/Provider/Consumer传参使用

react context这个api很少用到,所以一直不太清楚如何使用,最近在看antd的项目源码时,发现在组件中有类似Template.Comsumer的写法,一时没反应过来,本着碰到不懂得都要追根究底的原则,下面好好学习一下,Context这个api的使用

Context

作用

上下文(Context) 提供了一种通过组件树传递数据的方法，无需在每个级别手动传递 props 属性。

但是我们现在通用的传递数据的做法是使用redux,mobx,应为这些数据管理插件,能更好的对数据做管理已经更新 ,而使用Context只能将部分数据传入,且使用起来比较麻烦,容易造成混乱.

所以一般情况下我们不要使用Context,虽然不太用到但是还是需要学习的,指不定哪天就转正了

如何使用

这里直接就用官方的例子来解释,自己懒得写例子了 = ) !

//创建一个Context 
//light就是传入的默认值 最好传入默认值因为第一次渲染的时候没有默认值可能会导致错误
const ThemeContext = React.createContext('light');

class App extends React.Component {
   
  render() {
   
    return (
        //使用Provider设置dark值
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    );
}

//中间组件
function Toolbar(props) {
   
  return