转战react的第一篇文章
对于react的类组件
类组件中，只要调用setState就会触发render
主要是利用shouldComponentUpdate生命周期钩子、PureComponent纯组件，来减少组件或子组件的render次数，实现渲染次数优化；另外一个是React.lazy结合Suspense实现组件懒加载，可用在路由上，实现渲染速度的优化
// 🌰基于react-router的路由懒加载
// 🌟注意包裹Suspense组件
// 官方表示会在react-router的后面版本加入Suspense属性
import React, { lazy, Suspense } from 'react';
import { hashHistory, Redirect, Route, Router} from 'react-router';
const Count = lazy(() => import('./pages/count'));
const Grade = lazy(() => import('./pages/grade'));
export default (
<Router history={hashHistory}>
<Suspense fallback={<div>Loading...</div>}>
<Route path="/count" component={Count} />
<Route path="/grade" component={Grade} />
<Redirect from="*" to="/count" />
</Suspense>
</Router>
);
对于函数式组件
函数式组件只有当状态值有更新时，才会render
没有生命周期，也不能继承PureComponent这种基类
优化方案1：
使用React v16.6版本中的React.memo()高阶组件，控制函数组件的重新渲染的，原理是对比props的更新，类似于class组件中的PureComponent，不过props也是浅比较，对于数组、对象等类型的props就一定会触发重渲染。memo提供第二个参数用于自定义对比函数，且为接受一个两次props作为参数的函数。
// 🌰拿一个官方的例子
function MyComponent(props) {
/* render using props */
}
function areEqual(prevProps, nextProps) {
/*
return true if passing nextProps to render would return
the same result as passing prevProps to render,
otherwise return false
*/
}
export default React.memo(MyComponent, areEqual);
// 🌟需要注意的是areEqual返回true才是禁止子组件更新，这一点是跟shouldComponentUpdate恰巧相反的
优化方案2:
当父组件传递的props为函数时，子组件就一定会重渲染，那么memo也就不好使了。另一方面，函数组件的每次 render 都会重新执行函数，意味着会重新执行内部的变量、函数等的创建。我们应该尽量减少不必要变量、函数的创建、减少复杂计算操作，结合react v16.8 Hooks进一步优化。关于hooks，建议先看👉官文👈
-
useCallback的使用，把函数及其依赖项作为参数传入
useCallback，它将返回该回调函数的 记忆版本，只有在依赖项有变化的时候才会更新，减少不必要的回调函数创建。
import React, { memo, useState, useCallback } from "react";
const Child = memo(props => {
console.log("child");
return <div>child</div>;
});
export default function App() {
const [count, setCount] = useState(0);
const addHandlerWithHooks = useCallback(() => {
console.log("addHandlerWithHooks");
}, []);
const addHandler = () => {
console.log("addHandler");
};
return (
<>
{count}
<button onClick={() => setCount(count + 1)}>button</button>
<Child countConst="1" hander={addHandlerWithHooks} />
</>
);
}
// 往Child传递addHandler时，setCount时App重渲染，即使Child的props没有更新
// 但是却创建新的addHandler，导致Child组件的不必要渲染
// 往Child传递addHandlerWithHooks时，setCount重渲染不会生成新的addHandlerWithHooks，避免Child组件的不必要渲染
-
useMemo的使用：跟useCallback作用类似，只不过是对计算结果缓存，可以避免不必要的重复计算，这一点跟 Vue 里面的计算属性
computed有异曲同工的作用
// useMemo 的使用场景主要是用来缓存计算量比较大的函数结果
const config = [...];
const dateWithConfig = useMemo(() => {
return config.map(...);
// 一通操作
}, [config]);
但是当使用useMemo、useCallback时依赖一个经常变动的值，就没有什么优化的意义了；不过像依赖input、select这种元素的值的，可以通过React.createRef()依赖元素的ref，减少依赖的变更。
⚠️另外：
1.子组件如果是一个数组或者迭代器的话，必须绑定唯一的 key 属性，用于标识当前项的唯一性，也是用于做 Virtual DOM diff的。key 相同的情况下，React只会渲染第一个相同 Key 的项，也可以提高性能。
2.合理的拆分组件其实也是可以做性能优化的
