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,