React涉及到哪些对性能的优化
-
shouldComponentUpdate和React.PureComponent避免不必要的组件更新，适用于class组件。 -
ImmutableJS
可以在 shouldComponentUpdate() 中使用使用 deepCopy 和 deepCompare 来避免无必要的 render()，但 deepCopy 和 deepCompare 一般都是非常耗性能的。
Immutable Data 就是一旦创建，就不能再被更改的数据。对 Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对象。
Immutable 实现的原理是 Persistent Data Structure （持久化数据结构），也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变。同时为了避免 deepCopy 把所有节点都复制一遍带来的性能损耗，Immutable 使用了 Structural Sharing （结构共享），即如果对象树中一个节点发生变化，只修改这个节点和受它影响的父节点，其它节点则进行共享。
React.memo()是一个高阶函数，它可以接收2个参数，第一个参数为纯函数的组件，第二个参数用于对比props控制是否刷新，与shouldComponentUpdate()功能类似。
import React from "react";
function Child({seconds}){
console.log('I am rendering');
return (
<div>I am update every {seconds} seconds</div>
)
};
function areEqual(prevProps, nextProps) {
if(prevProps.seconds===nextProps.seconds){
return true
}else {
return false
}
}
export default React.memo(Child,areEqual)
-
React.Suspense和React.lazy实现代码拆分和按需加载。 -
无状态组件
无状态组件是属于一个函数
没有继承功能;
也没有生命周期,
他的动态数据都是通过父组件传值子组件通过props接收渲染,
针对一些简单的逻辑判断等等,选 用无状态组件
-
高阶组件
-
render里面尽量减少新建变量和bind函数，传递参数是尽量减少传递参数的数量。
-
列表项注意加key值
