03｜内置 Hooks（1）：如何保存组件状态和使用生命周期？

王沛

你好，我是王沛。这节课我们一起来学习基本 Hooks 的用法。
如果你用过基于类的组件，那么对组件的生命周期函数一定不会陌生，例如 componentDidMount, componentDidUpdate，等等。如果没有使用过，那也没关系，因为在今天这节课里，你会看到基于 Hooks 去考虑组件的实现，这会是一个非常不同的思路，你完全不用去关心一个组件的生命周期是怎样的。
特别是如果你已经习惯了类组件的开发，那么要做的，甚至是彻底忘掉那些生命周期方法。不要遇到一个需求，就映射到这个功能该在哪个生命周期中去做，然后又要去想原来的声明周期方法在函数组件中应该怎么用 Hooks 去实现。
正确的思路应该是遇到需求时，直接考虑在 Hooks 中去如何实现。
React 提供的 Hooks 其实非常少，一共只有 10 个，比如 useState、useEffect、useCallback、useMemo、useRef、useContext 等等。这一讲我们会先学习 useState 和 useEffect 这两个最为核心的 Hooks。下一讲则会介绍另外四个常用的 Hooks。掌握了这些 Hooks，你就能进行 90% 的 React 开发了。
不过在讲之前我想强调一点，这些 Hooks 的功能其实非常简单，多看看官方文档就可以了。因为这节课的目的，其实是让你学会如何用 Hooks 的思路去进行功能的实现。

公开

同步至部落

取消

完成

0/2000

荧光笔

直线

曲线

笔记

复制

AI

深入了解
翻译
英语
中文简体
中文繁体
法语
德语
日语
韩语
俄语
西班牙语
阿拉伯语
解释
总结

React中的内置Hooks是函数组件开发中的重要工具，本文深入介绍了useState和useEffect这两个核心Hooks的使用方法和注意事项。useState用于管理函数组件的状态，通过示例代码详细解释了其用法，并指出了在开发中应该遵循的原则。另外，文章提到了状态管理的弊端，强调了使用状态管理框架可以让组件本身成为无状态的，更易于使用、测试和维护。在介绍useEffect时，文章详细解释了其具体用法，包括处理副作用、依赖项数组的使用、以及在组件销毁时做一些清理的操作。此外，文章还强调了理解Hooks的依赖和使用规则。通过简洁清晰的语言和实际的代码示例，帮助读者快速了解了React中useState和useEffect的使用方法和注意事项，为读者提供了实用的技术指导。适合React开发者快速了解和掌握。

仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《React Hooks 核心原理与实战》，新⼈⾸单¥59

立即购买

登录后留言

全部留言(43)

最新
精选

