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

小编典典

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

reactjs

我从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组件一样足够“聪明”地看到其道具没有改变？

阅读 492

2020-07-22

共1个答案

小编典典

更新25.10.2018

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

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

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

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

老答案

是的， 如果setState()组件本身或它的父组件之一被调用 ，它们总是会重新渲染 1
（除非您如上所述使用React.memo）
，因为功能性无状态组件不带有shouldComponentUpdate。实际上，除非实现，否则每个React组件都将被重新渲染1shouldComponentUpdate。

需要注意的重要一点是，调用 render() 并不意味着以任何方式操纵DOM节点
。该render方法仅用于diff算法来确定需要真正附加/分离的DOM节点。
请注意，这 render() 并不昂贵，而是DOM操作很昂贵 。仅在render()返回不同的虚拟树时才执行它们。

从React的文档中

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

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

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

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

2020-07-22