每天进步一点点，轻轻松松进阶前端。

react最后一篇了，后续专更 ES6文章，临近假期，提前祝大家过年假期开心！

不过在这里提醒大家，俗话说“年前是非多”，多一事不如少一事，另外更是小偷骗子等等活跃高峰期，像小编一样出门在外的朋友们务必提高防范意识，保护自己的财物。

什么是状态提升？

当几个组件需要共用同一个状态数据时，由于各个组件state是独立的，此时需要状态提升，即：

把需要的数据放在他们的父组件state中，父组件再通过props传递数据给这些组件。

举个例子：

假设两个input组件a b，他们的显示值需要同步，更改其中一个时另一个也同步更改。

1. ab组件怎么显示相同的值？

假设ab组件有个共同父组件z，ab组件将显示值（变量）存在z的state里，z通过props把值分别传递到ab组件，这样ab显示的值肯定是一样。

2. 一个组件改变状态时，另一个如何同步？

ab组件其中一个改变值时，调用父组件传递的方法fn来改变z的state，这样ab组件会同时刷新（fn也是通过props传递给ab组件）

总的来说：父组件用props传递方法和状态给子组件，子组件通过调用其方法改变父组件的状态，进而实现同步。

什么时候需要使用状态提升

实际上这个功能用的不多，也不好用，因为ab组件的共同父组件并不一定是直接父子关系，可能是爷爷和孙子的关系，这样需要的数据就需要从中间几代一直传递（传家宝 ╮(╯▽╰)╭），非常麻烦，所以 redux 就很有用了，它存放着所有的 state 而且允许你在任何一个子组件中获取 state。

本篇文章到此结束，可以尝试做下文章中的例子，react 所有基础内容到此也基本结束了，希望大家看了小编的文章也有所收获，有什么不足的地方也欢迎大家指正！

【前方雾大，关注一下不迷路 = 。=】

【html】【css】【html】【css】【前端开发】【javascript】【html】【javascript】【前端开发】【css】【javascript】【css】【前端开发】