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

【问题标题】：React hooks check what state change caused re-renderReact hooks 检查什么状态变化导致重新渲染
【发布时间】：2019-08-07 07:18:30
【问题描述】：

现在有了钩子，我将组件的状态拆分为更多的微型状态。这似乎更好，直到我想找出是什么状态变化导致了特定的重新渲染。

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

【问题讨论】：

您是否参考componentWillUpdate（或componentDidUpdate）样式检查您当前和未来（或以前）的状态？
你想要完成什么？可能还有其他方法。
@Tholle 有那么一刻我以为我在和 Eckhart Tolle 聊天，然后变得如此该死：D 无论如何，我想我无法更好地解释它，我想知道状态变化是什么引起的特定的重新渲染。例如。你有 setVar1、setVar2、setVar3，都是从 useState 派生的，我想知道其中哪一个导致了重新渲染
你想知道这个是为了什么目的？调试？状态管理？
@estus 目前用于调试，但可能还有其他用例

标签： reactjs state react-hooks rerender

【解决方案1】：

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

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

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

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

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

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

  return [state, setState];
};

【讨论】：