React Hooks

class 组件的问题

1. 大型组件很难拆分和重构，很难测试；
2. 相同的组件逻辑分散到各个方法中，逻辑混乱；
3. 复用逻辑变得复杂，eg:mixmins/HOC/render prop;

HOOKS

函数式组件更灵活。易拆分、易测试，但简单，没有副作用，需要增强能力——hooks；

state hook

1. 作用等同于 class 的setState；
2. 函数式组件执行完即销毁、无法存储 state；
3. 命名规范：const [xxx,setXxx] = useState()；
4. useState 初始值只有第一次有效，后期想要修改只能通过 setXxx 修改

effect hook

1. 让函数式组件模拟生命周期
2. 命名规范用法:

// 第二个参数为 [] --> DidMount
// 第二个参数不写-->DidUpdate/DidMount
// useEffect return 一个函数：WillUnMount
useEffect(() => {
    // do sth
    // 销毁
    return () => {
   		 // do sth
    }
  }, [])

3. useEffect 让纯函数有了副作用；
4. useEffect 第二个 参数为 [] 时不能修改 state，依赖为空数组，reRender 不会重新执行 effect，effect 不会拿到最新的外面的 state

const [count, setConut] = useState(0)

 useEffect(() => {
   console.log(count);// 0
   const timer = setInterval(() => {
     setConut(count + 1)
   }, 200)
   return () => clearInterval(timer)
 }, []) // 只执行一次

 console.log(count);// 1

5. useEffect 可能会引起死循环

useEffect 内部通过 Object.is 判断是否触发更新
  Object.is({},{});// false
 Object.is([],[]);// false

useRef

获取 DOM 节点，ref.current获取值或赋值

useContext

上下文

import React,{useContext, useState, createContext} from 'react';

const ParentContext = createContext();
const NameContext = () =>{
    return(
          
            
          
  )
};
 
const Child = () => {
    const name = useContext(NameContext);
    return (
        

            
{name}
        
    );
};

export default  ParentContext;

useReducer

useReducer 是 useState 的代替方案，适合复杂的 state 变化；

import { useReducer } from "react";

// reducer计算并返回新的state
function reducer(state, action) {
  const { type } = action;
  switch (type) {
   // do sth
  }
}

export default () => {
  const [state, dispatch] = useReducer(reducer, { name: "拙慕" });
  return (
    <>
      btn
      

        Hello,{state?.name}
      
    
  );
}

useReducer vs redux

1. useReducer 是但组件状态管咯，通讯还是需要 props；
2. redux 是全局状态管理，多组件共享数据

useMemo

1. 缓存值；
2. react 父组件更新，子组件无条件更新，不管子组件有没有使用，useMemo 可以监听 props 某个传入的被使用到的值；

useCallback

缓存函数、方法

自定义 hooks

1. 本质是一个 函数，以 use 开头；
2. 内部正常使用 react 的所有 hooks；
3. 返回格式不限制；
4. 封装通用功能，开发、使用第三方 hooks，满足扩展性；

hooks 调用依赖执行顺序

函数式组件，执行完即销毁，无论是组件初始化还是组件更新都会重新执行一次这个函数，获取最新的组件。

// render: 初始化 xx 的值
// re-render：读取 xx 的值
 const  [xxx,setXxx] = useState(0)
 
// render: 添加 effect
// re-render：替换 effect，内部函数也会被重新定义
useEffect(() => {
    // do sth
  }, [])

• 无论是 render 还是 reRender ，hooks 顺序必须保持一致；
• hooks 只能用于 顶层代码；
• 如果出现在 循环、判断里，也不能在可能被打断的代码后，则会打断 react filber 的执行顺序