React学习 Hooks的使用（一）

React框架中最大的亮点就是Hooks，它使得我们更容易的复用代码，大大减少了重复编写代码。不需要像类组件那样写props来获得状态，也不需要有那么多的this指向来扰乱我们。

那hooks是什么呢？
hook就是JavaScript函数，它可以帮助我们钩入 React State以及生命周期等特性；
使用hooks的规则：
只能在函数最外层调用。不要在循环、条件判断或子函数中调用。
只能在React的函数组件中调用，不要在其他JavaScript函数中调用。

Hooks初体验：
接下来就用react包中的useState这个hook来作为初体验对象。

useState：本身是一个函数，需要从react包中导入才能使用。

我们可以给它传入一个参数，这个参数就是给创建出来的状态一个默认值。
并且这个函数返回的是一个数组，我们可以定义一个arr来接收它。

返回值的第一个元素就是当前state的值，用来保存我们的状态。
第二个元素是一个函数，用来修改我们的状态，我们可以在需要的地方调用它修改状态。

这就是useState的简单使用了。

当要使用的状态是复杂数据类型时，想要改变某类属性的状态时我们又要怎么使用useState呢？

先定义一个复杂数据

再使用map函数遍历这个数据将数据渲染出来

通过遍历传入的index来找到我们要修改的那一条数据。首先要将原来的数据拷贝给一个新的数组，再通过这个新数组进行年龄+1的操作，最后调用setStudents函数，将新数组传入，如此就能单独改变每一条数据里的年龄。

Effect Hook

Effect Hook可以让我们完成一些类似class中生命周期的功能。
在react中，不管是第一次渲染还是发生更新是渲染都会调用useEffect这个hook，在组件中模拟订阅事件的例子。

在父组件中操作子组件进行显示和隐藏，模拟事件订阅与取消。

useEffect中可以传入两个参数：
第一个参数是一个回调函数，也就是我们希望做的一些网络请求啊或者事件订阅等都在这里进行相当于componentDidMount，这个函数还可以返回一个函数，当组件销毁或者更新时，需要取消订阅或者停止发送网络请求时就可以在这里进行，相当于componentDidUpdate。

第二个参数是一个数组类型的可选参数，如果不传入这个参数的话，那么当组件发生更新时，所有useEffect这个hook里的操作都将重新调用一次，如果我们不想让他多次调用，那么我们就可以给它传入一个空数组。这样页面发生更像时，就不会再调用这个hook里的函数了。

如果我们想让它依赖某个值进行调用，那我们只需要将这个值放到数组中即可，这里只要counter值发生改变，就会调用useEffect

---

useContext：

父组件中

子组件中

拿到数据