react中父传子最通用的传值方式是props（这一点跟vue一样）,而当子向父传递数据时，vue采用的是emit自定义事件，在react中父组件直接传递一个回调函数给子组件，子组件调用父组件的回调函数来传递数据。

当层级嵌套太深，父=>子=>孙，等嵌套关系太多，也可以直接一层层的用props传递，如果有多个参数需要传递，例如'Counter counter={counter} type={type} />',也可以直接使用props的展开写法，{...props}的写法和上面的达到的效果一致。

直接一层层的传递写法，虽然App的儿子组件不需要用到App传过来的数据，但是为了向下传递还是得在组件向下传递，如果有多个参数，按照这样的写法得写很多不必要的。

props的展开写法要比直接写优雅的多，但是如果层级更深的话，一层层的传递也很麻烦。

Context用于层级太深的组件进行通信。

首先创建一个context组件。

用创建出来的组件包裹我们想要传递的数据给需要的子组件（该组件里面的.provide方法）。

接着在需要拿数组的子孙组件设置static contextType的类型为我们创建的组件对象（仅仅针对类组件）,再打印this.context就能拿到传递过来的数组。

函数组件怎么那context分享过来的值呢？

对于函数组件必须要使用创建出来的组件的Consumer的方法，当有几个value的情况下，嵌套代码会很恶心，这时我们也可以使用hooks,useContext的api帮助我们更好的获取context组件中传的值。

使用hook是写法获取context的值。