componentDidUpdate内部工作让我困惑

Question

我的一个React组件接收一个JSON数组。该组件包含componentDidUpdate。我知道这个函数在渲染之前运行，我可以看到nextProps和nextState，所以我可以将它们与当前进行比较。然而内心的工作使我感到困惑

以下是我的计划的步骤：

1. parent Component将新更新的列表传递给此组件

2. 此组件运行componentDidUpdate：

   • 将旧列表与此新的更新列表进行比较。找到新添加的项目，将其推入此组件的状态（数组调用differenceList）

3. 此组件根据differenceList

进行渲染

以下是我放置的console.log。

//触发列表更新后

1. 输入ComponentWillUpdate
2. 找到唯一的项目：“1336”，下一行代码将其推入数组
3. 应该用self.setState({differenceList: self.state.differenceList.concat(item.id)});
将其推入数组
4. 到达ComponentWillUpdate的末尾，this.state.differenceList是：[] //什么??
5. 输入渲染功能，this.state.differenceList为：[]
6. 再次输入ComponentWillUpdate //为什么？
7. ComponentWillUpdate的结尾，this.state.differenceList为：[]
8. 输入渲染功能，this.state.differenceList为：[“1336”]

为什么#4显示空？

在#6为什么再次进入componentWillUpdate？是因为我更新了componentWillUpdate中的状态？但如果是这样，为什么#5显示空状态#8现在再次输入渲染功能后，它会突然显示已更改的状态

Answer 1

答案是因为setState是异步的。

1. <Parent/>尝试渲染<Child list={[1, 2, 1336]}/>（批处理0）
   使用willUpdate() 调用
   • nextProps = {list: [1, 2, 1336]}
   • self.setState({differenceList: self.state.differenceList.concat(['1336'])}) // This code is asynchronous, creating Batch 1
   • willUpdate()的结尾，this.state仍然是相同的
   • render()
2. 处理批次1（您的setState()来电）
   • willUpdate()与nextState = { ... differenceList: ['1336'] }
   • this.state仍未更新
   • willUpdate()
   结束
   • render()新状态

我不确定我是否很清楚，我有点累 无论如何，you should not be using this.setState in componentWillUpdate().
尝试将componentWillReceiveProps()用于您的目的。