本文我们主要了解一下 React 中的响应式设计原理和数据的绑定方法，俗话说的好：”理论是磨好宝剑的唯一标准”。接下来我们不仅要编写效果，还要讲理论，本节很重要，因为这涉及React中的设计思想和你以后的编程思路。
响应式设计和数据的绑定
React不建议你直接操作DOM元素,而是要通过数据进行驱动，改变界面中的效果。React 会根据数据的变化，自动的帮助你完成界面的改变。所以在写 React 代码时，你无需关注 DOM 相关的操作，只需要关注数据的操作就可以了（这也是 React 如此受欢迎的主要原因，大大加快了我们的开发速度）。
现在的需求是增加美女的服务项，就需要先定义数据。数据定义在Meinv组件中的构造函数里constructor。
//js 的构造函数，由于其他任何函数执行
constructor(props){
super(props) //调用父类的构造函数，固定写法
this.state={
inputValue:'' , // input 中的值
list:[] //服务列表
}
}
在React中的数据绑定和Vue中几乎一样，也是采用字面量(我自己起的名字)的形式，就是使用{}来标注，其实这也算是 js 代码的一种声明。比如现在我们要把inputValue值绑定到input框中，只要写入下面的代码就可以了。其实说白了就是在 JSX 中使用 js 代码。
<input value={this.state.inputValue} />
现在需要看一下是不是可以实现绑定效果，所以把inputValue赋予一个’mybj’，然后预览看一下效果。在这里我们并没有进行任何的DOM操作，但是界面已经发生了变化，这些都时React帮我们作的，它还会自动感知数据的变化。
其实本文内容很重要，里边设计了React的重要思想，建议大家可以反复多看两遍，虽然不难，但是这是一个最基本的思想的转变。下节内容可要真的增加服务项目了，不要走开哦。