📝 一个 React Hook，让开发调试更加便捷

如今 React 生态圈已经逐渐接受 hook 生态，一个组件里包括数十个 hooks ，例如原生 hooks （ useState/useRef/useEffect…）、数据请求（ useSWR/useFetch/useQuery…）、状态管理（ Jotai/Recoil/Zustand/Vailto…）、UI 管理（ React Spring/…）已经变成新常态。

在 class component 时代，render 的触发源只有 state 和 prop ，对于开发者来说更显而易见。不论是优化性能，还是调试状态，都轻松很多。

但当 function component 趋于复杂时，每一个 hook 都是潜在的 render 触发源，（而且它们可以相互挂钩，产生不可预测的影响 (;´༎ຶД༎ຶ) ！）。我越来越觉得难以调试：为什么这个组件重渲染了？什么东西变了？

基于这个动机，我做了一个辅助调试的 hook：useTilg。

import useTilg from 'tilg'

function MyButton() {
  useTilg()
  return <button>Click me</button>
}

基础效果是显示组件名字、生命周期。也有更复杂的功能，显示 props 、每次渲染中变化的量、调试信息：

import { useState } from 'react'
import useTilg from 'tilg'

function Counter() {
  const [count, setCount] = useState(0)
  
  useTilg()`count = ${count}`
  
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

还有其他功能和 demo ，详见项目地址： https://github.com/shuding/tilg