目前在任务中，少量的项目都是运用react来停止展开的，了解掌握下react的功用优化对项目的体验和可维护性都有很大的益处，下面引见下在react中可以运用的一些功用优化方式；
功用优化思绪关于类式组件和函数式组件来看，都可以从以下几个方面去思索如何可以停止功用优化
增减轻新render的次数
增加渲染的节点
降低渲染计算量
合理设计组件
增减轻新render的次数在react里时间耗时最多的一个中央是reconciliation（reconciliation 的最终目的是以最有效的方式，依据新的形状来更新 UI，我们可以复杂地了解为 diff），假设不执行render，也就不需求reconciliation，所以可以看出增加render在功用优化进程中的重要水平了。
PureComponentReact.PureComponent 与 React.Component 很相似。两者的区别在于 React.Component 并未完成 shouldComponentUpdate()，而 React.PureComponent 中以浅层比照 prop 和 state 的方式来完成了该函数。
需求留意的是在运用PureComponent的组件中，在props或许state的属性值是对象的状况下，并不能阻止不必要的渲染，是由于自动加载的shouldComponentUpdate外面做的只是浅比较，所以想要用PureComponent的特性，应该遵守准绳：
确保数据类型是值类型
假设是援用类型，不应当有深层次的数据变化(解构)
ShouldComponentUpdate可以应用此事情来决议何时需求重新渲染组件。假设组件 props 更改或调用 setState，则此函数前往一个 Boolean 值，为true则会重新渲染组件，反之则不会重新渲染组件。
在这两种状况下组件都会重新渲染。我们可以在这个生命周期事情中放置一个自定义逻辑，以决议能否调用组件的 render 函数。
下面举一个小的例子来辅佐了解下：
比如要在你的运用中展现先生的详细材料，每个先生都包含有多个属性，如姓名、年龄、快乐喜欢、身高、体重、家庭住址、父母姓名等；在这个组件场景中，只需求展现先生的姓名、年龄、住址，其他的信息不需求在这里展现，所以在理想状况下，除去姓名、年龄、住址以外的信息变化组件是不需求重新渲染的；
示例代码如下：
import React from "react";
export default class ShouldComponentUpdateUsage extends React.Component {
constructor(props) {
super(props);
this.state = {
name: "小明",
age: 12,
address: "xxxxxx",
height: 165,
weight: 40
}
}
componentDidMount() {
setTimeout(() => {
this.setState({
height: 168,
weight: 45
});
}, 5000)
}
shouldComponentUpdate(nextProps, nextState) {
if(nextState.name !== this.state.name || nextState.age !== this.state.age || nextState.address !== this.state.address) {
return true;
}
return false;
}
render() {
const { name, age, address } = this.state;
return (
<div>
<p>Student name: {name} </p>
<p>Student age:{age} </p>
<p>Student address:{address} </p>
</div>
)
}
}
(责任编辑：admin)