源码时代前端干货分享| React中Context API的应用，菜鸟逆袭必备！！

末蓝、 2023-08-17 16:21 104阅读 0赞

React Context API

要理解react中的context，首先要讲一下react组件之间的通信（组件之间的数据传递）

在父子组件中，如果父组件要传递数据到子组件，那么只需要给子组件加上对应的属性即可，在子组件中就可以通过this.props来访问父组件传递过来的数据。反过来，如果子组件想要传递数据给父组件，那么同样需要父组件给子组件传递一个属性，只不过这个属性的值必须为一个函数，当我们在子组件中获取到这个属性（值为函数），并执行了该函数，那么父组件中传入的函数也会立即执行，因为本质上子组件中获取的函数与在父组件中传到子组件的函数是同一个函数。所以在子组件调用接受到的函数的时候，只需把要传递给父组件的数据作为参数放到函数里面即可。如下图：Parent是父组件，Child是子组件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpbGxhaW55MTM1Nzk_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpbGxhaW55MTM1Nzk_size_16_color_FFFFFF_t_70 1][]

如果是兄弟组件要相互通信，我们需要把兄弟组件需要通信的数据，统一保存到他们共同的父组件的自身状态中，现在如果某一个子组件想要修改数据，只需要修改父组件中的数据，就可以同时修改这两个兄弟组件中的数据了。在下面的例子中，Child和Child\_2是两个兄弟组件，他们都有一个共同的姓名，都是存放在父组件Parent组件的状态中，当其中一个组件想要修改姓名的时候，只需要修改父组件中的状态就可以了。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpbGxhaW55MTM1Nzk_size_16_color_FFFFFF_t_70 2][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpbGxhaW55MTM1Nzk_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpbGxhaW55MTM1Nzk_size_16_color_FFFFFF_t_70 4][]

当有多层组件嵌套，最外层组件要和最里层组件通信的时候，在沿用之前的本法，就会比较繁琐了，也不便于项目的维护，因为必须要通过中间层组件一层一层的传递数据，直到目标组件。最好的方式是最外层组件和最里层组件能够直接进行通信，而不用通过中间层组件进行传递。而React中的context就能够帮我们实现这个目的。

在下面的例子中，有三个组件Parent Child GrandSon。Parent组件和GrandSon组件的关系是祖孙关系，他们中间隔着一层Child组件。现在要实现Parent组件和GrandSon组件的通信。比如Parent要传递数据到GrandSon,按照之前的做法，我们需要先将数据传递到Child，再由Child把数据传递给GrandSon。这显然不太方便，如果有更多的中间层组件，那就更麻烦了。所有现在我们利用context来实现，Parent和GrandSon的直接通信。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpbGxhaW55MTM1Nzk_size_16_color_FFFFFF_t_70 5][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpbGxhaW55MTM1Nzk_size_16_color_FFFFFF_t_70 6][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpbGxhaW55MTM1Nzk_size_16_color_FFFFFF_t_70 7][]

React中的Context特性虽然能够实现组件之间的直接通信（尤其是多层组件嵌套的时候，不需要中间层组件传递），但是在实际的应用当中，我们一般不太会直接操作Context这个API，因为按照react官方的说法，操作这个API是危险的，因为在任意一个时刻，任何组件，都可以修改context中的内容，这会导致项目不可预测，后期维护绝对是个大问题。一个好的项目，数据的变化一定是可监控的， 换句话说，我们可以很轻易的找到是在哪个地市，以何种方式修改了数据。

既然context看起来有很大的缺陷，那我们就不用了吗？当然不是，很多react项目中常用的第三方数据管理工具（有时候也叫状态机），就大量使用了context。在这些第三方工具中，就很好的处理的刚刚讲的缺点，即数据改变不可预测的问题。我们在使用的时候，也不必操作context，这一切都由第三方工具处理好了。这样我们既可以实现组件之间的直接通信，同时也规避了，数据修改不可预测的问题。

最后推荐几种react数据管理工具：redux、mobx、dva。个人感觉mobx最好用，最简单。redux配置起来太麻烦，dva则是对redux的改进，相对redux要好多了。

(本文由源码时代技术老师原创撰写，转载请注明出处)

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpbGxhaW55MTM1Nzk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2019092811215519.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpbGxhaW55MTM1Nzk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpbGxhaW55MTM1Nzk_size_16_color_FFFFFF_t_70 1]: /images/20230810/2b9c14b7f72a4d95a7b04952cb111c8c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpbGxhaW55MTM1Nzk_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2019092811223619.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpbGxhaW55MTM1Nzk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpbGxhaW55MTM1Nzk_size_16_color_FFFFFF_t_70 3]: /images/20230810/479c0dc8951e49be80a4f216718ae6ab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpbGxhaW55MTM1Nzk_size_16_color_FFFFFF_t_70 4]: /images/20230810/68da0c11c53a441d9c4abbdabc5fafbc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpbGxhaW55MTM1Nzk_size_16_color_FFFFFF_t_70 5]: /images/20230810/42b68c7ed2d242db87231ed9eebb3a1a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpbGxhaW55MTM1Nzk_size_16_color_FFFFFF_t_70 6]: /images/20230810/1cee1b5ac141481f8802ed2929e4eefe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpbGxhaW55MTM1Nzk_size_16_color_FFFFFF_t_70 7]: /images/20230810/ddf0e1fd66a241288b88cabd2119aad4.png