目录
1、useState用法: 三个参数用法
2、如何监听state的变化
3、dispatch更新特点
4、解决上述demo中使用useState 异步回调获取不到最新值
4.1 下面这种情况的写法,仍获取不到最新值:
4.2 解决方案1:dispatch参数,作为函数。
4.3 解决方案2
4.4 解决方案3
类组件中定义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
{ number }} // 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 ( <> > ); } 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 ( <> > ); // [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 ( <> > ); } 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 ( <>
{arr.toString()}
> ); } 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 ( <>
{arr.toString()}
> ); }