react简单入门--常用hook中useContext的使用

前言：
如果在看本文章之前，你对context API比较了解的话，该hook将会推出比这个更加高级的语法

1、导入：

该hook依旧是从react包中导入即可，无需从第三方包导入

2、使用：

我们事先准备三个组件

• 根组件：< App / >
• 子组件：< Son />
• 孙子组件：< GrandSon />

根组件：
子组件：

孙子组件：

页面效果：

观察发现，也确实能够拿到从根组件传过来的值

总结：

你如果在此之前，对原本的context的API比较熟悉的话，你可以把useContext看成class组件中static contextType = MyContext 或者 <MyContext.Consumer>。但为什么不干脆用原来的context呢，其主要有如下：

• 之前的context是从根组件，经过中间一系列的组件传递，但useContext却不用，它可以直接跨组件传递
• 使用之前的context组件，如何说中间的组件使用了如shouldComponentUpdate来组织重新渲染，有可能就无法将数据继续传到更底下的组件了

调用了 useContext 的组件总会在 context 值变化时重新渲染。如果重渲染组件的开销较大，你可以 通过使用 memoization 来优化。