记录下RN的useStates热更新

1.进入页面直接更新(仅一次)

import { useEffect } from 'react'
useEffect(()=>{
//这里面写的代码就会在页面进入后就更新,只更新一次
},[])

2.进入页面就更新(页面显示就更新)

import {useFocusEffect} from '@react-navigation/native';
import React, {useCallback} from 'react';
  useFocusEffect(
    useCallback(() => {
    //这里的代码就会在页面显示的瞬间去执行
      return () => {
        //组件卸载的操作(离开页面时做操作,如清除定时器等)
      };
    }, []),
  );

3.监听某一数据的变化

  const [count, setCount] = useState(0)
  useEffect(()=>{
setCount(1) // 进入页面就更换值
  },[])

  useEffect(()=>{
console.log(count) // 这里打印的是更新后的count
  },[count]) // 可以写多个,监听多个数据,有任意一个变化都会触发

4.实时更新页面

import { useEffect } from 'react'
useEffect(()=>{
//这里面写的代码会实时更新
}) // 更第一个相比,去掉[]就是代表只要有数据发生变化就会被监听到,实时更新页面

5.想在某一个方法内得到更新后的数据

  const [count, setCount] = useState(0)
  useEffect(()=>{
setCount(1) // 进入页面就更换值
  },[])

  function num(){
setCount((num)=>{
console.log(num) // 这个打印的num就是更新后的1,也有可能会出现undefined,这个自行处理就行,比如在下面判断下,如果是undefined给个初始值就好
//在这里面继续写其它代码就可以啦
})
  }

原文地址：https://blog.csdn.net/weixin_68658847/article/details/136348982

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！