Question

如何避免重新渲染具有儿童道具的组件。 React.memo似乎只能用于常规道具

const FormGroup = ({
  children
}) => {
  return (
    <div>
      {children}
    </div>
  )
}

export default React.memo(FormGroup)

Answer 1

React.memo有第二个参数，可让您控制如何比较哪些道具。

function FormGroup(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
  */
  return true;
}
export default React.memo(FormGroup, areEqual);

来自docs的注释：

此方法仅作为性能优化存在。不要依靠它来“阻止”渲染，因为这可能会导致错误。

Answer 2

如果通过子道具，

React.memo和React.PureComponent都无法默认优化。这是因为在每次重新渲染父对象时，都会创建一个新的Children实例实例，因此该引用会丢失。

这在this github issue

中有详细解释

正如Dan Abramov在github链接中的评论之一中提到的那样

您可以选择为React.Component实现自定义shouldComponentUpdate或为React.memo实现areEqual。但是，这样做通常可能会带来开销，并且不一定比渲染器本身更有益

渲染也便宜又快速，并且可以为简单的组件进行重新渲染

避免重新渲染包含儿童道具的组件

2 个答案: