useState使用props初始化的注意点

setState 会将当前组件节点提交到更新队列中，然后 rerender 自身以及自身子组件。子组件从 props 接收的字段值也会随之变化，然后插入到 jsx 中渲染也会变化。

但是，如果子组件将 props 中的字段作为了 useState 的 initValue，然后将 state 插入到 jsx 中渲染，这个字段即使在上层发生了变化通过 props 传下来，依然是作为 useState 的 initValue, 这将不会更改 state！

这显然是因为 useState 的特性导致的，useState 在 fiber 上初始化了 state，后续取的都是 fiber::state 的值，它不会因为 initValue 发生了变化而去更新 fiber::state ！这时就需要 useEffect ！

举一个例子：

export interface Avatar extends AvatarProps {
  pendingSrc?: Promise<string>
}

export const Avatar = ({ src, pendingSrc, ...props }: Avatar) => {
  const [display, setDisplay] = useState(src)

  useEffect(() => {
    if (pendingSrc) {
      pendingSrc.then(setDisplay)
    }
  }, [pendingSrc])

  return <AntdAvatar {...props} src={display} />
}

给 Avatar 组件添加了可以是异步 Promise 的 pendingSrc 属性，

1. 这样用是没有问题的：

<Avatar src="xxx/xxx.svg" />
<Avatar pendingSrc={fetchImg('xxx/xxx.svg')} />

但是如果这样用它：

const [src, setState] = useState('xxx/aaa.svg')

useEffect(()=> {
  setState('xxx/bbb.svg')
}, [])

<Avatar src={src} />

你会发现 Avatar 渲染出来的总是 xxx/aaa.svg，无论 src 怎么变化。这是组件库开发的一个致命问题。

现在修改 Avatar 组件：

export const Avatar = ({ src, pendingSrc, ...props }: Avatar) => {
  const [display, setDisplay] = useState(src)

  useEffect(() => {
    if (pendingSrc) {
      pendingSrc.then(setDisplay)
    }
  }, [pendingSrc])

  useEffect(() => {
    setDisplay(src)
  }, [src])

  return <AntdAvatar {...props} src={display} />
}

这样当 props.src 发生变化时，就可以响应渲染。

所以，如果开发一个组件使用了 useState，并且使用了 props 中的值来作为 initValue，一定注意是否需要响应上层变化即使用 useEffect。