做的网站上更改内容改怎么回事,外贸推广代理,如何制作广告,网站图片最大尺寸是多少文章目录 一#xff0c;useEffect描述二#xff0c;它的执行时机三#xff0c;useEffect分情况使用1#xff0c;不写第二个参数 说明监测所有state#xff0c;其中一个变化就会触发此函数2#xff0c;第二个参数如果是[]空数组#xff0c;说明谁也不监测3#xff0c;第… 文章目录 一useEffect描述二它的执行时机三useEffect分情况使用1不写第二个参数 说明监测所有state其中一个变化就会触发此函数2第二个参数如果是[]空数组说明谁也不监测3第二个参数如果只传需要监测的state那只会根据此状态来执行函数4useEffect 里面return一个回调函数相当于组件即将卸载的声明周期5注意 一useEffect描述 我们知道react 的函数组件里面没有生命周期的也没有 state没有 state 可以用 useState 来替代那么生命周期呢 useEffect 是 react v16.8 新引入的特性。我们可以把 useEffect hook 看作是componentDidMount、componentDidUpdate、componentWillUnmounrt三个生命周期的组合。可以让你在函数式组件中执行一些副作用操作
一般副作用操作有
发送ajax请求设置订阅 / 启动定时器手动更改真实DOM
二它的执行时机
可以看做这三个生命周期函数的组合也就是在这三个时候会执行
componentDidMount组件已经挂载
componentDidUpdate组件已经更新
componentWillUnmount组件即将卸载
三useEffect分情况使用
useEffect()有两个参数第一个参数是要执行的回调函数第二个参数是一个依赖项数组数组(根据需求第二个参数可选是否填写)根据数组里的变量是否变化决定是否执行函数
先看下面简单的案例 下面会分情况讨论
useEffect.js
import React, { useState, useEffect, useRef } from react;// 类型约定
interface interList {id: number | string; // 类型可能是number也可能是stringtext: string;done: boolean;
}
// 渲染数据
const myList: ArrayinterList [{ id: 0, text: 参观卡夫卡博物馆, done: true },{ id: 1, text: 看木偶戏, done: true },{ id: 2, text: 打卡列侬墙, done: true }
];const UseEffect: React.FC (props: any) {let [num, setNum] useState(100);let [useInfo, SetUserInfo] useState(myList);// 0什么都不传 就是监听所有数据的变化useEffect(() {console.log(我改变了-all);}); // 1此处相当于 componentDidUpdate生命周期 组件已经更新完成useEffect(() {console.log(我改变了);}, [num]); // 只监听num的变化,useInfo的变化不会被监听到// 2此处相当于componentDidMount生命周期 组件已经挂载完成useEffect(() {console.log(componentDidMount);console.log(可以拿到num的值, num);}, []);// 3此处相当于 componentWillUnmount生命周期 组件即将卸载useEffect(() {// 返回一个回调函数return () {console.log(组件将要卸载了);};}, []);// 其实传不传空数组或不是空数组useEffect函数里面的回调都会执行一次也就是说componentWillUnmount这个生命周期页面进来就会执行// useEffect 这个hoosk也是可以写多个的尽量不同的处理写在不同useEffect里面// 点击改变用户信息const change () {// react 建议不要更改原数组 返回一个数组的拷贝const newList [...useInfo, { id: 3, text: 优菈, done: false }];SetUserInfo(newList);};// 点击加一const add () {setNum(num);};const lis useInfo.map((item, index) {return (li key{index}{index}:{item.text}/li);});return (divh3userEffect 副作用hooks函数/h3br /button onClick{add}点击加一/buttonp{num}/pbr /button onClick{change}改变用户信息/buttonul{lis}/ul/div/);
};
export default UseEffect;
效果图
上面代码实现的效果很简单两个按钮分别改变各自数据的状态状态的改变会触发 useEffect函数的执行第二个参数的传参影响着此函数的变化所以下面进行分情况讨论
1不写第二个参数 说明监测所有state其中一个变化就会触发此函数
若不写第二个参数函数操作每次都会执行 useEffect(method)监测所有state相当于 componentDidUpdate生命周期 - 组件已经更新完成。 import {useEffect } from react;useEffect(() {console.log(我改变了-all);}); // 监听所有数据的变化2第二个参数如果是[]空数组说明谁也不监测
第二个参数如果是[]空数组说明谁也不监测此时useEffect回调函数的作用就相当于 componentDidMount生命周期 - 组件已经挂载完成 // 2此处相当于componentDidMount生命周期 组件已经挂载完成useEffect(() {console.log(componentDidMount);console.log(可以拿到num的值, num);}, []);3第二个参数如果只传需要监测的state那只会根据此状态来执行函数
如果第二个参数中的数组只传了 num 说明只有 num改变时才会触发此useEffect回调函数相当于对此数据的监听。 // 1此处相当于 componentDidUpdate生命周期 组件已经更新完成useEffect(() {console.log(num改变了);}, [num]); // 只监听num的变化当然数组里面也可以写多个[num,userInfo]同时监听多个数据的变化。
4useEffect 里面return一个回调函数相当于组件即将卸载的声明周期
这句话什么意思呢 通常组件是有卸载的生命周期的使用useEffect 函数只需在里面return一个回调函数这个回调函数就相当于componentWillUnmount 声明周期可以在里面清除创建的订阅或计时器 ID 等资源。 // 3此处相当于 componentWillUnmount生命周期 组件即将卸载useEffect(() {// 返回一个回调函数return () {console.log(组件将要卸载了);};}, []);这里传了空数组说明我不想监听数据的变化只想在卸载组件的时候执行该逻辑
5注意
其实第二个传不传空数组或不是空数组useEffect函数里面的回调都会执行一次也就是说页面进来就会自动执行componentWillUnmount这个生命周期
useEffect函数 这个hoosk也是可以写多个的尽量不同的业务处理写在不同useEffect里面
