useEffect
useEffect可以帮助我们在DOM更新完成后执行某些副作用操作，如数据获取，设置订阅以及手动更改 React 组件中的 DOM 等
有了useEffect，我们可以在函数组件中实现 像类组件中的生命周期那样某个阶段做某件事情,具有:
componentDidMount
componentDidUpdate
componentWillUnmount
基本用法
useEffect(() => { console.log('这是一个不含依赖数组的useEffect，每次render都会执行！') })
useEffect 规则
没有传第二个参数时，在每次 render 之后都会执行 useEffect中的内容
useEffect接受第二个参数来控制跳过执行，下次 render 后如果指定的值没有变化就不会执行
useEffect 是在 render 之后浏览器已经渲染结束才执行(什么时候会重新渲染呢？在组件初始化的时候，还有就是在和组件绑定的数据发生变化的时候会重新渲染)
useEffect 的第二个参数是可选的，类型是一个数组(数组中的值变化会出发副作用，相当于vue的watch)
根据第二个参数的不同情况，useEffect具有不同作用(不传参数就相当于componentDidMount，只会在初始化的时候执行一次)
useCallback 和 useMemo
都是属于组件性能优化的手段，用来缓存一些复杂的计算结果(useMemo返回值，不经常改变的)和 缓存一些父组件传给子组件的内容，避免父组件每次更新都要重新渲染子组件。
useMemo返回的的是一个值，用于避免在每次渲染时都进行高开销的计算。例：
// 仅当num改变时才重新计算结果
const result = useMemo(() => {
for (let i = 0; i < 100000; i++) {
(num * Math.pow(2, 15)) / 9;
}
}, [num]);
useCallback 和 useMemo 的区别是useCallback返回一个函数，当把它返回的这个函数作为子组件使用时，可以避免每次父组件更新时都重新渲染这个子组件，
const App = ({val}) => {
const [count, setCount] = useState(0)
const onClick = useCallback(() => {
// ...
}, [])
const data = useMemo(() => val, [val])
return (
<>
<button onClick={() => setCount(count+1)}>点我</button>
<OtherComp onClick={onClick} data={data} />
</>
)
}
提示：当我们不知道是否该使用useCallback 和 useMemo 的时候最好不用使用，因为它在初始化渲染的时候，需要保留上次的值，和最新的值对比...首次的开销是比较大的。不然react在设计的时候直接把它包裹在组件中了。useEffect虽然可能会渲染很多次但是在vDom还是很快的。