关于react.js:React-Context用法总结

Context作用

React中，父子组件通信的机制，父子组件的通信是通过props进行数据的传递。
Context提供了一种形式，可能让数据逾越组件层级来传递，不再须要一层一层的传递

如何应用

React.createContext()

 const MyContext = React.createContext(defaultValue)
 defaultValue 默认值，没有Provider时会失效

Context.Provider

<MyContext.Provider value={/* 某个值 */}>
Provider 接管一个 value 属性，传递给生产组件

Class.contextType

能够通过Class.contextType间接将Context对象挂载到class的contextType属性，而后就能够应用this.context对context对象进行应用

class MyClass extends React.Component {
  render() {
    let value = this.context;
    /* 基于 MyContext 组件的值进行渲染 */
  }
}
MyClass.contextType = MyContext;
或
class MyClass extends React.Component {
  static contextType = MyContext;
  render() {
    let value = this.context;
    /* 基于这个值进行渲染工作 */
  }
}

Context.Consumer

<MyContext.Consumer>
  {value => /* 基于 context 值进行渲染*/}
</MyContext.Consumer>

置信小伙伴对 React context 的作用 以及应用有了肯定的理解。当然还有其余场景的应用，可间接看官网（https://react.docschina.org/d…）也心愿帮忙到须要的小伙伴们。