入坑react，setState一个小问题

#1

最近换工作，公司需要用react，我就找来视频看了看，但是有一处不是很明白
视频中说this.setState()是异步执行的
他一般写成this.setState(() => ({}))这种函数式的样子，而不是this.setState({})这样直接传对象
我想知道这两种方法有什么区别吗？为什么说函数式的好一些

#2
#3

setState用官方的话说是不一定是同步的，this.setState(() => ({}))，这种能拿到最新的值,可以参考一下https://github.com/fengyua5/blog/issues/2

#4

谢谢，看完了解了一些

#5

嗯嗯，看完了，感觉还要多熟悉熟悉

#6

非常不推荐:point_up_2:写法，setState中不要参杂复杂逻辑。仅仅当作赋值语句使用比较好。
:point_up_2:方法容易写出很复杂的条件赋值语句，代码会变得难理解。

这种写法的 code，我做 code review 是不会通过的。

#7

我们用了 immer 之后已经天天这样写了. 而且有的地方还要把 setState 封装成 async 函数. 毕竟业务当中有逻辑, 逃不掉.

1 Like
#8

我觉得难以理解，是你能力问题。

#9

使用mobx可以避免这个api

#10

楼上兄弟戾气好重 - -

#11

:joy: 您说的对，我今年才开始做 React。目前只完成了一个项目而已。

#12

this.setState({
},()=>{
语句
})
保险一点 用回调

#13

又一个不知道的东西，有时间看看

#14

我只说我的经历，大家一起讨论。

贴一段同事写的代码，大家体会一下回调函数的弊端。

// 👀
loadData = (callback, reset) => {
// 这里写了一些业务逻辑，略
          this.setState(
            {
              historyItems,
              currentUser,
              loaded: true,
              hasMore: !(from + pageSize > total),
              from: from + pageSize,
              loadingMore: false,
              recentHistoryId,
            },
            () => {
              if (typeof callback === 'function') {
                callback()
              }
            },

// 👀
this.loadData(() => {
        this.pageHistoryDetail(siteId, pageId, historyId)
      }, true)

// 👀
pageHistoryDetail = (siteId, pageId, historyId) => {
// 这里写了一些业务逻辑，略
          this.setState(
            {
              cards,
              historyPageTitle,
            },
            () => {
              if (
                changeHistoryCallback &&
                typeof changeHistoryCallback === 'function'
              ) {
                changeHistoryCallback(
                  siteId,
                  pageId,
                  historyId,
                  cards,
                  historyPageTitle,
                  recentHistoryId,
                )
              }
            },
          )
        }
      })
    }
  }

我的经验，只要 code review 是容忍了 setState 中写回调函数，就会有人在回调函数中写回调函数。
最后变成回调地狱

#15

三目运算符用上完全保险