React状态提升-让大家共用状态数据

当使用React遇到几个组件需要共用状态数据的情况时，这个时候就需要将共享的状态数据提升至与他们最靠近的父组件进行管理。下面，我们将利用一个小实例对状态提升进行了解，本次实例的最终UI渲染效果为：

当我们在搜索框输入关键字进行模糊搜索时，此时UI就会被与关键字相匹配的内容熏染。
（1）首先我们对UI进行组件的划分

如上图所示，我们利用不同颜色的边框对组件进行划分，颜色相同的部分是同一个
其中红色边框对应的组件：Messageend
褐色边框对应的组件：Messagedetail
黑色边框对应的组件：Filtermessage
黄色边框对应组件：Messagesingle
此时，根据UI截面划分出的组件的层级关系如下：

组建中，Messageend作为顶部层级最高的组件。
在上述组件结构中，Filtermessage中的搜索框中的内容会根据输入的内容而被更新，同时组件Messagedetail又会根据搜索框中用户输入的内容过滤出与之匹配的信息，所以，此时就需要将状态state提升至与这两个组件最靠近的父组件中进行管理，也就是要将state提升至组件Messageend中，此时父组件Message拥有了提升上来的状态数据，它就成为了其它子组件的数据源，它会提供给子组件一致的数据。
此时，就只有组件Messageend中使用state，其余组件的数据是父级通过props传递。
（2）各组件的实现细节
2.1 Messagesingle组件的实现

该组件是实现UI上的每一条小的message的，根据它得到的message数据对UI进行渲染。在实现过程中，我们也对message中中picture这个属性是否为空进行了判断，达到不同的渲染效果的目的。

2.2 Messagedetail组件的实现

在该组件中，我们对message数据进行遍历，兵器且通过在搜索框输入的关键字与message中的text、title、以及category三个的任意一个只要能匹配上，message就会被渲染到页面上。只有与这三项都不匹配，对应的message就会被过滤。

2.3 Filtermessage组件的实现

其实，在之前的学习过程中，我们知道，正常而言state应该是在该组件中被更新（因为它存在用户输入信息的变化），但是由于存在状态的共享，此时将状态state提升至父组件，但是由于每个组件在更新状态时都是只更新自己的状态，所以父组件会讲一个回调函数onFilterTextInput传递给子组件，每当应该更新组件时，就会被触发。

2.4 Messageend组件的实现
该组件通过用户在文本框中输入的内容实时的更新filterText。
在本次实例中，传入组件的外部数据形式如下：

本次实例最终的效果如下：
（1）文本框中输入与title相关的关键词
（2）文本框输入与category匹配的关键词

（3）文本框输入与text匹配的关键词