react-hooks学习
注意： 仅在顶层调用函数， 不能在循环语句，条件语句，嵌套语句中， 仅在函数组件和hooks函数中调用 1. useState: 返回的一个变量，因为js 是单线程的当useState被调用时，
就是当前组件的useState, 当一个组件有多个useState的时候，返回是根据传入的顺序来返回的 2. useEffect: 是 (cmoponentDidMount和componentDidUpdate和 componentWillUnmout)的集合，
在渲染后执行，useEffect(回调函数,数组) 1. 第二个参数不传，所有更新都会执行
2. 传递[],仅在挂载和卸载的时候执行
3. [name，...arg]，在name,或其它参数更新时执行 4. 第一个参数有返回函数的时候在组件销毁的时候执行
const getName= () => { return { name: 'list', }; }; useEffect(() => { // 无限循环了 }, [getName()]); 由于 getName函数返回的对象每次执行都是一个全新的引用，
所以会导致触发渲染->effect->渲染->effect 的无限更新。
和useEffect对应的是useDeepCompareEffect 区别在于后者采用深比较策略，
对于对象依赖来说，它逐个对比 key 和 value，在性能上会有所牺牲。
3. useContext:
1.导入并调用createContext方法，得到Context对象 import { createContext } from 'react' export const Context = createContext() 2.使用 Provider 组件包裹根组件，并通过 value 属性提供要共享的数据 return ( <Context.Provider value={ 传递的数据 }> <根组件的内容,这里面都可以获取到context传递的值/> </Provider> ) 3.在任意后代组件中，获取公共数据 import React, { useContext } from 'react' import { Context } from './某个文件' const 函数组件 = () => { const 公共数据 = useContext(Context) return ( 函数组件的内容 ) }
4. useRef
1. 返回一个ref对象，该对象只有一个current属性，初始值为传入的参数（initValue）
2. 当更新current的值，并不会render,这是与useState不同点
3. 返回的ref对象在整个组件生命周期内保持不变
4. useRef 类似于组件的this
使用场景： 1. 获取组件的实例 2 需要保存上一次的共享数据
5. useCallBack 和 useMemo useMemo和useCallback都会在组件第一次渲染的时候执行，
之后会在其依赖的变量发生改变时再次执行；并且这两个hooks都返回缓存的值，
useMemo返回缓存的变量，useCallback返回缓存的函数。
1. useCallBack父组件将一个方法传递给子组件，若父组件其它状态发生变化，
子组件会跟着渲染多次，会造成不必要的渲染，
useCallback 是将父组件传递给子组件的方法缓存起来，
当useCallBack第二个参数状态发生变化时，
子组件才会重新渲染 使用场景是：有一个父组件，其中包含子组件，
子组件接收一个函数作为props；通常而言，如果父组件更新了，
子组件也会执行更新；但是大多数场景下，更新是没有必要的，我们可以借助useCallback来返回函数，
然后把这个函数作为props传递给子组件；这样，子组件就能避免不必要的更新。
6. React.memo是一个高阶组件(就是接收一个组件返回一个组件)，作用在于缓存组件，它会根据传入的组件加上缓存生成一个新的组件，然后返回这个组件
在props没有发生变化的情况，会使用最近的一次缓存结果，返回出来，判断是否使用缓存是使用的是浅比较，只会比较第一层的key，有时候，props传入的
是一个数组，组件每次渲染都会生成一个指向新内存空间的地址，导致新旧prop指向不同的内存地址，虽然数组元素是一样的但是remo浅比较会认为不同
导致重新渲染，这种情况可以考虑使用深层比较，例如：lodash.isEqual
// 比较方法 const isEqual(oldVal, newVal) { } const memotest = React.memo('组件'，isEqual)
