react hooks 踩坑

1. useState返回的state只会在组件第一次初始化的时候被计算出来

比如你的state依赖于props，这个时候useState无法感知props的变化，那么props更新 state并不会更新，useState相当于class组件中的constructor,只执行一次，如果state想继续同步props，那么可以使用useEffect，比如

function Avatar(props) {
  const [user, setUser] = React.useState({...props.user});

  React.useEffect(() => {
      setUser(props.user);
  }, [props.user])

  return user.avatar ? 
         (<img src={user.avatar}/>)
        : (<p>Loading...</p>);
}

-- React.useState does not reload state from props

但是props改变usestate参数的如果是通过函数计算得到的值，该函数在props改变的时候任然会被执行,但useState返回的state依然是组件初始化的值，那么useState中的函数计算就是没有必要的，可以惰性初始 state

const [state, setState] = useState(() => {
  const initialState = someExpensiveComputation(props);
  return initialState;
});

传入一个函数，在函数中计算并返回初始的 state，此函数只在初始渲染时被调用，后面props改变不会去执行someExpensiveComputation函数。

-- 精读《Function VS Class 组件》
-- React Hooks 方式下 props 到 state 的值同步