hooks中,useState异步问题解决方案

Posted 2023-05-10

参考技术A 在hooks中,修改状态的是通过useState返回的修改函数实现的.它的功能类似于class组件中的this.setState().而且,这两种方式都是异步的.可是this.setState()是有回调函数的,那useState()呢?

一个同事询问如何根据某个状态值发生改变后再去执行某个方法，而且需要在这个方法里去取得这个值

结合useEffect进行监听:一句话概括,我不需要知道你设置完成没有.只要useEffect监听到你值变化了,再进行操作.

一个函数里是可以写多个useEffect的，不用去考虑会影响到性能啥的，可以只针对要监听的值进行书写即可

react hooks useState 赋值优化解决方案

//性能优化一点，极少成多，网页会成为大厂所青睐的网页

//如下一个hooks函数

import React,{useState} from ‘react‘;
// import TodoList from ‘./TodoList‘;
function App() {
let a=1;
   console.log(1) //可以看到数据更新，就执行一次，上面的let a 也执行，数据较多时损耗性能。
  const [b,setb]=useState(a);  //hooks解构赋值
  return (
    <div className="App">
      {b}
      <button onClick={()=>{setb(b+1)}}></button>
    </div>
  );
}

export default App;

　　//可以采用如下方式

import React,{useState} from ‘react‘;
// import TodoList from ‘./TodoList‘;
function App() {
  // console.log(1)
  const [b,setb]=useState(()=>{
    let a=1;
    console.log(a);  //可以看到采用这种方式，数据只在第一次初始化，当数据较多时，节省性能。
    return a;
  });
  return (
    <div className="App">
      {b}
      <button onClick={()=>{setb(b+1)}}></button>
    </div>
  );
}

export default App;