React Hooks 基础总结

class组件存在的问题

1、大型组件很难拆分和重构，很难测试（即class不易拆分）
2、相同业务逻辑，分散到各个方法中，逻辑混乱
3、复用逻辑变得复杂，如Mixins，HOC，render Prop
复制代码

React Hooks背景

React 组件更易用函数表达
1、React提倡函数式编程，view = fn(props)
2、函数更灵活，更易拆分，更易测试
3、但函数组件太多简单，需要增强能力
复制代码

State Hook

1、默认函数组件没有state
2、函数组件是一个纯函数，执行完即销毁，无法存储state
3、需要State Hook，即把state功能“钩”到纯函数中
复制代码

Effect Hook

1、默认函数组件没有生命周期
2、函数组件是一个纯函数，执行完即销毁，自己无法实现生命周期
3、使用Effect Hook，把生命周期“钩”到纯函数
复制代码

useEffect 让纯函数有了副作用默认情况下，执行纯函数，输入参数，返回结果，无副作用

所谓副作用，就是对函数之外造成影响，如设置全局定时任务而组件需要副作用，所以需要useEffect“钩”入纯函数中

注意：使用useEffect模拟WillUnMount ，但不完全相等，只有当[]依赖时

useEffect(() => {
    console.log(111)
    // props 发生变化，即更新，也会执行结束函数
    // 准确的说： 返回的函数会在下一次effect执行之前，被执行
    return () => {
    }
})
复制代码

useRef useContext

const domRef = useRef()

const themeContext = useContext(XXX)
复制代码

useReducer

import React, { useReducer } from 'react'
const initialState = { count: 0 }
const reducer = (state, action) => {
    switch (action.type) {
        case 'increment':
            return { count: state.count + 1 }
        case 'decrement':
            return { count: state.count - 1 }
        default:
            return state
    }
}
function App() {
    const [state, dispatch] = useReducer(reducer, initialState)

    return {
        <div>
            <button onClick={() => dispatch({ type: 'increment' })}>+</button>
            <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
        </div>
    }
}

export default App
复制代码

useReducer 和 redux的区别

userReducer 是useState的代替方案，用于state复杂变化
useReducer是个单个组件状态管理，组件通讯还需要props
reduc是全局的状态管理，多组件共享数据
复制代码

useMomo

useMemo缓存数据

1、React 默认会更新所有子组件
2、class组件使用SCU 和 Purecomponent做优化
3、Hooks中使用useMemo，但优化的原理是相同的
复制代码

useCallback

useCallback 缓存函数

自定义Hook

1、封装通用功能
2、开发和使用第三方Hooks
2、自定义Hook带来了无限的扩展性，解耦代码
复制代码

1、本质是一个函数
2、内部正常使用useState useEffect获取其他Hook
3、返回数据不限
复制代码

组件逻辑复用

class组件逻辑复用

HOC: 组件层级嵌套过多，不易渲染，不易调试、HOC会劫持props，必须严格规范，容易出现疏漏
Render Prop：学习成本高，不易理解、只能传递纯函数，而默认情况下纯函数功能有限
复制代码

Hooks组件逻辑复用

1、完全符合Hooks原有规则，没有其他要求，易理解记忆
2、变量作用域很明确
3、不会产生组件嵌套
复制代码

规范和注意事项

1、命名规范
2、使用规范
只能用于React函数组件和自定义Hook中，其他地方不可以（函数方法）
只能用于顶层代码，不能再循环，判断中使用hooks
3、Hooks调用顺序
无论是render还是re-render，Hooks调用顺序必须一致
如果Hooks出现在循环，判断里，则无法保证顺序一致
Hooks严重依赖于调用顺序
复制代码

React Hooks 注意事项

1、useState初始化值，只有第一次有效
2、useEffect里面不能修改state的值
useEffect 依赖为[] 定义的回调函数拿的是当时state的值
3、useEffect 依赖有对象引用类型，会造成死循环
比较依赖用的是Object.is函数
复制代码