如何使 React 中的 useEffect、useLayoutEffect 只调用一次

Hook 是 React 16.8 的新增特性，旨在替代原来 React 中的 Class 组件。React 官方已经对使用 Class 组件采取了负面态度（见此处）。虽然目前官方仍然明确声明“没有计划从 React 中移除 class”（见此处），但待 Hook 成熟之后，Class 组件语法被废弃恐怕是迟早的事情。

useEffect、useLayoutEffect 可用于替代 Class 组件生命周期的方法。通常，它们都会反复执行。有时候，这会导致死循环。

使 useEffect、useLayoutEffect 只调用一次的方法是，向它们传入第二个空数组参数。如：

useEffect(() => init(), []);

【踩坑提醒】

不要使用如下途径来使 useEffect、useLayoutEffect 只调用一次。

let didInit = false;
useEffect(() => {if (!didInit) {didInit = true; // didInit 放在哪里都不会起作用init();didInit = true; // didInit 放在哪里都不会起作用}
});

有过多线程并发编程经验的人应该知道，上面的 didInit 将不起作用，且程序可能将在初始化时陷入死循环。虽然客户端 JavaScript 是单线程的，但由于 JavaScript 有异步语法，上述代码仍然会造成对 didInit 的异步并发访问，导致 didInit 不起作用。由于 useEffect 可以被反复触发，如果上述的函数 init() 进行了对 state 的异步更新，这将导致对 useEffect 的持续循环触发。

由于 JavaScript 不支持多线程锁，所以它无法使用 双重检查锁定。因此，在 React 中，不要自作聪明编写这种坏代码。

如果想知道更多关于从 Class 组件到 Hook 的重构方法，可见：https://react.docschina.org/docs/hooks-faq.html#from-classes-to-hooks

如何使 React 中的 useEffect、useLayoutEffect 只调用一次相关推荐

React中MUI初始化和方法调用
React中MUI初始化和方法调用 step1:引用 npm install @mui/material @emotion/react @emotion/styled step2:D:\vue\unt ...
react中使用AlipayJSBridge 支付宝支付调用接口在H5网页的应用
支付宝文档: https://opendocs.alipay.com/open/ 我用的是第二种,如下: AlipayJSBridge在支付宝里才能唤起主要流程:我们做的是支付宝连续包月自动续费,因 ...
react中样式冲突_如何通过React中的样式使您的应用漂亮
react中样式冲突 by Vinh Le 由Vinh Le 如何通过React中的样式使您的应用漂亮 (How to make your apps pretty with styling in Re ...
React中useEffect使用
之前我们已经掌握了useState的使用,在 class 中,我们通过在构造函数中设置 this.state 为 { count: 0 } 来初始化 count state 为 0: class Ex ...
react中副作用函数(useEffect)详解
先简单说一下常见的useEffect使用方式三种 useEffect(() => {// 副作用函数的内容 }) 每次更新之后都要执行 -------------------- useEffe ...
React中使用富文本编辑器Quill，支持粘贴图片
最近项目中需要用到富文本编辑器,并且客户明确提出需要实现可以直接截图粘贴到文本框中. 由于我们的前端是用react写的,于是就去参考了知乎的实现,发现知乎的富文本框是可以直接贴图进去的,但由于看不到源 ...
我们应该如何优雅的处理 React 中受控与非受控
受控 & 非受控今天来和大家简单聊聊 React 中的受控和非受控的概念. 提到受控和非受控相信对于使用过 React 的朋友已经老生常谈了,在开始正题之前惯例先和大家聊一些关于受控 &am ...
干货 | React 中的 Canvas 动画
作者简介掺水的酱油,携程软件技术专家,关注大前端及移动端相关技术. 移动端硬件性能越来越好的今天,页面的交互也越来越丰富,Web 体验在不断向原生应用靠拢,加入了越来越多的手势与动画.除了常见的 C ...
boost::unorder_map如何插入元素_「React」如何在React中优雅的实现动画
最简单的动画组件实现动画的本质,无非就是一个状态样式到另一个状态样式的过渡.最简单的动画组件,我们只需要指定两个状态的样式(进入的样式,离开的样式),以及一个开关(控制状态),即可完成. codep ...

如何使 React 中的 useEffect、useLayoutEffect 只调用一次

如何使 React 中的 useEffect、useLayoutEffect 只调用一次

如何使 React 中的 useEffect、useLayoutEffect 只调用一次相关推荐

最新文章

热门文章