componentDidUpdate内部工作使我困惑

Question

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

---

下面是我的程序步骤：

1. 父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. Entering ComponentWillUpdate // why why？ ComponentWillUpdate的
7. 端，this.state.differenceList是：[]
8. 输入渲染功能，this.state.differenceList是：[ “1336”]

为什么#4表示空？

at #6为什么它再次进入componentWillUpdate？是因为我更新了componentWillUpdate中的状态吗？但是如果是的话为什么#5显示为空状态#8现在再次进入渲染函数后，它突然显示改变状态

Answer 1

答案是因为setState是异步的。

1. <Parent/>试图呈现<Child list={[1, 2, 1336]}/>（批次0）
   • willUpdate()被调用与nextProps = {list: [1, 2, 1336]}结束willUpdate()的
   • self.setState({differenceList: self.state.differenceList.concat(['1336'])}) // This code is asynchronous, creating Batch 1
   • ，this.state仍然是相同的
   • render()
2. 治疗第1批（您的通话setState()）
   • willUpdate()与nextState = { ... differenceList: ['1336'] }
   • this.state仍然没有更新
   结束与新州的 willUpdate()
   • render()

我我不确定我是否很清楚，有点累了。
反正，you should not be using this.setState in componentWillUpdate().
尝试使用componentWillReceiveProps()为您的目的。