context来了，也许该放手redux or mobx...

老铁，学不动了？不要慌，耽误不了你几分钟...(说谎脸，汗)

long long ago

使用react的同胞们，也许都苦恼过其状态管理以及组件之间的数据传递和共享（笨重的方式经过props依次往子组件传递）。

这时候，redux（mobx相似）出现了，咱们累死累活的从水深火热中解放了（第三方的库相对较复杂和麻烦）。。。

那尚未接触过redux或者还在使用redux路上的同窗怎么办？不要着急，更简单的东西来了（前方高能，请各老铁注意！）： Context API！！！（React v16.3.0+） 戳我查看更新日志

先来安利一个todolist的栗子：

戳我查看源码和demo

Context是什么？

Context直译就是上下文，是 React 16.3.0开始提供的一个官方API，它无需经过props的方式就能够完成项目中由上而下及组件之间的数据传递和共享，即你也不用依赖任何第三方的状态数据插件库就能够完成这项工做任务。

官方推荐使用的状况是：当须要用到全局数据的时候，好比：主题，多语言制或者用户登陆受权等等。 ==固然：== 你无需这么死板，当须要用到多层级的组件数据传递或者复杂的数据共享场景也可使用context api，也能够用来作缓存使用。

Context简单使用

// 1.使用React.createContext建立context提供者Provider 和 context订阅者cunsomer

const {Provider, Consumer} = React.createContext(defaultValue); // defaultValue根据使用场景设置

// 2.设置Provider组件
// 通常包裹须要订阅的子组件的顶层父组件
// value设置须要传递和共享的数据以及改变数据的函数等
// 为了不不必的重绘和渲染，value的数据属性值经过组件state设置

<Provider value={/* some value */}>
    {/* some component with comsumer */}
</Provider>

// 3.设置Consumer组件
// 经过函数做为子元素的方式，订阅context的变换

<Consumer>
  {value => /* render something based on the context value */}
</Consumer>

// 组合Provider 和 Consumer便可大功告成

<ProviderComponent>
    <ConsumerComponent>{somechildren}</ConsumerComponent>
</ProviderComponent>

// 其余更多用法，好比生命周期函数调用（可点击上面demo查看），高阶组件等浏览一下文档即会，很是简单

简单总结

建立卖家和买家，经过你们都很是熟悉的React组件方式来进行买卖交易，如此简单的Context用法，你们还在等什么，赶忙丢掉其余的第三方库！！

结语： 小小皮一下，你们不要打我，新功能能够尝试，也须要你们的讨论和研究，相似redux的第三方库仍是很是强大~~(前端攻城狮③群:743490497，欢迎你们进群讨论)

更多资料请查看如下连接:

https://reactjs.org/docs/context.html

https://css-tricks.com/digging-into-react-context/