react 如何让方法在初始化时只执行一次
0
[待解决问题]
const isInitialRender = useRef(true) useEffect(() => { fetchData(); if (isInitialRender.current) { isInitialRender.current = false; return; } fetchEventLogData(); }, [line]); // 依赖 line，切换时触发 useEffect(() => { fetchEventLogData(); }, [selectedTimeRange]);
如代码fetchEventLogData函数，同时依赖 selectedTimeRange 和 line，在页面初始化时其中只要执行一次即可，后续两个任一个有变化，则执行这个函数，我现在是定义一个 isInitialRender 变量用来判断，如果是页面刚加载时，放弃其中一个执行.
请问是否有更合理的做法，不依赖第三方变量的作法。下面方法是另一种方案，但是不太行，因为 line 和 selectedTimeRange 变化时，里面的逻辑并不完全 一致，要调用的方法除了 fetchEventLogData 外，还需要 处理各自的逻辑。
useEffect(() => { if (isInitialRender.current) { // 初始加载时只执行一次 fetchData() fetchData(); isInitialRender.current = false; } else { // 后续根据依赖项变化执行 fetchEventLogData() fetchEventLogData(); } }, [line, selectedTimeRange]);
所有回答(1)
0
可以试试 function-once https://github.com/fabiospampinato/function-once
npm install function-once
import once from 'function-once';
const rand = once (() => Math.random ());
rand (); // => 0.3344627371267874
rand (); // => 0.3344627371267874
