React 无状态组件 - 性能和 PureRender答案

【问题标题】：React Stateless components - performance and PureRenderReact 无状态组件 - 性能和 PureRender
【发布时间】：2017-05-02 07:55:43
【问题描述】：

每个人都说它使用stateless 组件会提高应用程序的性能。然而，我注意到在错误的地方使用无状态组件确实会降低应用程序性能。

这是因为无状态组件总是渲染，即使属性没有改变。

对于stateful 组件，我们可以使用PureComponent、PureRenderMixin 或实现自己的shouldComponentUpdate - 感谢它发现与无状态组件相比，应用程序性能大幅提升。

我想问是否有某种方法可以为无状态组件实现类似pureRender 的东西？我对将无状态组件包装在有状态组件中不感兴趣。

如果这是不可能的，那么stateless 组件中的性能究竟如何？

我准备了两个简单的例子，展示了我写的东西。尝试更改活动按钮：

有状态的 PureComponent：

class List extends React.Component{
  constructor(props) {
    super(props);
    this.generateElements = this.generateElements.bind(this);
    this.changeActive = this.changeActive.bind(this);
    this.state = {
    	active: 0
    }
  }
	generateElements(){
  	let elements = [];
    for(let i = 0; i<=1000; i++){
    	elements.push(<Element key={i} 
      											 index={i}
                             active={this.state.active === i} 
                             changeActive={this.changeActive} /> )
    }
    return elements;
  }
  changeActive(index){
  	this.setState({
    	active: index
    });
  }
  render() {
    return (
    	<div>
        <div className="classButtons">
          {this.generateElements()}
        </div>
      </div>
    )
  }
}

class Element extends React.PureComponent{
  render() {
  console.log('render');
    return(
      <button onClick={this.props.changeActive.bind(null, this.props.index)}
      		    className={this.props.active ? 'active' : null} >
      	Element {this.props.index}
      </button>
    )

  }
}

ReactDOM.render(<List />, document.getElementById('container'));

button{
  display: block;
  margin-bottom: 2px;
}
button.active{
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script>

<div id="container"></div>

无状态组件：

class List extends React.Component{
  constructor(props) {
    super(props);
    this.generateElements = this.generateElements.bind(this);
    this.changeActive = this.changeActive.bind(this);
    this.state = {
    	active: 0
    }
  }
	generateElements(){
  	let elements = [];
    for(let i = 0; i<=1000; i++){
    	elements.push(<Element key={i} 
      											 index={i}
                             active={this.state.active === i} 
                             changeActive={this.changeActive} /> )
    }
    return elements;
  }
  changeActive(index){
  	this.setState({
    	active: index
    });
  }
  render() {
    return (
    	<div>
        <div className="classButtons">
          {this.generateElements()}
        </div>
      </div>
    )
  }
}

const Element = ({changeActive, index, active}) => {
	console.log('render');
  return(
    <button onClick={changeActive.bind(null, index)}
            className={active ? 'active' : null} >
            Element {index}
    </button>
  )
}

ReactDOM.render(<List />, document.getElementById('container'));

button{
  display: block;
  margin-bottom: 2px;
}
button.active{
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script>

<div id="container"></div>

【问题讨论】：

过度使用 code markup 和 boldface 会使您的帖子不那么清晰，而不是更清晰。
你说得对，谢谢，我更正了帖子

标签： javascript performance reactjs ecmascript-6 stateless

【解决方案1】：

然而，我注意到无状态组件的使用是错误的地方确实会降低应用程序的性能。

确实如此。对于复杂的组件，您应该避免使用无状态组件。

大家都说用无状态组件会提高应用性能

你错过了一个重要的部分......未来。

我想问是否有某种方法可以实现类似 pureRender 用于无状态组件？

不，还没有。

如果这是不可能的，那么它的性能如何？无状态组件？

实现shouldComponentUpdate 的组件性能会更好。

请参阅 here 我由 React 团队支持的声明。来自那里的两个重要引述

对于复杂的组件，定义 shouldComponentUpdate (eg. pure render) 通常会超过 stateless 的性能优势组件。

Dan Abramov:

目前没有对函数进行特殊优化，尽管我们将来可能会添加此类优化。但现在，他们的表现完全一样。

【讨论】：