React中的响应式设计思想和事件绑定

这两个点是react入门非常重要的两个点，以前我们是直接操作dom的形式去做，react的设计思想和以前直接操作dom是完全不同的，react是一个响应式的框架，他在做编程的时候，强调的是我们不要直接操作dom。我们操作的是数据，通过数据的变化，react会自动感知到数据的变化，自动的帮你去生成dom。所以在写代码的时候，我们再也不用关注dom相关的操作了。我们只需要关注数据层的就可以了。

 

在react中如何定义数据呢？我们应该这么定义，TodoList这个组件，或者说他是一个类，在js里面

import React, {Component, Fragment} from 'react';

class TodoList extends Component{

　　constructor(props) {
　　　　super(props);
　　　　this.state = {
　　　　　　inputValue: 'hello!!!',
　　　　　　list: []
　　　　}
　　}

　　render(){
　　　　return (
　　　　　　<Fragment>
　　　　　　　　<div>
　　　　　　　　　　<input
　　　　　　　　　　　　value = {this.state.inputValue}
　　　　　　　　　　　　onChange = {this.handleInputChange.bind(this)}/>
　　　　　　　　　　<button> 提交 </button>
　　　　　　　　</div>
　　　　　　　　<ul>
　　　　　　　　　　<li>学英语</li>
　　　　　　　　　　<li>learn react</li>
　　　　　　　　</ul>
　　　　　　</Fragment>
　　　　)
　　}

　　handleInputChange(e) {
　　　　this.setState({
　　　　　　inputValue: e.target.value
　　　　})
　　}
}

export default TodoList;

 

一个类就一定会有个constructor构造函数，当我们去创建一个todolist实例或者当我们去使用组件的时候，constructor这个构造函数，会由于其它任何函数，会自动的最先被执行的一个函数，所以constructor是最优先执行的一个函数，constructor有一个固定的写法，会接收一个叫做props的参数。

 

super(props); 他的意思是什么？我的Todolist组件继承了React.Component这个组件，所以super指的是父类，也就是Component这个类。我要调用父类的构造函数，调用一次，这是js里面继承经常要做的一件事情。在react里面，如果写构造函数，都是要写这两句代码的。一个是接收props参数，一个是调用super这个方法，他是固定的一个写法。

 

主要是下面的定义数据，react里面定义数据，我们需要把数据定义在状态里面。this.state就是这个组件的状态，这个状态里面就可以存很多的东西。我们把input里面的value跟inputValue相关联，这样inputValue值变了， react会自动感知到，然后赋值给value。所以React之所以起名叫做React,就是这个原因，react在英文中是响应的意思。如果input的value=this.state.inputValue，在界面上怎么输都是inputValue的初始值，为什么？数据不发生改变，页面的值就不会发生改变，显然，这是不对的，我们希望input框可以接收我们的输入，input框可以绑定一些原生事件，比如onChange去监听他的变化。

 

在react中，如果想要改变react的状态，不能通过this.state这种引用的方式去改变他的值。react给每一个组件提供了一个方法，这个方法是setState,