RN/react：副作用刷新页面规则以及如何实现使用goback()也能刷新页面

一丶副作用刷新页面规则

   1.第一步我们要知道是什么触发了副作用：

import React, { useEffect, useState } from 'react';

function Set() {
 //这两种写变量的方法都可以使用
 //const [arr, setArr] = React.useState(['00', '00', '20']);
 const [arr, setArr] = useState(['00', '00', '20']);
 useEffect(() => {
    console.log('我进来了')
  }, [])；
  
  return (
      <View style={styles.box}>
            
      </View>
  );
}

//样式-RN(react不是这样的，react可以使用className类名进行样式的编写)
const styles = StyleSheet.create({
    box: {
        height: 866,//RN写法是不带单位的
        width: 400,
    },
    
})
export default Set;

  是当我们使用setArr来改变arr这个变量的时候会触发副作用，说到副作用顺便说一下副作用是什么：副作用就是当该变useState出来的变量时会将整个最外面的页面函数重新走一遍也就是这个Set会从上至下重新运行一遍。也是因为这个副作用的存在改变变量之后页面才会跟着改变。

2.useEffect的各种情况和用法：

 第一种--正常使用什么都不添加--基础：

   这种情况之下useEffect里面的内容每次页面刷新或者触发副作用时都会执行。

import React, { useEffect, useState } from 'react';

function Set() {
 
 const [arr, setArr] = useState(['00', '00', '20']);
 useEffect(() => {
    console.log('什么都不添加')
  })；
  
}

const styles = StyleSheet.create({
  
    
})
export default Set;

 第二种--监听空值--主要用于发起请求：

  在第二个参数为空数组的情况下，useEffect里面的内容只会执行一次，首次加载页面的2/4次页面刷新都只会执行第一次，后面再触发多少次的副作用也不会再执行里面的逻辑代码了。

import React, { useEffect, useState } from 'react';

function Set() {
 
 const [two, setTwo] = useState(2);
//在useEffect中放第二个参数，且参数值为空数组
 useEffect(() => {
    console.log('什么都不添加')
  },[])；
  
}

const styles = StyleSheet.create({
  
    
})
export default Set;

第三种--监听变量--主要用于特定情况下页面更新：

    当是第二个参数的数组中存在变量时，useEffrct中的内容会在进入页面的时候执行一次，之后只会在two这个变量发生改变的时候才会再次执行useEffect中的内容。

    当然这个数组里面也可以存放多个变量以逗号隔开就行。

注意！！！：

 一定不能在useEffect里面改变第二个参数数组中的变量！！！，不然会死循环，因为变量改变-->所以触发这个useEffec-->因为触发这个useEffect所以改变这个变量.....死循环页面会崩掉！

比如：在下面这个图片中的第二个参数为[two]的useEffect中使用setTwo来使two的值进行改变后这个useEffect就会进入死循环

import React, { useEffect, useState } from 'react';

function Set() {
 
 const [two, setTwo] = useState(2);
 const [three, setThree] = useState(3);
//在useEffect中放第二个参数，且参数值为一个参数的数组
 useEffect(() => {
    console.log('当two变量发生改变时我才会执行')
  },[two])；
  
}

//在useEffect中放第二个参数，且参数值为多个参数的数组
 useEffect(() => {
    console.log('两个变量改变其中任何一个及以上我都会执行')
  },[two, three])；
  
}
const styles = StyleSheet.create({
  
    
})
export default Set;

二丶如何在上一个页面使用goBack()回到这个页面的时候也进行页面刷新:

   想要实现这个效果首先需要使用import { useIsFocused } from '@react-navigation/native'，这个命令引入useIsFocused，然后再调用这个并复制给一个变量，再将这个变量写到useEffect的第二个参数的数组中去就可以实现。

注意：

    因为进入此页面时isFocused的值为true会执行一次，当你离开这个页面的时候isFocused的值会变为false所以又会再次执行一次，然后再你使用goBack()再次回到这个页面的时候isFocused的值将再次变为true再一次只能useEffect里面的内容，从而实现了使用goBack()也可以刷新回到的页面。

    当然上面我也说到了，再离开页面的时候也回执行一次，如果你不想再离开页面的时候执行，只想进入的时候执行你可以再这个useEffect里面添加一个if判定当isFocused为true时再执行这个useEffect里面的内容，反之也是一样的。

import React, { useEffect, useState } from 'react';

import { useIsFocused } from '@react-navigation/native';

function Set() {
 
 //用于刷新页面 isFocused的值为true/false
  const isFocused = useIsFocused();              

 useEffect(() => {
    console.log('当页面变化时我就会执行')
 },[isFocused])；
  

 useEffect(() => {
   if(isFocused){
     console.log('当进入此页面变化时我就会执行')
   };
 },[isFocused])；
}

  
}
const styles = StyleSheet.create({
  
    
})
export default Set;