React hooks組件中，定義的方法取不到新的state值的坑

項目中使用postal訂閱方法時，使用react hooks useEffect去監聽方法時，發現取到的state一直是舊的值，然後重寫了例子。

假設有個需求，父組件修改顏色，父組件會把該顏色傳到子組件，子組件每次點擊會打印當前自己state裏面的顏色。

這裏子組件有兩個監聽事件，一個是原生dom的監聽方式，一個是react提供的監聽，再測試的時候發現二者表現不同，所以寫了兩個。

直接預覽：https://codepen.io/Lik_Lit/pen/jOPJbbG

//子組件代碼
function Content ({theme}){
  const [themeState,setTheme] = React.useState(theme)
  const [reactThemeState,setReactThemeState] = React.useState({})
  const [nativeThemeState,setNativeThemeState] = React.useState({})
  const ref = React.useRef(null)
      
    const fun = (e)=>{
      e.target.innerText=== 'react點擊' ? setReactThemeState(themeState):setNativeThemeState(themeState)
    }
    
    //1.按照以前的寫法，在didMount監聽一次就可以
    React.useEffect(()=>{ //監聽click
      ref.current.addEventListener('click',fun)
      return ()=>{
        ref.current.removeEventListener('click',fun)
      }
    },[])
    
     React.useEffect(()=>{//props 改變 設置state
      setTheme(theme)
    },[theme])
    
    return (
      <div>
        <p>當前顏色:{themeState.foreground}</p>
        <div className='button-area'>
          <div onClick={fun}>react點擊</div>
          <div ref={ref} >原生點擊</div>
        </div>
        <p>react監聽點擊時顏色:{reactThemeState.foreground}</p> 
        <p>原生監聽點擊時顏色:{nativeThemeState.foreground}</p>
      </div>
    );
   
}

一開始點擊顯示顏色都是正常的，但是當我點擊父組件切換了顏色的時候，發現二者輸出的顏色不同，

這是由於hooks useEffect監聽時監聽方法裏的依賴參數，應當寫到useEffect第二個參數裏，我這個原生監聽依賴於state裏面的themeState，所以得對監聽的useEffect做個修改

    React.useEffect(()=>{ //監聽click
      ref.current.addEventListener('click',fun)
      return ()=>{
        ref.current.removeEventListener('click',fun)
      }
    },[themeState])//themeState改變則重新監聽 這裏改成props的theme也是錯誤的

這個時候監聽方法取到到state就是新的值