React Stateless组件 - 性能和PureRender

时间:2016-12-16 13:41:45

标签: javascript performance reactjs ecmascript-6 stateless

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

这是因为无状态组件,即使属性未更改,也始终呈现。

对于stateful个组件,我们可以使用PureComponentPureRenderMixin或实施自己的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'));
&#13;
button{
  display: block;
  margin-bottom: 2px;
}
button.active{
  background-color: red;
}
&#13;
<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>
&#13;
&#13;
&#13;

无状态组件:

&#13;
&#13;
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'));
&#13;
button{
  display: block;
  margin-bottom: 2px;
}
button.active{
  background-color: red;
}
&#13;
<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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:3)

  然而,我注意到,使用无状态组件是错误的   地方可以真正降低应用程序的性能。

事实上。对于复杂组件,您应该避免使用无状态组件。

  

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

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

  

我想问一下是否有某种方法可以实现类似的功能   pureRender for stateless component?

不,还没有。

  

如果这是不可能的,那么它的性能如何呢?   无国籍组件?

实施shouldComponentUpdate的组件效果会更好。

请参阅React团队备份的here我的陈述。那里有两个重要的引用

  

对于复杂组件,定义shouldComponentUpdate(例如pure   渲染)一般会超过无国籍的性能优势   组件。

Dan Abramov

  

目前没有对功能进行特殊优化,   虽然我们可能会在未来添加这样的优化。但现在,   他们的表现与班级完全相同。