React使用效果的更高级比较

Question

我正在寻找一种方法来执行更高级的比较，而不是useffectReact钩子的第二个参数。

具体而言，我正在寻找更像这样的东西：

useEffect(
  () => doSomething(), 
  [myInstance],
  (prev, curr) => { /* compare prev[0].value with curr[0].value */ }
);

关于这一点，我从React文档中错过了什么吗？或者有什么方法可以在已经存在的基础上实现这样的钩子吗？

如果有实现这一点的方法，这就是它的工作原理：第二个参数是一个依赖关系数组，就像来自React的use效应钩子一样，第三个参数是一个带有两个参数的回调：依赖关系数组上一个渲染，以及当前渲染的依赖关系数组。

Answer 1

在中，基于类的组件很容易执行深度比较componentDidUpdate提供以前的道具和以前的状态的快照

componentDidUpdate(prevProps, prevState, snapshot){
    if(prevProps.foo !== props.foo){ /* ... */ }
} 

问题是useffect与componentdiddupdate不完全一样。考虑以下事项

useEffect(() =>{
    /* action() */
},[props])

调用action（）时，您可以断言当前props的唯一一点是它已更改（浅层比较断言为false）。您不能拥有prevProps的快照，因为hooks与常规函数类似，没有生命周期的一部分（也没有实例）可以确保同步性（和注入参数）。实际上，确保价值完整性的唯一因素是执行顺序。

替代use上一页

更新之前，请检查这些值是否相等

   const Component = props =>{
       const [foo, setFoo] = useState('bar')

       const updateFoo = val => foo === val ? null : setFoo(val)
   }

当您需要确保效果只运行一次时，这在某些情况下非常有用（在您的用例中不有用）。

usemo：如果要执行比较以防止不必要的render调用（shoudComponentUpdate），那么usemo就是一种方法

export React.useMemo(Component, (prev, next) => true)

但是当您需要访问已经运行的效果中的前值时，就没有其他选择了。因为如果你已经在use效应中，这意味着依赖关系已经更新（当前渲染）。

为什么usePrevious有效useRef不仅仅适用于refs，它是一种非常简单的方法，可以在不触发重新渲染的情况下对值进行变异。因此，循环如下

• 组件安装

请注意，usePre以往总是在use效应之后调用（请记住，顺序很重要！）。因此，每次你在一个use效应中，useRef的当前值总是落后一个渲染。

const usePrevious = value =>{
    const ref = useRef()
    useEffect(() => ref.current = value,[value])
}

const Component = props =>{
    const { A } = props
    useEffect(() =>{
        console.log('runs first')
    },[A])

    //updates after the effect to store the current value (which will be the previous on next render
    const previous = usePrevious(props)
}

Answer 2

你可以用React。备忘录功能：

const areEqual = (prevProps, nextProps) => {
  return (prevProps.title === nextProps.title)
};

export default React.memo(Component, areEqual);

或者使用自定义挂钩：

如何在效果上比较旧值和新值？