如果 props 没有改变，无状态组件会重新渲染吗? [英] Will a stateless component re-render if its props have not changed?

问题描述

我在 React 中学到的一件事是，如果组件的 props 没有改变，那么 React 不会费心重新渲染组件.对于无状态组件也是如此吗?还是它们的行为更像是愚蠢"的函数，每次都被执行?

例如，如果我有:

import StatelessComponent from '../StatelessComponent';导出默认类 DocumentsTable 扩展 React.Component {状态 = {东西:'foobar'，};使成为() {返回 (<div>{ this.state.something }<StatelessComponent theOnlyProp='baz'>

)}};

当 this.state.something 更新其值时，是否会重新渲染 ?或者它是否聪明"到可以看到它的 props 没有改变，就像其他 React 组件一样?

解决方案

UPDATE 25.10.2018

自 React 16.6 起，您可以将 React.memo 用于功能组件以防止重新渲染，类似于 PureComponent 用于类组件:

const MyComponent = React.memo((props) => {返回 (/* 标记 */);});

此外，备忘录还进行内部优化.

<块引用>

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

<小时>

旧答案

是的，如果 setState() 被调用，它们总是重新渲染 ¹(除非你使用 React.memo 如上所述)组件本身或其父组件之一，因为功能性无状态组件不带有 shouldComponentUpdate.事实上，每个 React 组件都会被重新渲染¹，除非它们实现了 shouldComponentUpdate.

<小时>

需要注意的是，调用 render() 并不意味着 DOM 节点以任何方式被操纵.render 方法只是服务于 diff 算法 来决定哪些 DOM 节点需要真正地依附/分离.请注意 render() 并不昂贵，昂贵的是DOM操作.仅当 render() 返回不同的虚拟树时才会执行它们.

来自 React 的文档

<块引用>

需要明确的是，在这个上下文中重新渲染意味着为所有组件调用渲染，这并不意味着 React 会卸载并重新安装它们.它只会按照前面部分所述的规则应用差异.

别担心，除非你的组件很大，否则让 render() 被调用，那么你最好使用实现 shouldComponentUpdate() 的有状态组件.

查看此处进行有趣的讨论.

¹ 表示调用的是组件的 render() 函数，而不是底层 DOM 节点正在被操作.

One thing I had learned about React is that if the props to a component don’t change, then React doesn’t bother re-rendering the component. Is that true for stateless components too? Or do they behave more like "stupid" functions and get executed every time?

For example, if I had:

import StatelessComponent from '../StatelessComponent';

export default class DocumentsTable extends React.Component {
  state = {
    something: 'foobar',
  };

  render() {
    return (
      <div>
        { this.state.something }
        <StatelessComponent theOnlyProp='baz'>
      </div>
    )
  }
};

When this.state.something updates its value, does <StatelessComponent> get re-rendered? Or is it "smart" enough to see that its props didn’t change, like other React components?

解决方案

UPDATE 25.10.2018

Since React 16.6, you can use React.memo for functional components to prevent re-render, similarly to PureComponent for class components:

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

Also, memo does internal optimization.

And unlike a userland memo() higher-order component implementation, the one built into React can be more efficient by avoiding an extra component layer. Blockquote

---

OLD ANSWER

Yes, they always re-render ¹ (unless you use React.memo as explained above) if setState() is called in the component itself or one of its parents, because functional stateless components don't carry a shouldComponentUpdate. In fact, each React component is being re-rendered¹ unless they implement shouldComponentUpdate.

---

Important to note is that calling render() doesn't mean that DOM Nodes are being manipulated in any way. The render method just serves the diff algorithm to decide which DOM Nodes need to really be attached / detached. Note that render() is not expensive, it's the DOM manipulations that are expensive. They are executed only if render() returns different virtual trees.

From React's documentation

Just to be clear, rerender in this context means calling render for all components, it doesn’t mean React will unmount and remount them. It will only apply the differences following the rules stated in the previous sections.

Just don't worry and let render() be called unless your component is huge, then you're better off with stateful Component that implements shouldComponentUpdate().

Look here for an interesting discussion.

¹ means that render() function of the component is called, not that the underlying DOM node is being manipulated.

这篇关于如果 props 没有改变，无状态组件会重新渲染吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！