React HooksuseReducer 逃避deps组件渲染次数增加陷阱.docxVIP

第

React?HooksuseReducer?逃避deps组件渲染次数增加陷阱

目录前言自定义Hooks简单实现在组件中使用自定义Hooks提前阻止dispatch触发优化后再测试结论题外

前言

在快乐使用ReactHooks开发自定义Hooks过程中，使用了useEffect，useReducer，useRef，useCallback等官方提供的Hooks，将一些通用逻辑抽离出来，提高代码复用性。

但在组合使用useEffect，useReducer，React.memo时，发生了组件在状态未发生变化时触发渲染，因为此动作发生在mousemove鼠标移动时，所以组件不必要渲染次数非常多。

自定义Hooks简单实现

import{useReducer}fromreact;

constreducer=(state,action)={

const{sliding,lastPos,ratio}=state;

switch(action.type){

casestart:

return{

...state,

slideRange:action.slideRange,

lastPos:action.x,

sliding:true,

casemove:

if(!sliding){

returnstate;

constoffsetX=action.x-lastPos;

constnewRatio=ratio+offsetX/state.slideRange;

if(newRatio1||newRatio0){

returnstate;

return{

...state,

lastPos:action.x,

ratio:newRatio,

caseend:

if(!sliding){

returnstate;

return{

...state,

sliding:false,

caseupdateRatio:

return{

...state,

ratio:action.ratio,

default:

returnstate;

exportfunctionuseSlider(initialState){

const[state,dispatch]=useReducer(reducer,initialState);

return[state,dispatch];

在组件中使用自定义Hooks

const[state,dispatch]=useSlider(initialState);

const{ratio,sliding,lastPos,slideRange}=state;

useEffect(()={

constonSliding=(e)={

dispatch({type:move,x:e.pageX});

constonSlideEnd=()={

dispatch({type:end});

document.addEventListener(mousemove,onSliding);

document.addEventListener(mouseup,onSlideEnd);

return()={

document.removeEventListener(mousemove,onSliding);

document.removeEventListener(mouseup,onSlideEnd);

},[dispatch]);

consthandleThumbMouseDown=useCallback(

(event)={

consthotArea=hotAreaRef.current;

dispatch({

type:start,

x:event.pageX,

slideRange:hotArea.clientWidth,

if(event.target.className!==point){

dispatch({

type:updateRatio,

ratio:(event.p