React——基于类的组件优化

在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>
		)
	}
}