目录
?4、解决上述demo中使用useState 异步回调获取不到最新值
类组件中定义state，通过this.setState更新state里的值。而函数组件中的useState可以使函数组件像类组件一样拥有state。
类组件中通过this.setState更新state，进而改变UI视图。函数组件中通过useState来改变UI视图。
import React, { useState } from 'react';
const? A? =? props => {
const [state, dispatch] = useState(initData)
}
export default A
- state：目的提供给 UI ，作为渲染视图的数据源。
- dispatch：改变 state 的函数，推动函数组件渲染的渲染函数
? ? ? ? ? ? ? ? ? ? ? 第一种：作为非函数，作为新的值，赋予给 state，作为下一次渲染使用
const [ count, setCount ] = React.useState(0) // 点击事件 const handleClick=()=>{ setNumber(1) } console.log(count, 'count') // 1? ? ? ? ? ? ? ? ? ? ? 第二种：作为函数，这里可以称它为reducer，reducer 参数，是上一次返回最新的 state，返回值作为新的 state。
const [ number , setNumber ] = React.useState(0) const handleClick=()=>{ setNumber((state)=> state + 1) // state - > 0 + 1 = 1 setNumber(8) // state - > 8 setNumber((state)=> state + 1) // state - > 8 + 1 = 9 }
- initData：有两种情况。
? ? ? ? ? ? ? ? ? ? ?第一种：作为非函数，作为 state 初始化的值。
const [count, setCount] = useState(0)? ? ? ? ? ? ? ? ? ? ?第二种：作为函数，函数的返回值作为 useState 初始化的值
// props中的参数c小于数字5， 返回0，即count=0。 // c小于数字10,大于5， 返回1，即count=1。 // c大于10，返回2，即count=2 const [count, setCount] = React.useState(() => { if(props.c < 5) return 0 if(props.c < 10) return 1 return 2 })
类组件 setState 中，有第二个参数 callback 或者是生命周期componentDidUpdate 可以检测监听到 state 改变或是组件更新。
在函数组件中，通过useEffect监听。把 state 作为依赖项传入 useEffect 第二个参数 deps ，但是注意 useEffect 初始化会默认执行一次。
import React, { useState } from 'react'; export default function A (props){ const [ number , setNumber ] = useState(0) /* 监听 number 变化 */ React.useEffect(()=>{ console.log('监听number变化，此时的number是: ' + number ) },[ number ]) const handerClick = ()=>{ /** 高优先级更新 **/ ReactDOM.flushSync(()=>{ setNumber(2) }) /* 批量更新 */ setNumber(1) /* 滞后更新 ，批量更新规则被打破 */ setTimeout(()=>{ setNumber(3) }) } console.log(number) return <div> <span> { number }</span> <button onClick={ handerClick }>点击</button> </div> } // 2 // 监听number变化，此时的number是: 2 // 1 // 监听number变化，此时的number是: 1 // 3 // 监听number变化，此时的number是: 3
dispatch更新特点在使用useState 有一点值得注意，当调用改变 state 的函数dispatch，函数组件中dispatch 更新效果和类组件是一样的，是获取不到最新的 state 值的
const [ number , setNumber ] = React.useState(0) const handleClick = ()=>{ ReactDOM.flushSync(()=>{ setNumber(2) console.log(number, '2') }) setNumber(1) console.log(number, '1') setTimeout(()=>{ setNumber(3) console.log(number, '3') }) } // 0 '2' // 0 '1' // 0 '3'
useState中的dispatch参数，既可以作为非函数，也可以作为函数。
4.1? ?下面这种情况的写法，仍获取不到最新值：
? ? ? ? 本应输出 [0, 1, 2]，打印结果却不是
import React, { useState, useEffect } from 'react'; const App = () => { const [arr, setArr] = useState([0]); useEffect(() => { console.log(arr); }, [arr]); const handleClick = () => { Promise.resolve().then(() => { setArr([...arr, 1]); // 此时赋值前 arr 为：[0] }) .then(() => { setArr([...arr, 2]); // 此时赋值前 arr 为旧状态仍然为：[0] }); } return ( <> <button onClick={handleClick}>change</button> </> ); } export default App; // 输出结果 [0] useEffect 初始化会默认执行一次 [0,1] [0,2] // 例2： const [number, setNumber] = useState([0]); const handleClick= () => { setTimeout(()=>{ setNumber([...number, 1]) },100) setTimeout(()=>{ setNumber([...number, 2]) },500) } useEffect(() => { console.log(number, 'number' ) }, [number]); return ( <> <button onClick={handleClick}>change</button> </> ); // [0] useEffect 初始化会默认执行一次 // [0,1] // [0,2]????????第一次 setArr 后 arr 的值确实更新了，我们也可以在上面输出结果中看到，但此次执行的 handleClick 事件处理函数作用域还是旧的，里面引用的 arr 仍然为旧的，导致第二次 setArr 后结果为 [0, 2]
4.2? ?解决方案1：dispatch参数，作为函数。
import React, { useState, useEffect } from 'react'; const App = () => { const [arr, setArr] = useState([0]); // 声明一个数组 const arr = [0] useEffect(() => { console.log(arr); }, [arr]); const handleClick = () => { Promise.resolve().then(() => { setArr(prevState => [...prevState, 1]); // 或者这样写：setArr([...arr, 1]); }) .then(() => { setArr(prevState => [...prevState, 2]); // 这里必须改成回调函数传参方式，否则会读取旧状态，导致异常 }); } return ( <> <button onClick={handleClick}>change</button> </> ); } export default App; // 输出结果 [0] useEffect 初始化会默认执行一次 [0,1] [0,1,2] // 例2： const [fields, setfields] = React.useState([0]); const intervalRef = React.useRef(); function change(){ setTimeout(()=>{ setfields([...intervalRef.current, 1]) },100) setTimeout(()=>{ setfields([...intervalRef.current, 2]) },500) } React.useEffect(() => { intervalRef.current = fields; console.log(fields, '123' ) }, [fields]); // [0] '123' useEffect 初始化会默认执行一次 // [0,1] '123' // [0,1,2] '123'4.3? 解决方案2
????????利用 ref ，state 发生改变同时将值映射到 ref， ref 的改变不会触发页面更新，但在异步中一定能拿到最新值，所以需要在页面上用就使用 state，在异步逻辑中用就使用 ref
import React, { useState, useRef, useEffect } from 'react'; const App = () => { const [arr, setArr] = useState([0]); let refArr = useRef(); // 1. 声明一个refArr useEffect(() => { refArr.current = arr; // 2. 把最新的arr的值赋值给refArr.current。第一次时refArr.current = [0] console.log(arr); }, [arr]); const handleClick = () => { Promise.resolve().then(() => { const now = [...refArr.current, 1]; // 3. ...拓展运算符展开refArr.current，然后再与1进行合并，声明一个变量now接受新合并的值，得到 const now = [0，1]， setArr(now); // 4. 通过setArr更新arr数组 refArr.current = now; // 5. 这一步代码必须有，也是最关键的一步，这一步代码中把拿到最新now的值 再 重新赋值给refArr.current，保证了第6步中2能添加进去。如果不写这一步，里面引用的 arr 仍然为旧的，导致第二次 setArr 后结果为 [0, 2] }) .then(() => { setArr([...ref.current, 2]); // 6. ...拓展运算符展开refArr.current，然后再与2进行合并 }); } return ( <> <h1>{arr.toString()}</h1> <button onClick={handleClick}>change</button> </> ); } export default App; // [0] useEffect 初始化会默认执行一次 // [0,1] // [0,1,2] // 例2 const [fields, setfields] = React.useState([0]); const intervalRef = React.useRef(); React.useEffect(() => { intervalRef.current = fields; console.log(fields, '123' ) }, [fields]); function change(){ setTimeout(()=>{ setfields([...intervalRef.current, 1]) },100) setTimeout(()=>{ setfields([...intervalRef.current, 2]) },500) } // [0] '123' // [0,1] '123' // [0,1,2] '123'4.4? 解决方案3
? ? ? ? 优化方案2：
封装一个 hooks 将 state 和 ref 进行关联，同时再提供一个方法供异步中获取最新值使用，例如：
const useGetState = (initVal) => { const [state, setState] = useState(initVal); const ref = useRef(initVal); const setStateCopy = (newVal) => { ref.current = newVal; setState(newVal); } const getState = () => ref.current; return [state, setStateCopy, getState]; } const App = () => { const [arr, setArr, getArr] = useGetState([0]); useEffect(() => { console.log(arr); }, [arr]); const handleClick = () => { Promise.resolve().then(() => { setArr([...getArr(), 1]); }) .then(() => { setArr([...getArr(), 2]); }); } return ( <> <h1>{arr.toString()}</h1> <button onClick={handleClick}>change</button> </> ); }