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,