这才是 React Hooks 性能优化的正确姿势

React Hooks 出来很长一段时间了，相信有不少的朋友已经深度使用了。无论是  React 本身，还是其生态中，都在摸索着进步。鉴于我使用的  React 的经验，给大家分享一下。对于  React hooks ，性能优化可以从以下几个方面着手考虑。

场景1

在使用了 React Hooks 后，很多人都会抱怨渲染的次数变多了。没错，官方就是这么推荐的：

function Box() { 
  const [position, setPosition] = useState({ left: 0, top: 0 }); 
  const [size, setSize] = useState({ width: 100, height: 100 }); 
  // ... 
} 

针对这种场景若出现十几或几十个 useState 的时候，可读性就会变差，这个时候就需要相关性的组件化了。以逻辑为导向，抽离在不同的文件中，借助  React.memo 来屏蔽其他  state 导致的  rerender 。

const Position = React.memo(({ position }: PositionProps) => { 
 
// position 相关逻辑 
 
return ( 
 
{position.left}
 
 
); 
 
}); 

因此在 React hooks 组件中尽量不要写流水线代码，保持在 200 行左右最佳，通过组件化降低耦合和复杂度，还能优化一定的性能。

场景2

class 对比  hooks ，上代码：

class Counter extends React.Component { 
 
state = { 
 
count: 0, 
 
}; 
 
increment = () => { 
 
this.setState((prev) => ({ 
 
count: prev.count + 1, 
 
})); 
 
}; 
 
render() { 
 
const { count } = this.state; 
 
return this.increment} />; 
 
} 
 
} 
 
function Counter() { 
 
const [count, setCount] = React.useState(0); 
 
function increment() { 
 
setCount((n) => n + 1); 
 
} 
 
return ; 
 
} 

凭直观感受，你是否会觉得 hooks 等同于  class 的写法？错， hooks 的写法已经埋了一个坑。在  count 状态更新的时候，  Counter 组件会重新执行，这个时候会重新创建一个新的函数  increment 。这样传递给  ChildComponent 的  onClick 每次都是一个新的函数，从而导致  ChildComponent 组件的  React.memo 失效。

解决办法：

function usePersistFnextends (...args: any[]) => any>(fn: T) { 
 
const ref = React.useRef(() => { 
 
throw new Error('Cannot call function while rendering.'); 
 
}); 
 
ref.current = fn; 
 
return React.useCallback(ref.current as T, [ref]); 
 
} 
 
// 建议使用 `usePersistFn` 
 
const increment = usePersistFn(() => { 
 
setCount((n) => n + 1); 
 
}); 
 
// 或者使用 useCallback 
 
const increment = React.useCallback(() => { 
 
setCount((n) => n + 1); 
 
}, []); 

上面声明了 usePersistFn 自定义  hook ，可以保证函数地址在本组件中永远不会变化。完美解决  useCallback 依赖值变化而重新生成新函数的问题，逻辑量大的组件强烈建议使用。

不仅仅是函数，比如每次 render 所创建的新对象，传递给子组件都会有此类问题。尽量不在组件的参数上传递因  render 而创建的对象，比如  style={{ width: 0 }} 此类的代码用  React.useMemo 或  React.memo 编写  equal 函数来优化。

style 若不需改变，可以提取到组件外面声明。尽管这样做写法感觉太繁琐，但是不依赖  React.memo 重新实现的情况下，是优化性能的有效手段。

const style: React.CSSProperties = { width: 100 }; 
 
function CustomComponent() { 
 
return ; 
 
} 

场景3

对于复杂的场景，使用 useWhyDidYouUpdate hook 来调试当前的可变变量引起的  rerender 。这个函数也可直接使用  ahooks 中的实现。

function useWhyDidYouUpdate(name, props) { 
 
const previousProps = useRef(); 
 
useEffect(() => { 
 
if (previousProps.current) { 
 
const allKeys = Object.keys({ ...previousProps.current, ...props }); 
 
const changesObj = {}; 
 
allKeys.forEach(key => { 
 
if (previousProps.current[key] !== props[key]) { 
 
changesObj[key] = { 
 
from: previousProps.current[key], 
 
to: props[key] 
 
}; 
 
} 
 
}); 
 
if (Object.keys(changesObj).length) { 
 
console.log('[why-did-you-update]', name, changesObj); 
 
} 
 
} 
 
previousProps.current = props; 
 
}); 
 
} 
 
const Counter = React.memo(props => { 
 
useWhyDidYouUpdate('Counter', props); 
 
return {props.count}