Hook的出现

Hook的出现，可以解决上面提到的这些问题；

简单总结一下hooks：

它可以让我们在不编写class的情况下使用state以及其他的React特性；

但是我们可以由此延伸出非常多的用法，来让我们前面所提到的问题得到解决；

Hook的使用场景：

Hook的出现基本可以代替我们之前所有使用class组件的地方；

但是如果是一个旧的项目，你并不需要直接将所有的代码重构为Hooks，因为它完全向下兼容，你可以渐进式的来使用它；

Hook只能在函数组件中使用，不能在类组件，或者函数组件之外的地方使用；

在我们继续之前，请记住 Hook 是：

完全可选的：你无需重写任何已有代码就可以在一些组件中尝试 Hook。但是如果你不想，你不必现在就去学习或使用 Hook。

100% 向后兼容的：Hook 不包含任何破坏性改动。

现在可用：Hook 已发布于 v16.8.0。

useState解析

那么我们来研究一下核心的一段代码代表什么意思：

useState来自react，需要从react中导入，它是一个hook；

参数：初始化值，如果不设置为undefined；

返回值：数组，包含两个元素；

元素一：当前状态的值（第一调用为初始化值）；

元素二：设置状态值的函数；

点击button按钮后，会完成两件事情：

调用setCount，设置一个新的值；

组件重新渲染，并且根据新的值返回DOM结构；

相信通过上面的一个简单案例，你已经会喜欢上Hook的使用了。

Hook 就是 JavaScript 函数，这个函数可以帮助你 钩入（hook into） React State以及生命周期等特性；

但是使用它们会有两个额外的规则：

只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。

只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用。

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