React Hook

---

React Hook作用？

在函数组件里模拟生命周期和状态state。

一、Hook

1.useState 使用状态

const [num,setNum]=useState(10)

2.useEffect 模拟生命周期

1.第一个参数回调函数：模拟组件已经挂载完毕，组件已经更新完毕
2.第一个参数的返回值：模拟组件将要卸载
3.第二个参数：依赖参数

    useEffect(function () {
        var n = localStorage.getItem("num") || 10;
        setNum(n * 1);
        console.log("组件已经更新，组件已经挂载");
        return () => { console.log("组件将要卸载"); }
    }, [num])//[num]为响应num的变化输出

3.useRef 使用dom引用

const inpRef=useRef();
<input ref={inpRef}/>
inpRef.current.value

4.useCallback 使用回调函数

作用：缓存

5.useMemo 使用缓存

6.useLayoutEffect 视图发生变化

作用：当视图发生变化时，执行其回调函数

7.useReducer 集中数据管理器

模拟reduce
做全局状态管理

8.useContext 使用上下文

9.createContext 创建上下文

作用：跨层级传参

创建：let ColorContext=createContext()

使用：
<ColorContext.Provider value={{color,setColor}}>
//需要获取value的组件
</ColorContext.Provider>

获取：
let colorData=useContext(ColorContext)
colorData.color
colorData.setColor(‘red’)