React Hooks 学习总结

前言

最近的换写React项目了，好久没有写React，还动不动就想class🤣，现在跟上时代，重新学习React Hook.Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

为什么有Hook？

1、在组件之间复用状态逻辑比较难，需要用到高阶组件或者render props，Hook可以无需修改组件结构的情况下，复用状态逻辑。
2、Hook可以将组件中相互关联的部分拆分成更小的函数，方便理解；
3、不再使用class和this，更方便上手和理解；

使用Hook的注意事项

1、只能在最外层函数中调用Hook。（不要在循环、条件判断、子函数中调用）
React在创建hook时，以链表的解构存储，前一个hook中next指针指向下一个hook。在组件更新时会进行hook的一一对应的比对，所以要保证每次hook数量一致，位置相同。循环、条件判断中使用hook，会导致数量和位置的变化，产生错误。
2、只在react的函数组件中调用。

常用的HooK

1.useState

作用：在组件内部添加一个state，React会在重复渲染时保留这个state。
参数： 1个，state的初始值initialState；

const [state,setState] =useState（initialState）

返回值：2个
1）state 当前状态，在初始渲染时，state就是initialState
2）setState更新当前state的函数，他接受一个新的state，并且将该组件的一次渲染加入队列，他有点类似类组件中this.setState,但并不会将新旧state合并

//在函数组件中
const [state,setState] =useState（{name:"lily",age:18}）
return(
<button onclick={setState（{age:20}）}>改变年龄<button>
//这里使用useState不会将新旧state，现在state为{age:20}，name属性就没有了
//所以需要注意 onclick={setState（{...state,age:20}）}
)

特点
1）每次渲染都是独立的闭包，拥有当前自己的props\state\函数
2）函数式更新

//如果新的状态需要依赖旧的状态，可以使用函数式更新
setState（state =>({...state,age:state.age +1})）
//将旧状态传入，返回新的状态

3）懒加载初始化state

//如果state中的值需要复杂计算
const [state,setState] =useState（（）=>  ({name:"lily",age:12})）

性能优化（减少渲染次数）
1)Object.is
在调用state的更新函数时，React会先进行Object.is的比较算法
如果state不相同，进行子组件渲染和effect，否则不进行刷新渲染

2）useMemo（缓存值）
某些情况下组件中的值需要依赖state进行计算后得到，由于每次组件更新都会去重新计算，为了减少性能消耗，可以使用useMemo缓存值，仅仅当依赖改变时，才重新计算。

参数：计算函数，依赖数组
则函数仅会在某个依赖项改变时才重新计算memoized 值。

 const [count, setCount] = useState(0);
//expensive 需要依赖count计算得到
 const expensive = useMemo(() => {
 let sum = 0;
 for (let i = 0; i < count; i++) {
 sum += i;
 }
 return sum;
 //只有count变化，这⾥才重新执⾏
 }, [count]);

3)useCallback （缓存回调函数）
由于每次组件更新都会内部函数都会重新创建一次，为了节省性能，可以使用useCallback，使内联回调函数仅仅在传入依赖项改变时进行更新。

参数：内联回调函数，依赖数组
则函数仅会在某个依赖项改变时才进行更新。

 const [count, setCount] = useState(0);
 const addClick = useCallback(() => {
setCount（count+1）
 }, [count]);

4）memo （缓存组件）
父组件更新子组件也会重新创建，为节省性能，可用memo将子组件缓存，仅仅当props改变时，组件才进行更新

const Child = (props)=>{
return <div>{props.age}</div>
}
//这里只会在props改变的时候重新渲染
Child =memo（Child）
const Father=（）=>{
const [name,setName]=useState("lily")
const [age,setAge]=useState(18)
return(
<>
<button onclick={setAge（age+1）}>改变年龄<button>
<input onChange={e=>(setName（e.target.value）)}>改变姓名<button>
<Child age={age}/> 
</>
)
}

5）useRef （缓存ref）
同理，用useRef可对React.creactRef对象进缓存

2. useReducer

