React Hooks —— Effect Hooks

什么是Hooks

Hooks从语法上来说是一些函数。这些函数可以用于在函数组件中引入状态管理和生命周期方法。

React Hooks的优点

1. 简洁
   从语法上来说，写的代码少了
2. 上手非常简单
   • 基于函数式编程理念，只需要掌握一些JavaScript基础知识
   • 与生命周期相关的知识不用学，react Hooks使用全新的理念来管理组件的运作过程
   • 与HOC相关的知识不用学，React Hooks能够完美解决HOC想要解决的问题，并且更可靠
   • Mobx取代了Redux做状态管理
3. 代码复用性更好
4. 与Typescript结合更简单

React Hooks的缺点

1. 状态不同步
   在异步操作的函数中访问的状态还是原来的状态的值
2. useEffect依赖问题
   当useEffect依赖的数据变多后会导致频繁触发

React Hooks的注意事项

1. 命名规范
   自定义Hooks的命名一律使用use作为前缀，形如：useXXX
2. 仅在最外层调用React Hooks
3. 仅从react函数中调用react Hooks
   在自定义Hooks或者组件中调用Hooks

useEffect：

useEffect能够监听变化，并执行回调函数。

useEffect(effect,[deps])：

• effect：effect参数是一个回调函数，当deps中的依赖发生变化effect被触发

• deps：deps参数是一个数组，数组中的元素是需要监测的状态。

useEffect监测指定的状态，当状态更新时调用回调函数。如果不传第二个参数则监听所有状态。如果传递一个[]表示不监听任何状态，只在初始化时执行一次。

import {useEffect}from 'react'
useEffect(()=>{},[]);

如果回调函数返回一个函数，这个函数相当于生命周期的componentWillUnmount。

import {useEffect} from 'react';
useEffect(()=>{
	return ()=>{
		// 组件卸载时触发
	}
},[]);

useLayoutEffect

useLayoutEffect与useEffect很相似也接收一个回调函数和一个数组，当数组中的依赖发生变化后触发回调函数。不过他们存在以下不同：

• useEffect是异步执行的，而useLayoutEffect是同步执行的
• useEffect的执行时机是浏览器完成渲染后，而useLayoutEffect的执行时机是浏览器将内容渲染到界面之前

当useEffect中的操作需要处理DOM，并且处理DOM的过程中会改变页面的样式时就需要使用useLayoutEffect。

import {useLayoutEffect}from 'react'

function App(){
useLayoutEffect(()=>{
},[]);
	return <>
}