在react中,当父组件的state
更新时,即使子组件的props
没有更新,子组件也会触发render
函数,这样就造成了性能的浪费。
- 解决办法:
在子组件中使用shouldComponentUpdate
生命周期函数来判断是否要触发render
函数。
shouldComponentUpdate
接收两个参数,一个是nextProps
,代表更新前的props
;一个是nextState
,代表更新前的state
。shouldComponentUpdate
返回一个boolean
值,为false
时,不执行render
函数;为true
时,执行render
函数。
所以我们可以根据nextProps
参数对比当前组件内的props
,如果发生变化,就返回true
,否则便返回false
。
- 示例代码如下:
import React, { Component } from "react";
interface IProps {
content: string;
}
interface IState {}
export default class ExampleChild extends Component<IProps, IState> {
/**
* 组件优化
* @param nextProps 更新前的props
* @param nextState 更新前的state
*/
shouldComponentUpdate(nextProps: IProps, nextState: IState): boolean {
if (nextProps.content !== this.props.content) {
return true;
}
return false;
}
constructor(props: IProps) {
super(props);
this.state = {};
this.deleteItem = this.deleteItem.bind(this);
}
public render(){
let {content} = this.props;
return(
<div>{content}</div>
)
}
}