React生命周期方法之 componentDidUpdate

componentDidUpdate这个生命周期方法可能在开发中用的比较少，但是也相当好用！

一、最近在用antd-moblie做图片上传，看官方提供的API：

手机端的ImagePicker组件并没有像PC端的那样，在上传事件中提供直接去调后台的action，要是做成选择好几张后，然后那几张同时上传，那就简单，但是业务要求的是一选择就上传，但是组件又不支持，怎么办呢？继续往下看：

首先定义要标志变量：originLength、removedIndex

在这个onChange事件中，可以知道用户是上传还是移除图片，然后改变标志变量

下面就是关键了，componentDidUpdate方法：只要页面的state或者model中的state中定义的变量值发生改变，这个方法就会执行。所以我们在上面通过改变标志变量，导致变量值发生改变，从而让componentDidUpdate执行，只要componentDidUpdate执行，我们就可以在这方法里面做文章。在componentDidUpdate方法中，我们通过判断标志位，去调上传图片或者删除图片的方法，这样就能实现一选择图片就上传，一删除图片就删除已上传的图片。不过要记得，在上传或移除方法完成时（就是在上传或移除方法里面），要重置标志位，不然下次操作，在componentDidUpdate方法中通过标志位去控制的逻辑就会失效。

二、用在页面与iframe之间的postMessage通讯

跟iframe通讯这种情况也是可以用componentDidUpdate方法定义标志位的方式去实现数据的传递的。

1.页面初始化的时候，可能本身页面数据加载跟页面渲染比较快，导致iframe渲染完成在页面之后，导致iframe中没有数据，那就可以在iframe的加载完成事件中，设置标志参数，让iframe需要的参数再重新传给iframe一次：

在componentDidUpdate方法中：去判断是什么类型的操作，然后给iframe重新发送一次初始化数据，最后重置标志参数。

2.当还有其他参数改变，需要与iframe通讯的时候，都可以用这样的方式。或者iframe中的值发生改变，需要同步到外面也可以。因为，在iframe中使用connect，是获取不到model中的数据的，下图这样是没用的：

三、用在父子页面之间，方法的调用，或参数的重置等

假设:

父页面要去更新子页面state中的数据，怎么办？子页面更新父页面的数据好办，把父页面的更新方法传到子页面，子页面去触发就好了。或者，父页面想调子页面的方法，怎么办？把本来在子页面的方法改到父页面去，然后再由父页面传下来？这样太麻烦。

我现在验证码组件（相当于子页面）中写了这么个方法：

就是一进去就先去获取图片验证码中的图片，getImageVerifyCode方法就在子页面中。

当我在父页面（提交页面）提交的时候：

去验证用户输入的验证码是否正确，要是碰到用户乱输，然后校验失败，校验失败的时候，是不是要重新获取图片验证码？但是，你会发现，获取图片验证码的方法在子页面中，要怎么取调呢？

这时候，利用子页面的componentDidUpdate生命周期函数就可以解决，还是设置一个标志参数reFindImageCode，将它的值设为yes（默认是no）：

这样就可以实现父页面间接调用子页面的方法了。

总结：重点就是设置标志参数，然后记得重置标志参数。