本文共 1605 字，大约阅读时间需要 5 分钟。

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 的执行是异步还是同步取决于其执行环境。

转载地址：https://blog.csdn.net/weixin_45416217/article/details/103294738 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！