大家都说用stateless
组件将提高应用程序性能。然而,我注意到在错误的地方使用无状态组件真的会reduce应用性能。
发生这种情况是因为无状态组件总是渲染,即使属性没有改变.
如果是stateful
我们可以使用的组件PureComponent
, PureRenderMixin
或实施自己的shouldComponentUpdate
- 谢谢它注意到了大增加与无状态组件相比,应用程序性能有所提高。
我想问是否有某种方法可以实现类似pureRender
对于无状态组件?我对将无状态组件包装在有状态组件中不感兴趣。
如果这是不可能的,那么到底是怎样的呢?表现 in 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>
然而,我注意到无状态组件的使用是错误的
确实会降低应用程序性能的地方。
的确。对于复杂的组件,您应该避免无状态组件。
大家都说使用无状态组件会提高
应用性能
你错过了一个重要的部分...在未来.
我想问是否有某种方法可以实现类似
pureRender 用于无状态组件?
还没有。
如果这是不可能的,那么它的性能究竟如何?
无状态组件?
实现的组件shouldComponentUpdate
会表现得更好。
See here https://github.com/facebook/react/issues/5677我的陈述得到了 React 团队的支持。其中有两段重要的引言
对于复杂的组件,定义shouldComponentUpdate(例如纯
render)通常会超过无状态的性能优势
成分。
丹·阿布拉莫夫 https://stackoverflow.com/users/458193/dan-abramov:
目前还没有对功能进行专门的优化,
尽管我们将来可能会添加此类优化。但现在,
他们的表现与课堂完全一样。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)