Hooks 与 Class 中调用 setState 有不同的表现差异么?

1. Hooks 中的 setState 与 Class 中最大区别在于 Hooks不会对多次 setState 进行合并操作。如果要执行合并操作, 可执行如下操作:

setState(prevState => {
  return { ...prevState, ...updateValues }
})

2、此外可以对 class 与 Hooks 之间 setState 是异步还是同步的表现进行对比, 可以先对以下 4 种情形 render 输出的个数进行观察分析:

class 中的 setState:

export default class App extends React.Component {
  state = {
    name: '路飞',
    old: 12,
    gender: 'boy'
  }

  // 情形 ①: class 中异步调用 setState
  componentDidMount() {
    this.setState({
      name: '娜美'
    })
    this.setState({
      old: 13
    })
    this.setState({
      gender: 'girl'
    })
  }

  // 情形 ②: class 中同步调用 setState
  componentDidMount() {
    setTimeout(() => {
      this.setState({
        name: '娜美'
      })
      this.setState({
        old: 13
      })
      this.setState({
        gender: 'girl'
      })
    })
  }

  render() {
    console.log('render')
    const { name, old, gender } = this.state
    return (
      <>{name}{old}{gender}</>
    )
  }
}

Hooks 中的 setState

export default function() {
  const [name, setName] = useState('路飞')
  const [old, setOld] = useState('12')
  const [gender, setGender] = useState('boy')

  // 情形③: Hooks 中异步调用 setState
  useEffect(() => {
    setName('娜美')
    setOld('13')
    setGender('girl')
  }, [])

  // 情形④: Hooks 中同步调用 setState
  useEffect(() => {
    setTimeout(() => {
      setName('娜美')
      setOld('13')
      setGender('girl')
    }, 0)
  }, [])

  console.log('render')
  return (
    <>{name}{old}{gender}</>
  )
}

3、情形①、情形②、情形③、情形④ 中 render 输出的次数分别是 2, 4, 2, 4。可以看出在 React 中使用 class 写法和 hooks写法是一一对应的。此外 setState 的执行是异步还是同步取决于其执行环境。