在前端开发中，我们经常会遇到一些需要频繁触发的事件，例如页面滚动、输入框输入等。如果每次事件触发都直接执行相关操作，会导致页面性能下降，甚至出现卡顿现象。为了解决这个问题，我们可以使用防抖和节流技术来优化页面性能。
防抖
防抖是指在一段时间内，只有最后一次触发事件才会执行相关操作。例如，用户在输入框中输入文字时，我们希望只有用户输入完成后，才会触发相关操作，而不是每输入一个字就执行一次操作。
在 React 中，我们可以使用 useCallback 和 useEffect 来实现防抖功能。首先，我们需要定义一个防抖函数：
-- -------------------- ---- -------
-------- -------------- ------ -
--- ----- - -----
------ ----------------- -
-- ------- -
--------------------
-
----- - ------------- -- -
---------------- ------
-- -------
--
-该函数接受两个参数：需要防抖的函数和延迟时间。返回一个新的函数，该函数会在延迟时间内只执行最后一次被调用的函数。
接下来，在组件中使用 useCallback 和 useEffect 来调用防抖函数：
-- -------------------- ---- -------
------ ------ - --------- ------------ --------- - ---- --------
-------- ----- -
----- ------------ -------------- - -------------
----- ----------------- - ------------
---------------- -- -
-------------------
-- -----
--
--
------------ -- -
------------------------------
-- ------------ --------------------
------ -
-----
------
-----------
------------------
------------- -- ------------------------------
--
------
--
-
------ ------- ----在上述代码中，我们使用 useCallback 来定义一个防抖函数 handleInputChange，并使用 useEffect 来监听 inputValue 的变化，当 inputValue 发生变化时，调用 handleInputChange 函数。
节流
节流是指在一段时间内，只有第一次触发事件才会执行相关操作，之后的事件将被忽略。例如，我们希望在页面滚动时，每隔一段时间才触发一次滚动事件，而不是每次都触发滚动事件。
在 React 中，我们可以使用 useCallback 和 useEffect 来实现节流功能。同样，我们需要先定义一个节流函数：
-- -------------------- ---- -------
-------- -------------- ------ -
--- ----- - -----
--- -------- - --
------ ----------------- -
----- ----------- - --- -----------------
-- ------------ - -------- - ------ -
-- ------- -
--------------------
-
----- - ------------- -- -
-------- - ------------
---------------- ------
-- ----- - ------------ - -----------
- ---- -
-------- - ------------
---------------- ------
-
--
-该函数接受两个参数：需要节流的函数和延迟时间。返回一个新的函数，该函数会在延迟时间内只执行第一次被调用的函数。
接下来，在组件中使用 useCallback 和 useEffect 来调用节流函数：
-- -------------------- ---- -------
------ ------ - --------- ------------ --------- - ---- --------
-------- ----- -
----- ----------- ------------- - ------------
----- ------------ - ------------
----------- -- -
-----------------------------
-- -----
--
--
------------ -- -
--------------------------------- --------------
------ -- -- -
------------------------------------ --------------
--
-- ----------------
------ -
-----
------------- ---------------
---- -------- ------- -------- ---------
------
--
-
------ ------- ----在上述代码中，我们使用 useCallback 来定义一个节流函数 handleScroll，并使用 useEffect 来监听页面滚动事件。当页面滚动时，调用 handleScroll 函数来更新 scrollTop 的值。
总结
防抖和节流是优化页面性能的常用技术，可以避免频繁触发事件导致页面卡顿现象。在 React 中，我们可以使用 useCallback 和 useEffect 来实现防抖和节流功能。在实际开发中，需要根据具体情况选择合适的防抖和节流时间，以达到最佳性能优化效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6512897c95b1f8cacdb05b14