如果状态不变，无状态组件会重新渲染吗？

  • Z时代
  • 2024-01-10
  • 分类：问答

我从React中学到的一件事是，如果组件的属性不变，那么React不会重新渲染组件。无状态组件也是如此吗？还是它们的行为更像“愚蠢的”函数，并且每次都会执行？

例如，如果我有：

import StatelessComponent from '../StatelessComponent';
export default class DocumentsTable extends React.Component {
  state = {
    something: 'foobar',
  };
  render() {
    return (
      <div>
        { this.state.something }
        <StatelessComponent theOnlyProp='baz'>
      </div>
    )
  }
};

当this.state.something更新其价值，并<StatelessComponent>获取重新渲染？还是像其他React组件一样足够“聪明”地看到其道具没有改变？

回答：

回答：

从React 16.6开始，您可以将React.memo用于功能组件以防止重新渲染，类似于PureComponent用于类组件：

const MyComponent = React.memo((props) => {
  return (
    /* markup */
  );
});

另外，备忘会进行内部优化。

与userland memo（）高阶组件实现不同，React内置的实现可以通过避免额外的组件层来提高效率。块引用

回答：

如果setState()组件本身或它的父组件之一被调用

，因为功能性无状态组件不带有shouldComponentUpdate。实际上，除非实现，否则每个React组件都将被重新渲染1shouldComponentUpdate。

需要注意的重要一点是， render()

。该render方法仅用于diff算法来确定需要真正附加/分离的DOM节点。

render() 。仅在render()返回不同的虚拟树时才执行它们。

从React的文档中

需要明确的是，在这种情况下，重新渲染意味着为所有组件调用render，但这并不意味着React会卸载并重新安装它们。它将仅按照前几节中所述的规则应用差异。

只是不用担心，render()除非您的组件很大，否则请调用它，然后最好使用有状态Component实现shouldComponentUpdate()。

看看这里的一个有趣的讨论。

1表示render()调用了组件的功能，而不是底层的DOM节点正在被操纵。

以上是 如果状态不变，无状态组件会重新渲染吗？ 的全部内容， 来源链接： utcz.com/qa/411988.html

回到顶部