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方法。