小编pra*_*uda的帖子

我正在开发一个反应应用程序并希望提高性能。我使用 Profiler 来查看每个渲染上绘制的组件，还使用 ​​FlameGraph 来找出哪个组件花费了很长时间。

在火焰图中，它显示了有关何时以及为何渲染组件的详细信息，因为它具有“ Why did this render?”（为什么要渲染？）部分并显示一些挂钩已更改。但这并没有显示钩子名称，而是显示了钩子的编号/索引。钩子是如何编号的？以及如何借助这些数字/索引知道确切的钩子名称。

我有两个组件，它们位于层次结构中的不同位置。一个组件具有应在另一组件中使用的数据。我试图通过自定义钩子来实现这一点。当我在组件中使用时，我得到了 false，我希望它为 true，因为我从组件 1 将其设置为 true，因此组件 2 应该为 true。我不知道对自定义挂钩有点困惑。

定制挂钩

export const useShareData = () => {
  const [data, setData] = useState<boolean>(false)

  const setValue = (value: boolean) => {
    setData(value)
  }
  return [data, setValue]
}

组件1

const [data, setData] = useShareData()
const dataToBeShared = true
useEffect(()=>{
   setData(dataToBeShared)
},[dataToBeShared])

组件2

const [data] = useShareData()
console.log(data)

在组件 2 中，该值始终为 false。