React hooks 检查什么状态变化导致重新渲染

Question

现在有了钩子，我已经将组件的状态分成了更微型的状态。这看起来更好，直到我想找出是什么状态变化导致了特定的重新渲染。

如何轻松找出导致特定重新渲染的状态变化？

Answer 1

如果需要跟踪状态更新以进行状态管理（例如访问先前的状态值），则应使用包装的自定义挂钩显式处理useState。

至于调试，React 开发工具目前不提供此功能，尽管此信息可以通过开发工具中使用的渲染器未记录的 API 获得。

可以在 ReactdispatchAction函数中添加断点并向上遍历调用堆栈以了解调用了哪个状态设置器：

或者可以使用自定义挂钩来代替useState跟踪状态更新：

const useDebuggableState = initialState => {
  const [state, setState] = useState(initialState);

  useMemo(() => {
    'a line to add breakpoint';
  }, [state]);

  return [state, setState];
};