React重学笔记

最新推荐文章于 2024-08-14 17:29:03 发布

sasaraku.

最新推荐文章于 2024-08-14 17:29:03 发布

阅读量673

点赞数 10

分类专栏： react&vue 文章标签： react.js 笔记 javascript

本文链接：https://blog.csdn.net/SaRAku/article/details/140480093

版权

react&vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

生命周期

类组件

React v16 引入的 Fiber 协调引擎，比起老版本来说，为了提高协调效率，减少页面交互卡顿，React 的 Fiber引擎把协调从同步过程改进成了异步过程。

渲染阶段是异步过程，主要负责更新虚拟 DOM（ FiberNode ）树，而不会操作真实DOM，这一过程可能会被 React
暂停和恢复，甚至并发处理，因此要求渲染阶段的生命周期方法必须是没有任何副作用（Side-effect）的纯函数（Pure
Function）；
提交阶段是同步过程，根据渲染阶段的比对结果修改真实 DOM，这一阶段的生命周期方法可以包含副作用。
react中往往提交阶段很快，渲染阶段比较慢。

函数组件

1. 挂载阶段。

React 会执行组件函数，在函数执行过程中遇到的 useState 、 useMemo 等 Hooks 依次挂载到 FiberNode 上，useEffect 其实也会被挂载，但它包含的副作用（Side-effect，在 Fiber 引擎中称为 Effect）会保留到提交阶段。
组件函数的返回值通常会使用 JSX 语法，React 在渲染阶段根据返回值创建 FiberNode 树。在提交阶段，React 更新真实 DOM 之前会依次执行前面定义的 Effect。

2. 更新阶段。

当组件接收到新 props 或者调用 useState 返回的 setter 或者 useReducer 返回的 dispatch 修改了状态，组件会进入更新阶段。
组件函数本身会被再次执行，Hooks 会依次与 FiberNode 上已经挂载的 Hooks 一一匹配，并根据需要更新。组件函数的返回值用来更新 FiberNode 树。
进入提交阶段，React 会更新真实 DOM。随后 React 会先执行上一轮 Effect 的清除函数，然后再次执行 Effect。这里的 Effect 包括 useEffect 与useLayoutEffect ，两者特性很相像。其中useLayoutEffect 的 Effect 是在更新真实 DOM 之后同步执行的，与类组件的 componentDidMount、componentDidUpdate 更相似一些；而 useEffect 的 Effect 是异步执行的，一般晚于 useLayoutEffect 。

3. 卸载阶段。

主要是执行 Effect 的清除函数。函数组件也有错误处理阶段，但没有对应的生命周期 Hooks，错误处理依赖于父组件或祖先组件提供的错误边界。

Hooks

官方文档

我的建议是，首先精通三个基础 Hooks，也就是 useState 、 useEffect 和 useContext。然后在此基础上：掌握
useRef 的一般用法；

当需要优化性能，减少不必要的渲染时，学习掌握 useMemo 和 useCallback ；4
当需要在大中型React 项目中处理复杂 state 时，学习掌握 useReducer ；
当需要封装组件，对外提供命令式接口时，学习掌握 useRef加 useImperativeHandle；
当页面上用户操作直接相关的紧急更新（UrgentUpdates，如输入文字、点击、拖拽等），受到异步渲染拖累而产生卡顿，需要优化时，学习掌握 useDeferredValue 和useTransition 。

在使用 Hooks 时务必注意。