一、首屏渲染：Webpack的 new HtmlWebpackPlugin 配置loading模版javascript
二、简单的子组件，尽可能使用函数方式，不须要继承Component实例化，就没有生命周期函数了，减小内存占用。java
减小render次数：
三、子组件使用PureComponent（针对class组件），或者React.memo（针对函数式组件），减小子组件进行不必的从新渲染。
⚠️hooks只能在函数式组件中使用，React的16.8版本才能使用react
//⚠️React.memo(子组件，比较函数)，比较函数，是比较当前props与nextProps，不须要从新渲染返回true，不然返回false。
//React.memo的用法
function MyComponent(props) {
/* 使用 props 渲染 */
}
function areEqual(prevProps, nextProps) {
/*
若是把 nextProps 传入 render 方法的返回结果与
将 prevProps 传入 render 方法的返回结果一致则返回 true，
不然返回 false
*/
}
export default React.memo(MyComponent, areEqual); //不穿第二个比较函数，则会默认浅比较
复杂组件，本身在showComponentUpdate中写浅比较showComponentUpdate(nextProps, nextState)webpack
shouldComponentUpdate(nextProps, nextState) {
for (let key in nextProps) {
if (nextProps[key] !== this.props[key]) {
return true;
}
}
for (let key in nextState) {
if (nextState[key] !== this.state[key]) {
return true;
}
}
return false;
}
useCallBack减小函数的重复声明web
//只有依赖项a或者b变化，才会从新返回一个新的函数，不然，useCallback返回缓存的函数
const callback = () => {
doSomething(a, b);
}
const memoizedCallback = useCallback(callback, [a, b])
减小重复计算，重复渲染等：
四、useMemo减小函数的重复执行，假设是一个纯函数，每次输入相同的参数，结果都是同样的，那么就不必重复执行。只有参数变化，才须要重复执行。缓存
//useMemo的用法，useMemo返回缓存的变量
const callback = () => {
doSomething(a, b);
}
const memoizedCallback = useCallback(callback, [a, b])
五、定时器、Dom监听等在组件销毁前注销函数
六、减小在render内部定义函数，在事件绑定处定义函数，或者bind绑定this（由于会执行bind，会返回函数），不然每次render都会从新定义函数，消耗内存。this
未完待续....code