独白
置顶
1. 1）依赖那里没有传任何参数的话，会每次render都执行。2）依赖项有传值但是，有部分依赖没有传，那么没有传的那部分，数据即使变化也不会执行副作用。 2.函数应该是不会变化的，所以不需要监听。
作者回复: 👍🏻
2021-06-09
2
19
CondorHero
老师你好，我看到 redux 官网实现 useActions 函数，让我很困惑：地址：https://react-redux.js.org/api/hooks#recipe-useactions 摘录源码，它的依赖数组是动态的，这肯定是不对的，但是如何在 eslint-plugin-react-hooks 规则下写这个函数的呢？： ```react import { bindActionCreators } from 'redux' import { useDispatch } from 'react-redux' import { useMemo } from 'react' export function useActions(actions, deps) { const dispatch = useDispatch() return useMemo( () => { if (Array.isArray(actions)) { return actions.map(a => bindActionCreators(a, dispatch)) } return bindActionCreators(actions, dispatch) }, // 这个依赖数组不是常量的 deps ? [dispatch, ...deps] : [dispatch] ) } ```
作者回复: 你好，学习的很认真哈，官方文档通常是最好的掌握好基础概念最全面的方式。eslint 插件的目的主要是帮助你发现可能的错误。但是 deps 的本质在于确保callback 里需要用到的变量在变化时保证重新执行。所以这个逻辑只要你自己非常确定不出错就可以了。eslint 只是起一个辅助判断的作用。对于这种情况，你完全可以加一个注释： // eslint-disable-line 让 eslint 忽略这个检查。你自己来决定这个代码是不是正确的逻辑。因为本质上，无论怎么写，语法上都是正确的。
2021-05-30
2
14
William
思考题： 1. 未在依赖项中指定变量X，当X发生变化时，不会触发 useEffect 指定的回调函数。 2. setBlogContent可以作为依赖项，但是没必要。因为他只是用来 setState。 3. blogContent不可以作为依赖项，会引起死循环。因为在useEffect中修改了blogContent，会引起新一轮“副作用”回调。 https://github.com/Si3ver/react-hooks-demos/blob/main/src/03/BlogView.js
作者回复: 1. 正确 2. 没必要的原因在于 React 知道 setBlogContent 是永远不会变的，因为是 useState 中返回的。所以可以忽略。 3. 是的，很好的提示。如果在 useEffect 中要使用，可以用函数作为 set 方法的参数，比如 setSomeState(prevState => newState)
2021-05-30
6
7
逍遥一生
1. 分两种情况，1）如果依赖为空，则每次都会执行，性能有损耗 2）依赖为数组，且漏掉了部分的依赖，会导致该依赖发生变化的时候useEffect内部的逻辑不执行 2. 不需要，因为我们希望的仅仅是在id变化的时候触发更新
作者回复: 1. 不指定依赖的话，就每次执行。不只是性能问题，有可能会产生 bug，比如不停的产生副作用发请求给后端。第二点对的，漏掉的话会导致依赖变化时副作用不执行。 2. 不需要的原因在于 React 知道 setBlogContent 确定是不会变的。这是 useState 的机制决定的，React 和 ESLint 插件都知道，所以写不写都是一样的，可以忽略。
2021-05-29
2
7
闲闲
老师我有个疑问，我们项目里面用到hook，但是有个问题，一般情况下，state会很多，不可能一两个，所以会把sate组合成对象，但是有时候对象发生了改变，例如{aa:1}-->{aa:2},useEffect 监听函数没有进，需要手动的将两次对象Obeject.assgin一下才能触发监听，不知道老师有没有遇到过？
作者回复: setState 时内部是通过引用比较两次值是否发生了变化，所以一定要用 immutable 的方式，也就是每次创建新对象来修改值，比如 setState({...oldState, aa: 2})。
2021-05-31
2
4
Hottou
王老师，对于第二个问题，因为无论调用多少次setBlogContent函数，它的指向地址是不变的，所以即使把它作为依赖项，那么它永远也不会发生改变，是这样子吗？
作者回复: useState 能够保证 setBlogContent 每次都是同一个函数，所以无需作为依赖项。
2021-08-03

2
Dark I
函数体也是每次render都会执行那么需要每次都会render执行的语句是放在无依赖的useEffect中还是直接放在函数体中比较好呢
作者回复: useEffect 是副作用，一定要记住语义，副作用的逻辑才需要用在 useEffect 中。而且 useEffect 是在 render 后执行。函数体是和当前 render 结果相关的逻辑。
2021-06-02

2
陈威严
将函数定义在 useEffect 的 callback 中，每次执行 useEffect 时都会重新创建函数，这样对性能会有影响吗？
作者回复: 没有，JS 此类函数的垃圾收集效率是非常高的，可以忽略。
2021-06-01

2
Geek_6b7a3b
老师，第二个问题为什么说setBlogContent是一个局部变量，这个难道不是全局的吗？
作者回复: 在函数内部的变量都是局部变量。只是这个变量每次被赋予的值来自的 hook 保证它的值每次都不变。
2021-08-23

1
雅丽丽
state 中永远不要保存可以通过计算得到的值。这是为什么呢？
作者回复: 因为这样就需要维护源state 和目标 state 的一致性，会带来各种复杂度，后面课程有介绍
2021-06-02

1

收起评论