React hook 相关内容
一、useReducer 与 useState
useReducer 可以传给子组件个 dispatch 函数，子组件可以通过传递不同的 action，来达到不一样的处理（比如加 1 或 减 1），而用 useState 就要定义多个并且传递多个
二、为什么 useState 返回的是个数组，而不是对象
因为数组只是定义了个顺序，组件方要使用什么名字都可以 ; 对象则定义死了 key，并且无法在一个组件里填写多个，因为一个组件的 state 命名要唯一
三、副作用
只要不是将数据转成视图，像是 ajax 请求，为 dom 元素添加事件，设置定时器
四、为什么要使用 HOOK
类组件缺少逻辑复用机制
包裹类组件，增加了组件层级，增加了调试的难度以及运行效率
类组件经常会变得很复杂很难以维护
将一组相干的业务逻辑拆分到了多个生命周期函数中，比如创建与销毁写在不同的生命周期
在一个生命周期函数内存在多个不相干的业务逻辑，比如又是 ajax 请求，又要设置标题
类成员方法不能保证this 指向的正确性
五、useState 闭包
用于为函数组件引入状态
参数除了是任意数据类型外，也可以是个函数，用于初始值是动态值的情况
函数只会被调用一次，相当于只会在组件初次渲染时执行，而在组件更新时并不会执行， 用于初始值是由外部传入的场景
const [count,setCount] = useState(() => { return props.count || 0 })
如果在函数体里写成如下，那么组件更新时，count 的值又会被设置为初始值，更新失效
const countNum = props.count || 0
const [count,setCount] = useState(countNum)
设置状态值的方法可以是一个值也可以是个函数，是异步的
setCount(count => { return count + 1 })
六、useReducer
比起 useState，减少传递函数给子组件，通过参数的值来做不同的效果，而不像 useState 的 更改做的事情比较单一
不需要传递多个修改数据的方法，比如数值加1，或减1，而是直接将 dispatch(useReducer 的第二个参数)传给子组件，子组件传递不同的 action 来触发
七、useContext
在跨组件层级获取数据时简化获取数据的代码
相当于将 countContext.consumer 简化成 useContext(countContext)
八、useEffect
第二个参数，不传时任何数据发生改变都会触发回调函数，
传递数组时，表示指定数据发生变化时才会触发回调函数
useEffect(() => { document.title = count },[count])
useEffect 的参数函数不能是异步函数，因为 useEffect 要返回清理资源的函数，如果是异步函数就变成了返回 promise，可以改成自执行函数来解决
useEffect(() => { (async () => { await axios.get() })() })
九、useMemo
监测某个值的变化，根据变化值计算新值
会缓存计算结果 ，如果监测值没有发生变化，即使组件重新渲染，也不会重新计算。此行为可以有助于避免在每个渲染上进行昂贵的计算
const result = useMemo(() => { return count },[count])
十、memo
性能优化，如果本组件中的数据没有发生变化，阻止组件更新，类似于类组件中的 PureCompoent 与 shouldComponentUpdate,但 memo 默认只能监听 props 更改
function Counter() { return <div>11</div> } export default memo(Counter)
十一、useCallback
性能优化，缓存函数，使组件重新渲染时得到相同的函数实例
父子组件
const resetCount = useCallback(() => setCount(0),[setCount])
十二、useRef
获取 DOM 元素对象，对象会有个 current 属性指向 DOM 元素
const userName = useRef() return <div ref={userName}></div>
保存数据(跨组件周期)
即使组件重新渲染，保存的数据仍然还在，
保存的数据被更改不会触发组件重新渲染
用处：
在 useEffect 区别 didMount 还是 didUpdate 时，
成员列表下拉加载更多时，
用于存储 pageNo 定时器
十三、自定义 Hook
标准的封装和共享逻辑的方式 是个函数，
其名称是以 use 开头
其实就是逻辑和内置 Hook 的组合
共享逻辑：有共同的业务逻辑，比如两个组件都有获取文章的需求，那么就可以将获取文章抽成自定义 hook
十四、路由 Hook
useHistory useLocation useRouteMatch useParams（路由参数） // props 输出的对象，有以下属性 history location match
十五、手写 useState
let state = []; let setters = []; let stateIndex = 0; function createSetter (index) { return function (newState) { state[index] = newState; render (); } } function useState (initialState) { state[stateIndex] = state[stateIndex] ? state[stateIndex] : initialState; setters.push(createSetter(stateIndex)); let value = state[stateIndex]; let setter = setters[stateIndex]; stateIndex++; return [value, setter]; } function render () { stateIndex = 0; effectIndex = 0; ReactDOM.render(<App />, document.getElementById('root')); }
十六、useEffect
// 上一次的依赖值 let prevDepsAry = []; let effectIndex = 0; function useEffect(callback, depsAry) { // 判断callback是不是函数 if (Object.prototype.toString.call(callback) !== '[object Function]') throw new Error('useEffect函数的第一个参数必须是函数'); // 判断depsAry有没有被传递 if (typeof depsAry === 'undefined') { // 没有传递 callback(); } else { // 判断depsAry是不是数组 if (Object.prototype.toString.call(depsAry) !== '[object Array]') throw new Error('useEffect函数的第二个参数必须是数组'); // 获取上一次的状态值 let prevDeps = prevDepsAry[effectIndex]; // 将当前的依赖值和上一次的依赖值做对比 如果有变化 调用callback let hasChanged = prevDeps ? depsAry.every((dep, index) => dep === prevDeps[index]) === false : true; // 判断值是否有变化 if (hasChanged) { callback(); } // 同步依赖值 prevDepsAry[effectIndex] = depsAry; effectIndex++; } }
十七、useReducer
function useReducer (reducer, initialState) { const [state, setState] = useState(initialState); function dispatch (action) { const newState = reducer(state, action); setState(newState); } return [state, dispatch]; }
