使用带有功能组件的 React.memo() 时如何知道道具是否发生了变化答案

【问题标题】：How to know if props have changed when using React.memo() with a functional Component使用带有功能组件的 React.memo() 时如何知道道具是否发生了变化
【发布时间】：2021-07-04 05:01:59
【问题描述】：

我需要用反应钩子为过时的 shouldComponentUpdate 反应生命周期方法做一个等价物。

我有一个 Functional Components，因为它在 this article 中被调用，它使用 React.memo() 来完成。

如果只返回 props 作为唯一参数，我只是不明白如何防止组件重新渲染。

在其他 React.memo() 示例 (as in here) 中，除了 props 之外，还有一个 nextProps 返回，它是与 props 进行比较来决定是否让组件重新渲染很有用。

即使我添加了要由组件返回的第二个参数，我也总是得到一个空的纯 js 对象。

例如 功能组件 它们不是总是无状态的，所以它们不会保留任何组件的变量值，即使是那些用 React.useState() 实例化的值？那么我们应该如何知道 props 是否发生了变化呢？！

这是组件：

import React, { useEffect, useRef, useState, memo } from "react";

const TinyEditor = (props, nextProps) => {
   return 'some jsx'
};

const MemoizedTinyEditor = memo(
  TinyEditor,
  (props, nextProps) => {
    // if(props.prop1 === nextProps.prop1) {
    //   // return true if you don't need re-render
    // }
    console.log("TinyEditor :: MEMO!!!!!!!!!!");
    return true;
  }
);
export default MemoizedTinyEditor;

【问题讨论】：

功能组件不再只是无状态的，它们都可以包含使用反应钩子实现的状态和生命周期。作为 prop React.memo，它是一种围绕您的组件的 HOC，因此它确实知道您传递了哪些 props，并且它的第二个参数是一个传递这些 props 的函数。但是，如果状态发生变化，您无法决定是否重新渲染。
我也希望状态值在我使用钩子时会被保留，但我想知道这怎么可能，因为在每次渲染中都会读取带有 useState() 的语句（例如 const [textPageId, setTextPageId ] = useState();"。顺便说一句，我尝试更新内部组件状态以及其父组件的状态，但在任何一种情况下都没有与（无 nextProps）进行比较的备忘录。而且我还获得了所有内部状态变量 prev 值当它是父状态更新时丢失
react 在内部维护了一个钩子列表以及与它们关联的状态。它还维护你的组件是第一次渲染还是后续重新渲染，根据它决定是使用参数值来 useState 还是返回它以前的值。状态更新也以相同的方式工作

标签： reactjs react-hooks

【解决方案1】：

您是否尝试过 react 文档中提到的内容？

默认情况下，它只会对 props 中的复杂对象进行浅层比较目的。如果您想控制比较，您还可以提供自定义比较函数作为第二个参数。

function MyComponent(props) {
  /* render using props */
}
function areEqual(prevProps, nextProps) {
  /*
  return true if passing nextProps to render would return
  the same result as passing prevProps to render,
  otherwise return false
  */
}
export default React.memo(MyComponent, areEqual);

React.memo

如果您尝试过此操作.. 您应该将尝试的代码添加到您的问题中，以供其他人查看并找出问题所在。仅供参考，这只适用于道具..如果组件的状态发生变化..它将始终重新渲染

【讨论】：

是的，我想我做到了，但是在 React.memo() 中传递的第二个函数参数从未触发过。我会再试一次看看
它不会像我说的那样触发