反应无状态组件-性能和PureRender

Question

所有人都说使用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> 

Answer 1

但是，我注意到在错误的位置使用无状态组件确实会降低应用程序性能。

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

所有人都说使用无状态组件将提高应用程序性能

您会错过一个重要的部分... 在Future中 。

我想问一下是否有某种方法可以为无状态组件实现类似pureRender的方法？

还没有。

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

实现shouldComponentUpdate组件将表现更好。

---

在这里查看我的声明，这是由React团队支持的。 从那里两个重要的报价

对于复杂的组件，定义shouldComponentUpdate（例如，纯渲染）通常会超过无状态组件的性能优势。

丹·阿布拉莫夫 （ Dan Abramov） ：

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