Hooks解决了什么问题

类组件

复用问题

1. 虽然有状态，但是若要复用逻辑状态麻烦
2. 即使用高阶组件逃脱不出添加最外部的父组件来控制

生命周期及其内存

3. 每次组件render时都带有其状态、函数、变量
4. 若有些组件中含有像定时器等则需要在组件挂载时添加，组件卸载时清除，相同逻辑的函数要分散在生命周期中，难以进行控制

State控制问题

5. 对状态的操作频繁且分散

this的绑定问题

6. 父组件给子组件传递函数时，必须绑定 this

//方法一：
constructor(props) {
    this.handleClickBind = this.handleClick.bind(this);
}
    //使用时：在props不变时button不刷新
<button onClick={this.handleClickBind}></button>

//方法二:由于bind返回一个新函数，所以无论props是否变化始终刷新
<button onClick={this.handleClick.bind(this)}></button>

//方法三：用箭头函数穿透，与方法二类似每次都刷新
<button onClick={()=>this.handleClick()}></button>
复制代码

函数组件

没有State

没有生命周期

👍Hooks的优势

• 抽离状态层方便复用逻辑
• 相关联函数连接更加紧密
• effect的分离

  1. 某些生命周期与渲染冲突影响用户体验
  2. 分离使其不影响渲染
• 完全使用函数组件解决所有问题

👏Hooks开冲

• useState
• useEffect
• useContext
• useReducer
• useCallback
• useMemo
• useRef
• useImperativeHandle
• useLayoutEffect
• useDebugValue

useState

🔔第一步：让函数组件拥有state

const [state,setState]=useState({...initialState})
复制代码

• 返回的state为最新状态，setState为更新函数
• setState的更新为直接替换而非合并
• 修改状态值，试图也会同时更新

useEffect

🔔第二步：让函数组件拥有生命周期

useEffect(() => {
    fn()
    return unfn()
},[controlparams])
复制代码

「使用时请注意：」

• useEffect 就是监听每当依赖变化时，执行回调函数的存在函数组件中的钩子函数。
• effect在render后按照前后顺序执行。
• effect在没有任何依赖的情况下，render后每次都按照顺序执行。
• 可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。
• fn()组件挂载时执行，unfn用于卸载时的清除操作
• 防止频繁操作时 每次render都是独立的，里面有独立的state、effects、function积累消耗性能
• 可能有时候内部的内容并没有发生变化，这时就会产生冗余的render，这时候就需要引入依赖，当这些参数发生变化的时候才去执行我里面的函数。
• controlparams是 Effect 的依赖项，发生变化，useEffect()就会执行。
• 如果想执行只运行一次的 effect（仅在组件挂载和卸载时执行），可以传递一个空数组（[]）作为第二个参数。
• 将[inputRef]作为useEffect的第二个参数传递，它实际上只在初始挂载时运行一次。

useContext

🔔第三步：让函数组件跨组件共享状态

const context = useContext(Context);
// Context 为 context 对象（React.createContext 的返回值） 
// useContext 返回Context的返回值。
// 当前的 context 值由上层组件中距离当前组件最近的<Context.Provider> 的 value prop 决定。
复制代码

useReducer

🔔第四步：让函数组件缓存优化（应用更多场景 更深层）

const [state, dispatch] = useReducer(reducer, initialState);

const initialState = {count: 0};

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case ‘decrement’:
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}
function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}
复制代码

• useState 的替代方案，它接收一个形如 (state, action) => newState 的 reducer，并返回当前的 state 以及与其配套的 dispatch 方法

useCallback

🔔第四步：让函数组件缓存优化（diff）

const memoizedCallback = useCallback(() => {fn(a, b);},[a, b],);
复制代码

useMemo

🔔第四步：让函数组件缓存优化（diff）

const memoizedValue = useMemo(() => fn(a, b), [a, b]);
复制代码

useCallback：接收一个内联回调函数参数和一个依赖项数组（子组件依赖父组件的状态，即子组件会使用到父组件的值） ，useCallback 会返回该回调函数的 memoized 版本，该回调函数仅在某个依赖项改变时才会更新 useMemo：把创建函数和依赖项数组作为参数传入 useMemo，它仅会在某个依赖项改变时才重新计算 memoized 值。这种优化有助于避免在每次渲染时都进行高开销的计算

useRef

🔔第五步：让函数组件能拿到一个可变，但是在组件的生命周期中指向的是同一个的ref对象

const refContainer = useRef(initialValue);
复制代码

useImperativeHandle

useLayoutEffect

useDebugValue

（不太确定有无问题，持续更新...）

本文使用 mdnice 排版