useState实现回调

useState实现'回调'

团队最近从类组件转向函数式组件，遇到了一个问题就是无法在useState中设置回调方法。

react hook，官方将setState移除了回调方法，由于setState是异步方法，没办法直接在set后拿到最新的数据，所以我们可以通过以下两种方式来拿到更新后的值。

1. useEffect实现

const [count, setCount] = useState(0);

const addCount = () => {
   setCount(count+1);
};

useEffect(() => {
   console.log(count);
   function(){
   ....
   }
}, [count])

通过useEffect可以监听count的变化，来实现'回调'方法。

2. Promise实现

const [count, setCount] = useState(0);

const addCount = () => {
    new Promise((resolve) => {
        setCount((num) => {
            resolve(num + 1);
            return num + 1;
        });
    }).then(res => {
        console.log(res);
        ...
    });
};

官方移除setState的回调，更推荐使用useEffect。