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 <>
}

你可能感兴趣的:(react,前端,javascript)