1分钟看懂React的那些Hook‘s

一、useEffect的五指山

1.执行时机：组件初始化,组件更新（组件内state变化）

useEffect(() => {
    
}) 

2.执行时机：组件初始化

useEffect(() => {
    
},[]) 

3.执行时机：组件初始化，依赖的状态发生变化（X可多个）

useEffect(() => {
    
},[X]) 

4.执行时机：组件卸载

useEffect(() => {
    
    return ()=>{
		console.log(组件卸载)
	}
}) 

5.执行时机：组件卸载，依赖的状态发生变化（X可多个）

useEffect(() => {
    //这里的X是新值
    return ()=>{
		console.log(组件卸载)
		//这里的X是旧值（上一次状态）
	}
},[X]) 

二、useLayoutEffect

0. react的commit意在把更新提交给浏览器，commit阶段： js修改DOM前，JS开始修改DOM，JS修改DOM后。commit阶段是同步的

1.浏览器会在JS修改DOM后开始渲染。

2.浏览器渲染完毕useEffect执行，但是useEffect是在JS操作DOM前调用。

3.JS修改DOM之后useLayoutEffect执行。

使用场景： 在一些页面或样式需要默认值的时候，因为useEffect在页面渲染后执行，会导致页面重新渲染，此刻需要搬出useLayoutEffect，因为他在JS修改完DOM就开始执行了，然后再渲染页面的时候，就会给用户更好的体验。

三、useState

const [count,setCount] = useState(0)
const [count,setCount] = useState( ()=>{ return('张三')} )

//使用 展示
<>{count}</>

//修改
() => {
    setCount(count + 1)
    console.log(count) //函数执行后，打印依然是0 （因为组件更新是异步的）
}

四、useMemo

场景：父子组件，子组件包含大量计算或费时活动时。

原因：在react中，父组件更新，会导致子组件重新render

解决：使用useMemo监听子组件是否有更新或是否需要重新计算，达到一个类似缓存的功能，来实现性能优化。

缺点：代码易读性差不好维护，useMemo本身也会消耗性能

五、React.memo

原因：只要父组件进行了setState的操作，子组件就会重新进行Render的操作。

解决：子组件使用 memo

缺点：React.memo是对比子组件的props引用是否一致。（传入 new的对象或function，因为每次父组件会重新创建，会导致memo失效， ！！！但可使用useMemo、useCallback破解！！！ ）

六、useMemo和useCallback区别

缓存数据（useMemo）

缓存函数（useCallback）

六、useRef

获取Dom实例

七、useContext

场景，父子孙都需要用到state和setState，层层传递会很费时，需要频繁props存取

使用，1.

1.父组件 createContext(XXX)

2.使用 <Context.Provider>{子组件}</Context.Provider> 包裹子组件

3. 子组件 const XX=useContest(Context)