react-hooks 求解，當父級props更新是，state不更新（Hook 中 組件props更新組件不更新的問題）

提問：

is_focus 第一次是false, 第二次是true。 如果我不寫useEffect的話，is_focus一直都是false，都是第一次的props的內容。 這樣正常嘛？必須要在useEffect中 更新props的值？props上面的其他數據也一樣，console.log props的數據是更新的，但是useState 之后還是第一次的數據

export default function UserInfo(props: IProps) {
  const [is_focus, setFocus] = useState(props.is_focus)
   // is_focus 第一次是false, 第二次是true。 如果我不寫useEffect的話，is_focus一直都是false，都是第一次的props的內容。 這樣正常嘛？必須要在useEffect中 更新props的值？
  useEffect(() => {
    setFocus(props.is_focus)
  }, [props.is_focus, props.created_id])
  const handleFocus = useCallback(() => {
    props.dispatch({
      type: `${commonSpace}/changeFollow`,
      payload: {
        uid: props.created_id
      },
      callback: () => {
        setFocus(!is_focus)
      }
    })
  }, [is_focus, props.is_focus, props.created_id])
  return (
    <View className='userInfoBox'>
      <Image className='userAvatar' src={props.src} />
      <Text className='userName'>{props.nickname}</Text>
      <Button
        onClick={handleFocus}
        className={is_focus ? 'userStatus checked' : 'userStatus'}
        hover-class='hover'
      >
        {is_focus ? '已關注' : '關注'}
      </Button>
    </View>
  )
}

 

回答1：

第一種情況是正常的，useState 他只會在函數執行時調用一次，給一個初始值。
后續的更新 state 需要借助 useEffect 來實現。
推薦兩篇文章：
【譯】什么是React Hooks：https://segmentfault.com/a/11...
精讀《Function Component 入門》：https://segmentfault.com/a/11...

回答2：

是的 useState(...)你可以大致看成是constructor里的東西 組件不卸載重新裝在就不會執行了

 

總結：

在react-hook中如果props更新，想讓組件視圖更新 使用useEffect(), 第二個參數傳入一個數組，數組的每一項為 要  監聽 的變量， 如果這個變量變化就會執行 useEffect 中的 callback 副作用函數。