作用：编写自定义hook或者在某些改变state逻辑复杂的情况下替代useState，用法类似redux，useState是useReducer的语法糖。
参数： 3个，reducer方法、initialState初始值，init；

const [state,dispatch] =useReducer（reducer ，initialState）

返回值：2个
1）state当前状态，在初始渲染时，state就是initialState
2）dispatch派发方法，接受参数action，改变当前state，并且将该组件的一次渲染加人队列。
自定义hook

//实现一个useState
const useState=(initalState)=>{
    const reducer = useCallback(_state,action)=>{
        return action.paylaod
    }
    const [state,dispatch] = useReducer(reducer, initalState)
    const setState = (state)=>{
        dispatch({paylaod:state})
    }
    return [state,setState]
}

3.useContext

作用：提供更方便的方法从React上下文中拿到consumer的值
参数： 1个，context（React.createContext）；

const  value=useContext（context）

返回值：1个 consumer的值

4.useEffect

作用：在React渲染阶段，改变DOM、添加订阅、设置定时器等操作会破坏UI一致性，含有副作用的操作将不被允许，使用useEffect完成副作用的操作，传入函数会在组件渲染后执行.
参数： 2个，didUpdate包含副作用的回调函数，在组件渲染后执行,[state]依赖项，传入依赖项，仅在依赖项改变后的执行

useEffect（didUpdate,[state]）

返回值：1个清除副作用函数，在组件销毁前执行，相当于componentWillUnmount，可进行定时器，事件监听的移除操作
特点
由于useEffect的副作用函数在组件渲染后执行，他和class组件中的生命周期componentDidMount/componentDidUpdate和componentWillUnmount有相同的用途

5.useRef、useImperativeHandle

useRef作用：对ref对象进缓存，ref 对象在组件的整个生命周期内保持不变。
参数： 1个，initialValue，ref.curren初始化的值

function  FocusButton() {
    const inputEl = useRef(null); 
    const onButtonClick = () => {
        // `current` 指向已挂载到 DOM 上的文本输入元素
        inputEl.current.focus();
    };
    return (
        <>
            <input ref={inputEl} type="text" />
            <button onClick={onButtonClick}>Focus the input</button>
        </>
    );
}

useImperativeHandle作用：有些情况下我们需要父组件把ref传递给子组件，仅仅使用forwardRef将子组件的ref属性都暴露给父组件是危险的，也违反了封装原则，useImperativeHandle允许在子组件中把自定义实例附加到父组件传过来的ref上，减少暴露给父组件的属性
参数： 3个，ref, createHandle处理函数，其返回值会替换父组件传来的ref.current, [state]依赖项

useImperativeHandle(ref, createHandle, [state])

例子

let Child =  (props, ref) =>{
    const inputRef = useRef();
    useImperativeHandle(ref, () => ({
        focus: () => {
            inputRef.current.focus()
        }
    }));
    return <input ref={inputRef} />;
}
Child = forwardRef(Child );

const Father=() => {
    const ref = useRef(null);
    return (
        <>
            <Child ref={ref}/>
             <button onClick={()=>{ ref.current.focus()}}>聚焦</button >
        </>
    )
}

6.useLayoutEffect

作用：与useEffect相同，都是用来执行副作用。
特点：useEffect是在渲染之后调用effect，也就是下一桢执行，是异步的；
而useLayoutEffect在当前帧Render tree计算布局（Layout）信息后，渲染前，同步调用effect。官方文档建议使用标准useEffec。

7.自定义Hook

定义：函数以use开头并且在函数内部调用其他hooks，并且返回一个数组，可以实现逻辑复用。
例子：

//实现一个thunk
const useThunk =(reducer,initalState)=>{
const [state,dispatch] =useReducer(reducer,initalState)
const thunkDispatch = (action)=>{
if( action instanceof Function){ //如果action是函数，传入新的dispatch执行action
   return action (thunkDispatch,()=>state)
}else{
dispatch(action )
}
return [state,thunkDispatch]
}

结尾

现在就只了解到这么多。还有什么没写到的日后更新。