React Hooks - 我如何实现 shouldComponentUpdate？

Question

我知道你可以通过传递一个数组作为可选的第二个参数来告诉 React 跳过一个效果。

例如：

 useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // Only re-run the effect if count changes

但是如果我想控制比较呢？添加我自己的比较逻辑。

我希望像 React.memo 这样你可以将函数作为第二个参数传递。

原文由 Idan Dagan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在上面的评论中， Gabriele Petrioli 链接到 React.memo 文档，该文档解释了如何实现 shouldComponentUpdate。我在谷歌搜索 shouldComponentUpdate + useEffect + “react hooks” 的组合，结果出现了。因此，在使用链接文档解决了我的问题后，我想我也会将信息带到这里。

这是实现 shouldComponentUpdate 的旧方法：

 class MyComponent extends React.Component{
  shouldComponentUpdate(nextProps){
    return nextProps.value !== this.props.value;
  }
  render(){
    return (
     <div>{"My Component " + this.props.value}</div>
    );
 }
}

新的 React Hooks 方式：

 React.memo(function MyComponent (props) {

  return <div>{ "My Component " + props.value }</div>;

})

我知道您可能在您的问题中要求更多，但是对于来自 Google 并正在寻找如何使用 React Hooks 实现 shouldComponentUpdate 的任何人，您就可以了。

文档在这里： how-do-i-implement-shouldcomponentupdate

原文由 PAT-O-MATION 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

添加到 PAT-O-MATION 的答案中，

React.memo 还接受第二个参数，这是一个函数，可用于确定组件是否应该渲染。

如果函数返回 true 则组件不会在该 prop 更改时重新渲染，相反，当返回值为 false 时它会更新

function SomeComp({prop1, prop2}) {
    return(
        ..
    )

}
React.memo(SomeComp, (props, nextProps)=> {
    if(props.prop1 === nextProps.prop1) {
        // don't re-render/update
        return true
    }
})

注意：只有当回调函数返回 false 时组件才会重新渲染，所以在上面的例子中即使 prop2 值改变它也不会重新渲染

原文由 Avinash 发布，翻译遵循 CC BY-SA 4.0 许可协议