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,