(一)useEffect
useEffect – React 中文文档
useEffect hook用于模拟以前的class组件的生命周期，但比原本的生命周期有着更强大的功能
1.类组件的生命周期
在类组件编程时，网络请求，订阅等操作都是在生命周期中完成
import React, { Component } from 'react'export default class App extends Component {// 组件挂载后执行componentDidMount(){// 发送请求// 事件总线绑定// 创建定时器等}// 组件更新后执行componentDidUpdate(){}// 组件销毁前执行componentWillUnmount(){// 事件总线解绑// 清除定时器}render() {return (<div>App</div>2.函数式组件的生命周期
函数式组件没有明确的生命周期，使用useEffect来模拟生命周期
useEffect(setup, dependencies?)
在useRffect的第一个参数传入回调函数，执行请求、挂载等操作
useEffect会在组件每次挂载、更新后调用回调
import { useState, useEffect } from 'react'
function App() {const [count, setCount] = useState(0)useEffect(()=>{// 发送请求// store仓库订阅subscribe// 事件总线绑定 eventbus.on// 操作外部domdocument.title = count})return (<><div>{count}</div><button onClick={()=>{setCount(count+1)}}>加1</button></>)
}如何在组件销毁前取消订阅或者移除绑定？
只需要在第一个回调里返回一个回调函数即可，useEffect会在组件销毁前/组件更新前调用
useEffect(()=>{// 发送请求// store仓库订阅subscribe// 事件总线绑定 eventbus.on// 操作外部domdocument.title = count// 计数器const time = setInterval(()=>{console.log(1);},1000)return ()=>{// store仓库取消订阅 unsubscribe// 清除事件总线// 清除计数器等操作clearInterval(time)}})回调函数内的代码太长了
拆分useEffect，每个功能都可以单独写一个useEffect，react会自动处理
useEffect(()=>{// 发送请求})useEffect(()=>{// store仓库订阅subscribereturn ()=>{// store仓库取消订阅 unsubscribe}})useEffect(()=>{// 计数器const time = setInterval(()=>{console.log(count);},1000)return ()=>{// 清除计数器等操作clearInterval(time)}})执行次数会不会太多了？
向上面那样书写的话，每次update都会执行回调，更新一次dom就请求一次、绑定一次事件这样子也太蠢了，因此useEffect可以传入第二个参数，用来控制依据什么来决定是否执行，和之前useCallback、useMemo一样，都会传入dependencies这个参数
// 只执行一次useEffect(()=>{// 发送请求},[])// 只执行一次useEffect(()=>{// store仓库订阅subscribereturn ()=>{// store仓库取消订阅 unsubscribe}},[])// count改变才执行useEffect(()=>{document.title = count},[count])useEffect先简单写到这里，useEffect虽然是模拟生命周期，但它能做的事比生命周期更多，能够根据传入的数组参数判断是否执行
(二)useRef
useRef – React 中文文档
useRef 是一个 React Hook，它能帮助引用一个不需要渲染的值
useRef(initialValue)
initialValue：ref 对象的current属性的初始值。可以是任意类型的值。这个参数在首次渲染后被忽略
useRef hook主要有两个功能：
- 绑定dom元素
- 保存一个数据，在整个生命周期中可以保存不变
1.绑定dom元素
初始化const xxx = useRef();通过ref={xxx}来绑定ref
import { useState, useRef } from 'react'
function App() {const [count, setCount] = useState(0)const nameRef = useRef()console.log(nameRef.current);return (<><div ref={nameRef}>csq</div><div>{count}</div><button onClick={()=>{setCount(count+1)}}>加1</button></>)
}通过xxx.current获取该dom元素
2.绑定一个值（解决闭包陷阱）
先说说闭包陷阱：
闭包陷阱是指使用react hooks的时候，由于闭包特性，在某些函数内获取useState或者props的值时获取到的是旧的值，而实际值已经改变
使用 ref 可以确保：
- 可以在重新渲染之间 存储信息（普通对象存储的值每次渲染都会重置）。
- 改变它 不会触发重新渲染（状态变量会触发重新渲染）。
- 对于组件的每个副本而言，这些信息都是本地的（外部变量则是共享的）。
改变 ref 不会触发重新渲染，所以 ref 不适合用于存储期望显示在屏幕上的信息。如有需要，使用 state 代替。
将新增count的操作放到useCallback回调里，会导致读取到的count始终为0
const [count, setCount] = useState(0)const increment = useCallback(()=>{setCount(count+1) // set(0+1)console.log(count); // 0},[])return (<><div>{count}</div><button onClick={()=>increment()}>加1</button></>)因为useCallback传入的依赖为空，意味着increment函数只生成一次，只能读取到生成时count的状态，即0（我感觉我也是蒙的）
这样就形成了闭包陷阱！
解决办法：
(1)添加useCallback的依赖即可
const increment = useCallback(()=>{setCount(count+1) console.log(count)},[count])(2)使用useRef
const [count, setCount] = useState(0)const countRef = useRef()// count改变会引起重新渲染，这样countRef的值每次都和count相等countRef.current = countconst increment = useCallback(()=>{setCount(countRef.current+1) },[])return (<><div>{count}</div><button onClick={()=>increment()}>加1</button></>)这里肯定不是应用useRef的最好场景，毕竟加个依赖项就解决了
但使用useRef的话，increment函数就不会重新加载了！
(三)useImperativeHandle
useImperativeHandle – React 中文文档
useImperativeHandle是 React 中的一个 Hook，它能让你自定义由 ref 暴露出来的句柄。
useImperativeHandle(ref, createHandle, dependencies?)
1.在父组件使用子组件的ref
子组件获取父组件ref的方法：forwardRef()
forwardRef – React 中文文档
import { useRef, memo, forwardRef, useImperativeHandle } from 'react'
function App() {const childrenRef = useRef()const getDom = ()=>{console.log(childrenRef.current);}return (<><button onClick={getDom}>获取dom元素</button><Children ref={childrenRef}></Children></>)
}const Children = memo(forwardRef(function(props,ref){return (<><input type="text" ref={ref} /></>)
}))
2.通过useImperativeHandle hook控制子组件ref能暴露的部分
import { useRef, memo, forwardRef, useImperativeHandle } from 'react'
function App() {const childrenRef = useRef()const getDom = ()=>{console.log(childrenRef.current);childrenRef.current.set(100)childrenRef.current.focus()}return (<><button onClick={getDom}>获取dom元素</button><Children ref={childrenRef}></Children></>)
}const Children = memo(forwardRef(function(props,ref){const inputRef = useRef()useImperativeHandle(ref,()=>{// 返回对象 该对象就是父组件能操作的chilrenRefreturn {set(value){inputRef.current.value = value},focus(){inputRef.current.focus()},}})return (<><input type="text" ref={inputRef} /></>)
}))
这个hook的使用不是很常见，只要了解就ok
(四)useLayoutEffect
useLayoutEffect – React 中文文档
useLayoutEffect是 useEffect 的一个版本，在浏览器重新绘制屏幕之前触发。
useLayoutEffect(setup, dependencies?)
useLayoutEffect和useEffect在各个方面都是相同的，只是执行的时期不同，useLayout会阻塞dom的更新。如果需要在dom更新前进行操作，使用useLayoutEffect
1.使用useEffect
function App() {const [count,setCount] = useState(0)// 可见count在点击重置之后会先闪回0再变为随机数useEffect(()=>{console.log('useEffect');if(count == 0){setCount(Math.random()+100)}})return (<><h1>count:{count}</h1><button onClick={()=>setCount(0)}>重置为0</button></>)
}2.使用useLayoutEffect
如果需要在dom渲染之前改变的需求就使用useLayoutEffect
function App() {const [count,setCount] = useState(0)// 在dom重新渲染前就捕获count进行更新 不会出现闪动情况useLayoutEffect(()=>{console.log('useLayoutEffect');if(count == 0){setCount(Math.random()+100)}})return (<><h1>count:{count}</h1><button onClick={()=>setCount(0)}>重置为0</button></>)
}
