reactjs - 使用函数来渲染内容会影响 React 性能吗？

Question

这篇文章(和其他地方)提到现在在渲染内部调用函数:

https://levelup.gitconnected.com/optimize-react-performance-c1a491ed9c36?ref=reddit

我一直对大型 React 类组件使用一种模式，我会将一些 JSX 从渲染函数中移到方法中。这避免了十亿个小的一次性单独组件，也避免了不得不在渲染区域内放置冗长的 if/then 或三元逻辑，我觉得这有点难以阅读。

class HelpModal extends React.Component {
  state = { visible: false };

  renderContent = () => {
    if (this) {
      return <div />
    } 
    if (that) {
      return <span />
    }
  }
  render() {

    return (
      <Modal visible={this.state.visible}>
         {this.renderContent()}
      </Modal>
    );

  }
}

我已经在很多地方看到过这种策略，但现在听起来，根据上面的博客文章，这在性能方面可能是一种不好的做法？

Answer 1

这取决于您如何使用内联函数。

React 在 props 和/或 state 更改后调用渲染函数。每次更改时都会调用渲染函数。

如果你计算的东西由于新的 props/state 值而没有改变，那么这个内联函数确实会对你的应用程序的性能产生负面影响。

例子:

render() {
    <div>
        { this.props.items.map(() => <SomeComponent />) }
    </div>
}

如果您在这里或其他任何地方计算它并不会改变每次调用渲染函数时都需要计算它的事实。完全没有负面影响。

computeStaticStuff(x, y) {
    return x + y > 0 ? <p /> : <i />;
}

render() {
    <div>
        { () => this.computeStaticStuff(5, 6) }
    </div>
}

这将是一个((n)非常愚蠢的)重新计算的例子，根本不需要。