亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

const ls = [...this.tate.list]; 表示拷貝list的值到ls

ls.splice(index, 1); 表示刪除副本的一個值。

this.setStete ({

?list: ls

});

不建議直接操作原來的數組，這樣寫性能低下，有些新特性無法使用。

即不建議這樣寫：

this.state.list.splice(index, 1);

this.setState({

????list: this.state.list

});

<input 輸入標簽 添加onChange輸入改變事件，綁定某個方法。

console.log(e.target.value); 控制臺打印傳遞輸入的值

使用setState傳值給定義的inputValue，只要值發生變化界面也跟著刷新

this.setState{

????inputValue: e.target.value

}

點擊事件獲取inputValue的值，this.state.inputVaule

<input value={this.state.inputValue} 表示輸入標簽的值綁定inputValue當值改變時輸入標簽也跟著刷新

用于點擊事件置空inputValue的值時，<input 標簽也變為空。

constructor 為組件創建的時候會執行的構造函數。

this.state 為組件數據項，可以存儲很多數據內容。

循環獲取state定義的list里面的內容

{

this.state.list.map((itxx) => {

????return <li>{itxx}</li>

})

}

使用.bind(this) 語句表示綁定父組件，不然子組件里面的this表示當前而無法找到this.state

this.state.list.push('xxx'); 無法添加數據到list并改變組件顯示，

而需要調用this.setState方法和展開運算符語法添加到list。

setState數據發生變化時界面才會發送變化。

增加第二個參數返回（item, index）index 為list數組的下標，

<li 標簽增加 key={index} 去除沒有key警告（注意key值不能重復）

jsx 語法

可以在標簽內寫JS表達式語句，如：{ 1 + 2}

不能這樣寫，JS判斷語句是會報錯的

組件是網頁上的一部分，可以是一整塊，或一個輸入框，或一個按鈕，或一個顯示的區域

React 中以大寫開頭的都是一個組件。

import React from 'react' 表示引入react語法。

引入的'react-dom' 別名ReactDOM 去加載APP這個組件。

創建一個組件，繼承Componect，注意import React, { Component } from 'react';?

還要注意Export 表示導出組件。

或這樣寫，但繼承變成：React.Component 組件。

ReactFiber是React16之后的版本

行內樣式使用對象的方式編碼

｜? style={{'background': 'red'}}?

class改名為 className

｜ className='add-btn'

導入樣式文件

｜ import './style.css'

如果不想render最外層div，使用 React.Fragment標簽

｜ <React.Fragment>

｜? ?<div>...</div>

｜? ?<ul>{this.getTodoItems()}</ul>

｜ </React.Fragment>

將this綁定放到結構方法中，能提高性能

????this.handleInputChange?=?this.handleInputChange.bind(this);
????this.handleBtnClick?=?this.handleBtnClick.bind(this);
????this.handleItemChange?=?this.handleItemChange.bind(this);

給render()里面的 return 加上括號，方便寫多行

????????return?(
??????????<TodoItem
????????????deleteItem={this.handleItemChange}
????????????key={index}
????????????content={item}?/>
????????)

使用ES6 解構賦值的寫法

const?{?deleteItem,?index}?=?this.props;
deleteItem(index)

把代碼量比較多的item提取成方法

??getTodoItems(){
????return?(
??????this.state.list.map((item,?index)?=>?{
????????return?(
??????????<TodoItem
????????????deleteItem={this.handleItemChange}
????????????key={index}
????????????content={item}?/>
????????)
??????})
????)
??}

<ul>{this.getTodoItems()}</ul>

父組件將數組索引傳給子組件

｜ <TodoItem delete={this.handleItemChange.bind(this)} key={index} content={item} />

? ? 通過 index屬性傳遞數組下標

? ? 子組件通過 props.index 獲得下標

子組件跟父組件通信，需要調用父組件傳遞過來的方法

｜ this.props.delete(index)

父組件通過屬性給子組件傳參，子組件通過事件跟父組件通信

拆分TodoItem組件

import?React?from?"react";

class?TodoItem?extends?React.Component?{
????render(){
????????return?(
????????????<div>{this.props.content}</div>
????????)
????}
}

export?default?TodoItem;

React有父子組件的概念，TodoList為父組件，TodoItem為子組件，

? ? 父組件通過屬性給子組件傳參

? ? ｜ <TodoItem content={item} />

? ? 子組件通過props接收父組件參數

? ? ｜ <div>{this.props.content}</div>

React不直接操作DOM，刪除功能操作的是數據

通過數據下標做刪除功能，下標一般用數據庫id，實在沒辦法采用數組索引

通過 splice方法做數組刪除

｜ list.splice(index, 1);

盡量不要直接操作 state數據，而是復制出一個副本

｜ const list = this.state.list;

??handleItemChange(index){
????const?list?=?this.state.list;
????list.splice(index,?1);
????this.setState({?list?})
??}