React hook ---如何使useEffect 在渲染时不执行，只在数据变更时执行

发布网友发布时间：2023-04-13 06:02

共1个回答

热心网友时间：2023-10-09 02:20

在看这个之前，可以先去了解useEffect的原理和执行机制 https://zh-hans.reactjs.org/docs/hooks-effect.html

需求是：用户点击搜索按钮查询后，这个表格显示出来，表格的页数大小或者当前页发生改变时重新去请求数据，
但是这个不是mounted事件，而且触发事件，用户不点击不执行，所以使用useEffect时，要禁止在页面初次渲染时去执行

有试过把执行方法放到return中去执行，想利用useEffect的清除机制去执行获取函数方法

失败
原因是useEffect在每次执行的时候都会生成形成一个快照并保留下来（相当于Render），因此当状态变更而 Rerender 时，就形成了 N 个 Render 状态，而每个 Render 状态都拥有自己固定不变的 Props 与 State。
用清除机制去执行的话，总会去执行上一个快照保存的值（用户翻页到了第三页，但是获取的数据相当于用户翻页到了第二页的数据）

附上useEffect的清除机制，看注释就好，详情点击→( https://zh-hans.reactjs.org/docs/hooks-effect.html#explanation-why-effects-run-on-each-update )

由于没有找到好的方法，只能做个*

设置初始值isInit为true，当页面初次渲染时，isInit赋值为false，之后每次判断isInit的值就可以了

目前为止还算体面的解决方案吧，如果有更好的解决方法，告我一声，感激不尽