React Hooks 迷你速成课程

1.

2.

3.

4.

5.

6.

7.

8.

9.

这最初是在 Twitter 上发布的：https://twitter.com/chrisachard/status/1167132279333957632

想学 hooks，但太忙了？⏲

🔥 这是专为您准备的迷你速成课程！🔥

（代码链接在文末）

1.

通过调用为函数组件添加状态useState并传入初始值。

2.

useState返回数组中的 2 个值：

1. 状态的当前值
2. 更新状态的函数

3.

在函数的顶层调用钩子，而不是在 if 语句或循环中调用。

这是 React 内部跟踪钩子值所必需的。

4.

useEffect在钩子中执行异步操作和有副作用的操作

这样，异步操作仍然可以在多个渲染中工作

5.

useEffect将依赖项数组作为第二个参数

这很重要！跳过依赖列表可能会导致无限循环，或者代码在你认为应该运行的时候却没有运行。

6.

将自定义钩子编写为以单词开头的函数use

然后使用你想要的任何内置钩子

并返回（或不返回）以及值和函数

7.

还有许多其他内置钩子，但它们都遵循类似的模式

完整列表请见：https ://reactjs.org/docs/hooks-reference.html

8.

就是这样！现在你可以向函数组件添加状态和长时间运行的效果了。

类组件并没有消亡，但是钩子确实有助于清理一些组件逻辑。

9.

以下是您可以尝试的代码链接！

useState

useEffect

自定义钩子

喜欢这篇文章吗？
您可以通过以下方式找到更多内容：

• 在 Twitter 上关注我：@chrisachard
• 订阅新闻通讯：chrisachard.com

感谢阅读！