1、什么是双向绑定、为什么需要双向绑定？

本人是先入坑的vue，所以在开发时已经习惯了vue的自动双向绑定。

什么是双向绑定呢？

在没有前端框架之前的开发时光中，我们都是直接操作页面的DOM元素（element）的。将某个变量赋值到某个页面元素时都是一次性的操作，在此之后变量值的修改并不会影响页面元素的内容变化；而页面元素（比如input框）的内容变更以后，也不会使对应变量的值发生变化，我们需要通过document.getElementById()的方法获取到页面元素，然后再根据元素对象的value获取变化以后的值再手动处理。

在vue中，框架已经帮我们自动实现了双向绑定，任何一方（哪怕是页面上纯显示的）也会自动变化。（以下代码中，变量name的变化会直接反应到input框中，而input框中值得修改也会反向引起name变量的值变化。）

<!-- Vue中一个最简单的双向绑定示例 --> <template> <div> <el-input v-model=“name” /> </div> </template> <script> export default { data() { return { name: "", } }, } </script> 

而到了react，发现并没有双向绑定的功能，有点懊糟。

NameShow.js import React from 'react'; class NameShow extends React.Component { myName = "" // 定义myName变量 render() { return ( <div> {/*尝试将myName变量绑定到input框上*/} <input value={this.myName}/> {/*获取myName，并直接显示在页面上*/} <div>My Name Is {this.myName}</div> </div> ) } } export default NameShow 

将以上组件引入APP中并添加到页面上启动，发现不仅无法双向绑定，甚至连修改input框的内容都没有任何反应，而且控制台有警告显示。大概的意思是value是只读的，值的修改必须通过onChange事件来修改。

所以添加一个onChange事件的handle方法handleChange以后再次启动。

NameShow.js import React from 'react'; class NameShow extends React.Component { myName = "" // 定义myName变量 handleChange = (event) => { // 此处需使用箭头函数，否则方法中的this将会识别为undefined console.log(event.target.value) this.myName = event.target.value } render() { return ( <div> {/*尝试将myName变量绑定到input框上*/} <input value={this.myName} onChange={this.handleChange}/> {/*获取myName，并直接显示在页面上*/} <div>My Name Is {this.myName}</div> </div> ) } } export default NameShow 

在输入框中输入内容以后，发现控制台有反应，正常拿到了修改以后的值，但是输入框和下面显示的内容却依旧没有变化。

2、React不支持双向绑定？非也

react并不是不支持双向绑定，而是双向绑定需要我们自己来实现。这时候就是react中的一个重要概念登场了——React State。

在菜鸟教程中的解释是这样的：React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。

现在回到上面那个例子，进行一下改造，由使用类成员变量myName改为使用state中的myName变量。

NameShow2.js import React from 'react'; class NameShow2 extends React.Component { constructor(props) { super(props); this.state = { // 注意1：此处需先对state进行初始化，不然编译会报错 myName: "" // 注意2：此处需要将变量在state中进行定义，否则会报警告 } } handleChange = (event) => { console.log(event.target.value) // this.state.myName = event.target.value // 注意3：此处直接赋值是无效的，一定要使用this的setState方法 this.setState( {myName: event.target.value} ) } render() { return ( <div> {/*尝试将myName变量绑定到input框上*/} <input value={this.state.myName} onChange={this.handleChange}/> {/*获取myName，并直接显示在页面上*/} <div>My Name Is {this.state.myName}</div> </div> ) } } export default NameShow2 

将以上组件引入APP中并添加到页面上启动，并在input框填入内容，发现下面的显示也同步改变了，并且控制台也有输出。

到此，一个简单的react双向数据绑定的流程就完成了。

3、小结

1. 在react中要实现数据的双向绑定，需要通过state来实现，

   根据菜鸟解释，react将每个组件都定义为状态机，通过state来改变和控制组件的状态。

2. 使用state之前需要先初始化，并且在state中定义所需要用到的变量，

   这个类似于vue中使用前先要在data部分定义变量。

   （一般使用时可以不用预先定义变量，只有在变量绑定对象为<input> <textarea> <select>时才需要，具体内容可以参考react官网相关解释。）

3. 直接对state进行赋值是无效的，需要使用setState方法来赋值，这样才能触发状态的改变，从而达到值传递的效果。

---

另外补充一点，在上述两个例子中都将handleChange方法都以箭头函数的方式进行定义，这是由于js的闭包导致的。

如果想将handleChange定义为普通方法，可以在构造函数中将this对象绑定到handleChange方法

 constructor(props) { super(props); this.state = { myName: "" } this.handleChange = this.handleChange.bind(this) // 将`this`对象绑定到`handleChange`方法 }