useEffect 少渲染一次

redux react 前端 useeffect react-redux

janlin002 2022-02-11 11:17:45 ‧ 747 瀏覽

分享至

const Demo = () =>{
  const dispatch = useDispatch()
  const testDatas = useSelector(testData)
  
  // testDatas 在reducer內預設值為false

  useEffect(()=>{
    dispatch(test(true))
    dispatch(test(false))
  }, [])

  useEffect(()=>{
    console.log(testDatas, 'testDatas')
  }, [testDatas])

  return (
    <>
      <div>Demo</div>
    </>
  )
}

export default Demo

請問一下，為什麼conosle.log出來的值只會顯示false，少跑了true的部分?
reducer不是應該是即時渲染？
如果去看Redux的Devtool，卻有正常顯示(true -> false)

blinjay iT邦新手 5 級 ‧ 2022-02-11 14:54:00 檢舉

store裡的資料是即時更新沒錯，但畫面渲染不會即時

JY iT邦新手 5 級 ‧ 2022-02-11 16:37:30 檢舉

React會批次處理事件，連續call兩次 dispatch ，React 會將它放入隊列中處理，等到隊列中的事件都處理完成後才會一次渲染畫面，所以 React 會先將值從 false -> true -> false 變更完成，然後取最後一次的 "false" 來渲染畫面，而 useEffect 本身是渲染後才執行，所以第二個 useEffect 只會執行一次，因為 React 實際上只渲染一次畫面

登入發表討論