关于useEffect执行两次的问题及解决.docx

第

关于useEffect执行两次的问题及解决

目录useEffect执行两次问题父组件里面子组件里面react使用useEffect及踩坑useEffect介绍重要理解useEffect常见跳坑

useEffect执行两次问题

在useEffect第二个参数变化的时候，需要在父组件里面更改这个值的地方加一个判断，如果有值则设置为空，else更新这个值。useEffect第二个值可以是表达式

父组件里面

//授权树展示

??consthandleRoleModalVisible=(RoleModelVisibel:boolean,record:any)={

????setRoleModalVisible(RoleModelVisibel);

????//console.log(record)

????if(RoleModelVisibel==undefined){

??????setroleAuth(undefined)

????}else{

??????setroleAuth(record)

????}

??};

子组件里面

?const{roleAuth,treeData,roleModalVisible,handleRoleModalVisible}=props;

??useEffect(()={

????queryTreeId({role_id:roleAuth.roleId}).then(res={

??????setCheckedKeys(res.data.content)

??????setSelectedKeys(res.data.content)

????})

??},[roleAuth!==undefined])

在最后

?{

???roleAuthAuthorityroleAuth={roleAuth}?treeData={treeData}

???roleModalVisible={roleModalVisible}handleRoleModalVisible={handleRoleModalVisible}/

?}

react使用useEffect及踩坑

useEffect介绍

useEffect时reactHook中最重要，最常用的hook之一。

useEffect相当于react中的什么生命周期呢？

这个问题在react官网中有过介绍，在使用的过程中，容易被忽略，在面试的时候却经常被问及，（面试造航母，上班拧螺丝？），开个玩笑这个问题并不难回答，下面是react官方的原话：

如果你熟悉Reactclass的生命周期函数，你可以把useEffectHook看做componentDidMount，componentDidUpdate和componentWillUnmount这三个函数的组合。

componentDidMount组件挂载componentDidUpdate组件更新componentWillUnmount组件将要摧毁

useEffect需要传递两个参数，第一个参数是逻辑处理函数，第二个参数是一个数组

用法

useEffect(()={

/**执行逻辑*/

},[])

重要理解

一、第二个参数存放变量，当数组存放变量发生改变时，第一个参数，逻辑处理函数将会被执行

二、第二个参数可以不传，不会报错，但浏览器会无线循环执行逻辑处理函数。

useEffect(()={

/**执行逻辑*/

三、第二个参数如果只传一个空数组，逻辑处理函数里面的逻辑只会在组件挂载时执行一次，不就是相当于componentDidMount

useEffect(()={

/**执行逻辑*/

},[])

四、第二个参数如果不为空数组，如下

const[a,setA]=useState(1);

const[b,setB]=useState(2);

useEffect(()={

/**执行逻辑*/

},[a,b])

逻辑处理函数会在组件挂载时执行一次和(a或者b变量在栈中的值发生改变时执行一次)这是不是相当于componentDidMount和componentDidUpdate的结合

五、useEffect第一个参数可以返回一个回调函数，这个回调函数将会在组件被摧毁之前和再一次触发更新时，将之前的副作用清除