react hooks 陷阱
- hooks必须放在函数顶层， 不能在条件分支和方法内
1、useState陷阱
异步陷阱
function Index() {const [count, setCount] = useState(0)function add(){setCount( count + 1 )console.log(count); // 0}return (<div><span>{count}</span><button @click=()=>{ add() }> + </button></div>)
}
点击一次按钮，发现页面是更新了，但是console还是上一次的值
【解决方法】：
- 所以我们不能修改后，把值去拿去其他操作 (应该拿 count+1)
- 可以通过 promise 来 .then 获取 最新 👇
function Index() {const [count, setCount] = useState(0)function add(){new Promise((resolve) => {setCount((count) => {resolve(count + 1)return count + 1})}).then((res) => {// 下一步操作console.log(res)})}return (<div><span>{count}</span><button onClick={add}> ++ </button></div>)
}
合并陷阱，只执行最后一个
function Index() {const [count, setCount] = useState(0)function add(){setCount( count + 1 )setCount( count + 2 )setCount( count + 3 ) // 只执行这个}return (<div><span>{count}</span><button onClick={add}> ++ </button></div>)
}
此时 只执行了 最后一个 setCount , 导致数据部分逻辑未执行
如果出现这种 判断条件多次 操作 useState 怎么解决 👇
function add(){let num = count;if(...) { num += 1; }if(...) { num += 2; }if(...) { num += 3; }setCount( num );}
那就不写多个setCount
再看个例子：
function Index() {const [count, setCount] = useState(100);function add(){// 合并setCount( count + 1 )setCount( count + 1 )console.log(1, count) // 100// 传入函数，不会合并setCount( count => count + 1 )setCount( count => count + 3 )console.log(2, count) // 100// 点击一次后 count显示为105}return (<div><span>{count}</span> <button onClick={() => add() } > + </button></div>)
}
2、useEffect 陷阱
过期闭包
function Index() {const [count, setCount] = useState(0)useEffect(()=>{setInterval(() => { console.log(`Count: ${count}`) }, 1000)}, [])return (<div><span>{count}</span><button onClick=()=>{ setCount(count+1) }> + </button></div>)
}
默认就会运行 每隔1s打印0
点击按钮，count有更新,但是console一直是0
说明此时的 useEffect 中的 count ，还是取的 过期的值
react特点，每次更新都会重新执行这个函数，每次就+1， 是另外一个函数了，不是原来这个函数
但是setInterval的count永远是第一个函数里面的，形成了闭包
【解决方法】：
需要，添加依赖项 count ，
并且每次更新，添加计时器，结束改变计时器
function Index() {const [count, setCount] = useState(0);useEffect(()=>{const time = setInterval(() => { console.log(`Count: ${count}`) }, 1000)return () => { clearInterval(time) } // 关键 清除上一次的setInterval }, [count])return (<div><span>{count}</span><button @click=()=>{ setCount(count+1) }> + </button></div>)
}3、useCallback 陷阱
useCallback 本来拿来优化性能，当依赖变化不用重新注册该函数
使用不当 也会出现一定的问题
获取父组件的值，不是最新
function Parent() {let [count, setCount] = useState(0);return (<div><button onClick={() => setCount(count+1)}> +1 </button>// 子组件<Child count={count} /></div>)
}function Child(props){let log = useCallback(() => { console.log(props.count) }, [])return (<div>count: {props.count}<button onClick={() => log()}> 打印 </button></div>)
}
此时我们在 父组件点击 增加按钮
子组件的 count 发生改变 ，我们在点击打印按钮，发现count 一直是0
说明useCallback 依赖为【】数组，取到count 已经过期了
【解决方法】
方法1 ：等于没有优化 （依赖更新，useCallback重写一次）
let log = useCallback(() => { console.log(props.count) }, [props.count])
方法2 ：将获取 count 的方法 创建到父组件，子组件调用父组件方法
function Parent() {let [count, setCount] = useState(0);let log = useCallback(() => { console.log(count) }, [])return (<div><button onClick={() => setCount(count+1)}> +1 </button>// 子组件<Child count={count} log={log} /></div>)
}function Child(props){return (<div>count: {props.count}<button onClick={() => props.log()}> 打印 </button></div>)
}
