首发于前端学习
React踩坑--React父子组件之间的通信问题。

React踩坑--React父子组件之间的通信问题。

最近在学习react,由于之前有学习过vue,自然也轻松不少,但还是有不少坑,在这里跟大家分享一下,特别是前端新人,少走一些弯路。

首先大家考虑一个问题,如何在让父组件的状态与子组件的状态实现同步?

我想一般思路是这样的,父组件的状态通过props传递给子组件,子组件接收到props赋值给子组件的state。然后在父组件中定义一个setState的函数,传递给子组件,在子组件中通过事件回调执行这个函数,改变父组件的state,重新render,于是ok?

当我们以为万事大吉的时候,duang!!!,为什么子组件的状态没有更新??,父组件命名已经改变了状态了啊??

为什么子组件要更新??你让人家更新了??

当父组件的state发生变化的时候,父子组件都做了那些动作?

在回答问题之前,先去了解一些基础知识。

1.组件生命周期:请自行查阅官方文档

2.触发state改变的两种方式:组件初始化;setState()

下面,我们正式开始讨论这个问题。

组件第一次加载到页面中的时候,父组件的状态通过props传递到子组件中,并且在子组件中将这个props赋值给子组件的某个状态,这样子组件获取了父组件的状态;

父组件状态改变的时候,会触发render函数,导致子组件重新渲染,也就是出发了子组件的render函数,可是子组件的状态改变只能通过两个方式,要么在子组件第一次加载的时候在constructor函数中进行初始化,要么通过setState设置;所以关键的点就在这里,父组件的状态改变间接触发了子组件的render函数,但是并没有发生上述的两种改变子组件state的行为,那么子组件的状态不发生改变就是太正常不过的事情了。

提出问题,却不解答,那是流氓行为。

下面就讨论一下怎么解决这个问题?

既然子组件的state不会被改变,那我们不用不就行了?直接在子组件中使用props,而不是传给state,再使用state。当然,你会说那我想在子组件中改变props怎么办?那当然是通过父组件传递过来的回调函数来控制了。世界是公平的,不想在这里费劲,就得在另一个地方吃亏,所谓少壮不努力,老大徒伤悲。

发布于 2017-08-23

文章被以下专栏收录