反应无状态组件-性能和PureRender [英] React Stateless components - performance and PureRender

问题描述

每个人都说它使用stateless组件将提高应用程序性能.但是，我注意到在错误的位置使用无状态组件确实会降低应用程序性能.

Everyone says that it uses stateless components will improve application performance. I noticed, however, that the use of stateless component in the wrong place can really reduce application performance.

之所以会这样，是因为即使属性不变，无状态组件也会始终呈现.

This happens because the stateless components, render always, even if the properties have not changed.

对于stateful组件，我们可以使用PureComponent，PureRenderMixin或实现自己的shouldComponentUpdate-与无状态组件相比，它注意到应用程序性能有了大幅提高.

In the case of stateful components we can use PureComponent, PureRenderMixin or implement own shouldComponentUpdate - thanks it noticed a big Increase in application performance when compared to stateless components.

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

I wanted to ask if there is some way to implementation something like pureRender for stateless component?. I'm not interested in wrapping stateless component in stateful components.

如果这不可能，那么stateless组件中的性能到底如何呢?

If this is not possible, so how is it really with performance in stateless components?

我准备了两个简单的示例，显示了我写的内容.尝试更改活动按钮:

I prepared two simple examples, showing that what I wrote. Try change active button:

有状态的PureComponent:

stateful 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>

推荐答案

但是，我注意到在错误的情况下使用无状态组件 这个地方确实会降低应用程序的性能.

I noticed, however, that the use of stateless component in the wrong place can really reduce application performance.

的确.对于复杂的组件，应避免使用无状态组件.

Indeed. For complex components, you should avoid stateless components.

每个人都说它使用无状态组件将改善 应用程序性能

Everyone says that it uses stateless components will improve application performance

您错过了一个重要的部分... 将来.

you miss one important part... in Future.

我想问一下是否有某种方法可以实现 pureRender用于无状态组件?

I wanted to ask if there is some way to implementation something like pureRender for stateless component?

不，还没有.

如果这不可能，那么在性能方面如何实现呢? 无状态组件?

If this is not possible, so how is it really with performance in stateless components?

实现shouldComponentUpdate的组件将表现更好.

Components that implement shouldComponentUpdate will perform better.

请参见此处我的声明由React团队支持.那里有两个重要的报价

See here my statements backed up by the React team. Two important quotes from there

对于复杂的组件，定义shouldComponentUpdate(例如pure 渲染)通常会超过无状态的性能优势 组件.

For complex components, defining shouldComponentUpdate (eg. pure render) will generally exceed the performance benefits of stateless components.

丹·阿布拉莫夫:

目前，尚无针对功能的特殊优化， 尽管我们将来可能会添加此类优化.但现在， 它们的表现与类完全相同.

There are currently no special optimizations done for functions, although we might add such optimizations in the future. But for now, they perform exactly as classes.

这篇关于反应无状态组件-性能和PureRender的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！