如何判断useEffect钩子是被哪个state状态变量触发执行的

方案1：拆分独立useEffect（官方推荐） #

这是最符合React设计理念的实现方式，将不同依赖对应的逻辑拆到独立的useEffect中，天然不需要额外判断触发源：

// count变化时触发对应逻辑
React.useEffect(()=>{
  // 仅和count相关的逻辑
},[count])

// somethingelse变化时触发对应逻辑
React.useEffect(()=>{
  // 仅和somethingelse相关的逻辑
},[somethingelse])

这种方式耦合度低，逻辑拆分清晰，也是React官方文档推荐的最佳实践。

方案2：单useEffect内通过Ref比对判断 #

如果业务逻辑确实需要把多个依赖的触发逻辑写在同一个useEffect中，可以通过useRef存储上一次的依赖值，每次执行时比对新旧值即可确定触发源：

// 存储上一次的依赖值
const prevCountRef = React.useRef(count);
const prevSomethingRef = React.useRef(somethingelse);

React.useEffect(()=>{
  // 比对判断哪个值发生了变化
  if(prevCountRef.current !== count){
    console.log('本次由count变化触发');
    // 执行对应逻辑
    prevCountRef.current = count;
  }
  if(prevSomethingRef.current !== somethingelse){
    console.log('本次由somethingelse变化触发');
    // 执行对应逻辑
    prevSomethingRef.current = somethingelse;
  }
},[count, somethingelse])

注意：组件首次渲染时该useEffect也会执行，如果需要跳过首次触发，可以额外新增一个标记ref判断是否为首次渲染。

内容的提问来源于stack exchange，提问作者Abd