Question

具有一个相当简单的功能组件，如果提供相同的道具，我想阻止它重新呈现。以下在网上找到的，似乎并没有解决问题。知道我应该怎么做吗？

在我的情况下，

props由一系列对象组成。其中一些也是嵌套对象。这可能是个线索吗？

export const DataTable = React.memo(renderedTable)

export default function renderedTable(props) {
    console.log(props) // logs exactly the same props twice
    ...
}

Answer 1

我知道您可以阻止重新渲染

1-您可以使用React的Memo Hook

2-您可以从shouldComponentUpdate返回false

3-而不是从“扩展组件”扩展到“扩展PureComponent”

注意：React的PureComponent对组件的属性和状态进行了浅浅的比较。如果什么都没有改变，它将阻止组件的重新呈现。如果发生更改，它将重新提供组件。

浅表比较：https://reactjs.org/docs/shallow-compare.html

您能告诉我们一个密码框或其他内容吗？

Answer 2

在功能组件内部，您可以执行useEffect()，并将提供的依赖项数组作为props。您还可以从此React doc中深入了解。

Answer 3

在我的情况下，
props由一系列对象组成。其中一些也是嵌套对象

React.memo仅进行浅比较。

因此，您需要提供自己的比较逻辑作为第二个参数。

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);

Answer 4

React.memo默认情况下应用浅层相等性比较-意味着相等性检查按原样对原始值执行，但对复合数据结构的引用（读取：内存地址）执行，而不是对复合数据结构的实际内容执行数据结构。这就是为什么强烈建议使用扁平道具设计的原因。

在某些情况下，嵌套结构可能只是唯一可用的可行设计。在这种情况下，您可以决定选择哪些道具来比较如何进行比较，或将某些比较推迟到某些子组件上，这些子组件依靠对某些道具的更改来更新自身等。

如果您需要根据实际的prop值或其他标准来渲染组件，则可以将自己的areEqual参数实现提供给React.memo函数。然后，React.memo函数将使用nextProps和previousProps参数调用该函数。 areEqual参数的一个示例是lodash.isEqual函数，该函数可用于对这两个参数或其仅几个子集进行深度相等性检查。

在可能的情况下，优先选择扁平道具而不是嵌套道具。

const Name = React.memo(({ first = '', last = '' }) => (
    <>
        <span>{last}</span>, <span>{first}</span>
    </>
));
    
const Intro = ({age, occupation, desc = {} }) = (
    <div className="intro">
        <p>Hi!</p>
        <p>
            I am <Name { ...desc } />, the { occupation } ordinaire around here.<br />
            And I am { age } old.
        </p>
        <p>Bye!</p>
    </div>
);
    
// changes to all prop values are confirmed at the parent
const IntroMemo = React.memo( Intro, _.isEqual );
    
// changes to top level values and nested reference are confirmed at the parent
// confirmation for changes in nested prop values are deferred to the component using the nested prop.
const IntroMemoDeferred = React.memo( Intro );

用相同的道具反应备忘录的重新呈现吗？

4 个答案: