今日文章目录

• 前言
• 参考资料

前言

在 Day25-[React] props 中我们练习用props来传递资料给子层。这样的传递方式在小型应用程序还够用，如果遇到中大型应用程序，一个component下有千千万万个子层，那props就会传个没完。

来看看下面图例：

Q : 如果子层间要互传资料，该怎麽办呢？

(使用props传递顺序)

1. 顶层写好资料与方法，往下传。
2. 经过第2层，再往下传。
3. 找到了，拿顶层给的setState改值。

4. 改好值，顶层会拿到最新值。
5. 往下传给目标子层
6. 目标子层拿到新值

看到问题了吗？当 component 越来越庞大的时候，资料的传递会变得越来越困难。而且中间经手的子层并不需要那项资料，只为了传给第三层的儿子，活生生是个工具人！这样的情况在网页维护上会更复杂，因为你不知道你现在检查的component跟props哪些才是直接相关？也会影响到建立重复共用的component，因为你不得已要传一堆无关的props～

儿子：可是爸爸，我还要！

所以 React 提供另外一个传递资料的方法：useContext，让我们针对多组component都会使用的的资料做统一管理，需要资料统一跟useContext拿。

但不要完全丢弃props，把所有资料都丢进useContext!
我们只针对几乎每个component都会用到的，像是：使用者登入资讯、UI主题色，或是有多国语言翻译的网页等等，把这些资料放到 Global scope。
其他只有特定component才会用到的，放在 block scope里即可。或者，可以考虑使用Composition vs 继承(之後来练练这个 ? )

搭配服用文章：Prop Drilling

今天概念篇先到这里，明天来实做看看～

参考资料

• React官网 - useContext
• React官网 - Caveats
• React官网 - Context
• React官网 - Composition vs 继承