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

以前我们是直接操作dom的形式，而react的设计思想完全不同，react是一个响应式框架。react强调我们不要直接操作dom，我们操作的是数据，通过数据的变化，react会感知到数据的变化，自动的帮我们生成dom。因此，我们在写代码的时候，再也不用关注dom相关的操作，只需要关注数据层的就可以了。

下面定义了一个TodoList 组件

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>学习数学</li>
                </ul>
            </Fragment>
        );
    }
    handleInputChange(e) {
        this.setState({
            inputValue: e.target.value
        });
    }
}
export default TodoList;

在 App.js 中引入TodoList 组件

import React,{Component} from 'react';
import TodoList from './TodoList';

class App extends Component {
  render(){
    return (
      <div>
        <TodoList />
      </div>
    );
  }
}
export default App;

1. 在react 中如何定义数据呢？TodoList 这个组件，也是一个类，在 js 里面，一个类就一定会有一个 constructor 构造函数。当我们使用这个组件时， constructor是优于其他任何函数最先被执行的一个函数。react里面定义数据，我们需要把数据定义在状态里。this.state 就是这个组件的状态，这个状态里面可以存很多东西。

2. 调用父类的构造函数，super(props); 这是固定写法，也就是TodoList继承了的React中的Component组件，所以要在创建TodoList的时候，调用父类构造函数一次。

3. 我们把input里的value与状态里的inputValue相关联，如果状态里的inputValue值变了，react会自动感知到，然后赋值给value。接着，我们需要给input绑定一些事件，比如onChange 去监听其变化。onChange 会接收一个事件对象e， 通过e.target.value 获取到要输入的内容。将要输入的内容赋值给状态里的inputValue，inputValue值发生改变，react 自动将inputValue值赋值给value。调用函数，需要用bind函数来改变this指向

4. 怎样改变 state 中的 inputValue 的值呢？首先要记住，不能通过this.state.inputValue = e.target.value 这种方式去改变它的值。react 给每个组件都提供了一个setState方法。