每个人都说它使用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'));
&#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;
无状态组件:
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;
答案 0 :(得分:3)
然而,我注意到,使用无状态组件是错误的 地方可以真正降低应用程序的性能。
事实上。对于复杂组件,您应该避免使用无状态组件。
每个人都说它使用无状态组件会有所改善 应用程序性能
你错过了一个重要的部分...... 在未来。
我想问一下是否有某种方法可以实现类似的功能 pureRender for stateless component?
不,还没有。
如果这是不可能的,那么它的性能如何呢? 无国籍组件?
实施shouldComponentUpdate
的组件效果会更好。
请参阅React团队备份的here我的陈述。那里有两个重要的引用
对于复杂组件,定义shouldComponentUpdate(例如pure 渲染)一般会超过无国籍的性能优势 组件。
目前没有对功能进行特殊优化, 虽然我们可能会在未来添加这样的优化。但现在, 他们的表现与班级完全相同。