时间戳

首页 > 解决方案 > 随着依赖值的变化，UseEffect 不会被立即调用

javascript - 随着依赖值的变化，UseEffect 不会被立即调用

问题描述

我很新反应。我正在试验反应并试图理解它的概念。

我有一个组件有两种状态，名称和房间。我正在使用 setstate 设置房间和名称值，我有 2 个使用效果，第一个在初始渲染时运行并获取名称和房间值。第二个应该在名称或房间更改后立即呈现

const Chat = ({location}) => {
    const [userName, setUserName] = useState("");
    const [userRoom, setUserRoom] = useState("");
    useEffect(() => {
        // console.log("initial use effect called")
        const {name,room} = queryString.parse(location.search)
        setUserName(name)
        setUserRoom(room)
    }, [])
    useEffect(()=>{
        console.log('name or room changed')
    },[userName,userRoom])
    return (

        <div>
           component
        </div>
    )
}

由于我是一个接一个地设置名称和房间，我预计第二次使用效果会被调用三遍

（第一次初始渲染，第二次更改名称，第三次更改房间）

但它只被调用了两次。另外，如果我在初始使用效果中添加超时，

第二个 useEffect 被调用了 3 次

const Chat = ({location}) => {
    const [userName, setUserName] = useState("");
    const [userRoom, setUserRoom] = useState("");
    useEffect(() => {
        // console.log("initial use effect called")
        const {name,room} = queryString.parse(location.search)
        setUserName(name)
        setTimeout(()=>{
        setUserRoom(room)
          },0)
        
    }, [])
    useEffect(()=>{
        console.log('name or room changed')
    },[userName,userRoom])
    return (

        <div>
           component
        </div>
    )
}

标签： javascriptnode.jsreactjsreact-hooksmern

解决方案

React 会批量进行状态更新。这意味着，当您多次设置状态时，它将在一次操作中更新两个状态，从而减少重新渲染（这在大多数情况下都很好）。您可以在此处了解更多信息。

推荐阅读