认识useState

State Hook的API就是 useState，我们在前面已经进行了学习：

useState会帮助我们定义一个 state变量，useState 是一种新方法，它与 class 里面的 this.state 提供的功能完全相同。

一般来说，在函数退出后变量就会”消失”，而 state 中的变量会被 React 保留。

useState接受唯一一个参数，在第一次组件被调用时使用来作为初始化值。（如果没有传递参数，那么初始化值为undefined）。

useState的返回值是一个数组，我们可以通过数组的解构，来完成赋值会非常方便。

FAQ：为什么叫 useState 而不叫 createState?

“create” 可能不是很准确，因为 state 只在组件首次渲染的时候被创建。

在下一次重新渲染时，useState 返回给我们当前的 state。

如果每次都创建新的变量，它就不是 “state”了。

这也是 Hook 的名字总是以 use 开头的一个原因。

当然，我们也可以在一个组件中定义多个变量和复杂变量（数组、对象）

认识Effect Hook

目前我们已经通过hook在函数式组件中定义state，那么类似于生命周期这些呢？

Effect Hook 可以让你来完成一些类似于class中生命周期的功能；

事实上，类似于网络请求、手动更新DOM、一些事件的监听，都是React更新DOM的一些副作用（Side Effects）；

所以对于完成这些功能的Hook被称之为 Effect Hook

useEffect的解析：

通过useEffect的Hook，可以告诉React需要在渲染后执行某些操作；

useEffect要求我们传入一个回调函数，在React执行完更新DOM操作之后，就会回调这个函数；

默认情况下，无论是第一次渲染之后，还是每次更新之后，都会执行这个回调函数；

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 18 天，点击查看活动详情