1. 使用 PureComponent 或者 shouldComponentUpdate
PureComponent没有状态,他们只是渲染组件基于数据通过道具。如果改变props 改变它只被重新呈现。shouldComponentUpdate生命周期方法用于常规的组件,通过返回false取消重新呈现某些场景
- 以下两个场景
class MyComponent extends PureComponent {
//
}
class MyComponent extends Component {
//
shouldComponentUpdate(nextProps, nextState) {
if(this.props.firstProp === nextProps. firstProp &&
this.props.secondProp === nextProps.secondProp) {
return false;
}
return true
}
//
}
上面的两个例子可以帮助节省一些浪费的呈现。第一个例子已经实施shouldComponentUpdate逻辑。第二个例子可以有更多的控制。可以在组件维护状态和停止重新呈现如果状态没有改变
- 比如 控制是否显示加载中
class MyComponent extends Component {
shouldComponentUpdate(nextProps, nextState) {
if(this.state.isLoading === nextState. isLoading) {
return false;
}
return true
}
}
2. 在List 中使用 key attribute
列表是任何应用程序中最常用的东西。如果你不为每个列表项,当任何一项从列表中添加或删除时，会重新render每一项。拥有一个唯一键在每个列表项,只重新呈现一遍。
class MyComponent extends PureComponent {
render() {
return this.props.data.map((item, i) => {
return <Text key={item.id}>{item.title}</Text>
});
}
}
3.早点绑定方法 不要在render里面创建方法
- Do This
class MyComponent extends PureComponent {
constructor(props) {
super(props);
//do this
this.doWork = this.doWork.bind(this);
}
doWork() {
// doing some work here.
// this.props.dispatch....
}
render() {
return <Text onPress={this.doWork}>Do Some Work</Text>
}
}
- Don't This
<Text onPress={ () => this.doWork() }>Do Some Work</Text>
- 或者
<Text onPress={ this.doWork.bind(this) }>Do Some Work</Text>
因为render经常被渲染,每次渲染一次,创建一个新的函数。所以提前绑定函数。只创建一次。如果想向doWork函数传递参数,可以使用以下方式
doWork = (param) => {
console.log(param)
}
<Text onPress={this.doWork(someVarParam)}Do Some Work With Args</Text>
4.Don’t update state or dispatch actions in componentWillUpdate
componentWillUpdate生命周期方法用于准备更新,不会触发另一个。如果你想设置状态或派遣任何回来的行动,他们在ReactV16.3版本后被componentWillReceiveProps代替。
5.使用性能监视器看FPS
开启开发工具性能监视器。当你开始互动,导航或滚动你的应用程序,可能会看到有时FPS变化很大,主要是其在JS线程,而不是本地UI线程上。
所以开始寻找痛点,你可能设置状态或派遣回来的行动在错误的地方。或做太多的JS线程同步工作，进而优化性能。
