useWhyDidYouUpdate详解

目录

API

Params

demo演示

源码 

---

useWhyDidYouUpdate是ahooks库中的一个hook函数，用于帮助开发者排查是哪个属性改变导致了组件的 rerender。

API

type IProps = Record<string, any>;useWhyDidYouUpdate(componentName: string, props: IProps): void;

Params

参数	说明	类型	默认值
componentName	必填，观测组件的名称(ps:只是一个代号，自己能分别清楚即可)	string	-
props	必填，需要观测的数据（当前组件 state 或者传入的 props 等可能导致 rerender 的数据）	object	-

demo演示

import { useState } from 'react'
import { useWhyDidYouUpdate } from 'ahooks';function Counter(props) {useWhyDidYouUpdate('Counter', props);return <><div><span>{props.title}:</span><span>{props.count}</span></div></>
}function App() {const [count, setCount] = useState(0)return (<><button onClick={() => setCount(count + 1)}>+1</button><Counter title={'计数显示'} count={count}  /></>)
}export default App

源码 

type IProps = Record<string, unknown>;
/*** 什么导致了页面render自定义hooks** @param componentName  观测组件的名称* @param props         需要观测的数据（当前组件 state 或者传入的 props 等可能导致 rerender 的数据）*/
const useWhyDidYouUpdate = (componentName: any, props: any) => {// 创建一个ref对象let oldPropsRef = useRef<IProps>({});useEffect(() => {if (oldPropsRef.current) {// 遍历新旧props的所有keylet keys = Object.keys({ ...oldPropsRef.current, ...props });// 改变信息对象let changeMessageObj: IProps = {};keys.forEach((key) => {// 对比新旧props是否改变，改变及记录到changeMessageObjif (!Object.is(oldPropsRef.current[key], props[key])) {changeMessageObj[key] = {from: oldPropsRef?.current[key],to: props[key],};}});// 是否存在改变信息，存在及打印if (Object.keys(changeMessageObj).length) {console.log(componentName, changeMessageObj);}// 更新refoldPropsRef.current = props;}});
};