第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

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

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

this.setStete ({

?list: ls

});

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

即不建議這樣寫：

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

this.setState({

????list: this.state.list

});

<input 輸入標(biāo)簽 添加onChange輸入改變事件，綁定某個(gè)方法。

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

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

this.setState{

????inputValue: e.target.value

}

點(diǎn)擊事件獲取inputValue的值，this.state.inputVaule

<input value={this.state.inputValue} 表示輸入標(biāo)簽的值綁定inputValue當(dāng)值改變時(shí)輸入標(biāo)簽也跟著刷新

用于點(diǎn)擊事件置空inputValue的值時(shí)，<input 標(biāo)簽也變?yōu)榭铡?/p>

constructor 為組件創(chuàng)建的時(shí)候會(huì)執(zhí)行的構(gòu)造函數(shù)。

this.state 為組件數(shù)據(jù)項(xiàng)，可以存儲(chǔ)很多數(shù)據(jù)內(nèi)容。

循環(huán)獲取state定義的list里面的內(nèi)容

{

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

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

})

}

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

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

而需要調(diào)用this.setState方法和展開運(yùn)算符語法添加到list。

setState數(shù)據(jù)發(fā)生變化時(shí)界面才會(huì)發(fā)送變化。

增加第二個(gè)參數(shù)返回（item, index）index 為list數(shù)組的下標(biāo)，

<li 標(biāo)簽增加 key={index} 去除沒有key警告（注意key值不能重復(fù)）

jsx 語法

可以在標(biāo)簽內(nèi)寫JS表達(dá)式語句，如：{ 1 + 2}

不能這樣寫，JS判斷語句是會(huì)報(bào)錯(cuò)的

組件是網(wǎng)頁上的一部分，可以是一整塊，或一個(gè)輸入框，或一個(gè)按鈕，或一個(gè)顯示的區(qū)域

React 中以大寫開頭的都是一個(gè)組件。

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

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

創(chuàng)建一個(gè)組件，繼承Componect，注意import React, { Component } from 'react';?

還要注意Export 表示導(dǎo)出組件。

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

ReactFiber是React16之后的版本

行內(nèi)樣式使用對象的方式編碼

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

class改名為 className

｜ className='add-btn'

導(dǎo)入樣式文件

｜ import './style.css'

如果不想render最外層div，使用 React.Fragment標(biāo)簽

｜ <React.Fragment>

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

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

｜ </React.Fragment>

將this綁定放到結(jié)構(gòu)方法中，能提高性能

????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 解構(gòu)賦值的寫法

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>

父組件將數(shù)組索引傳給子組件

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

? ? 通過 index屬性傳遞數(shù)組下標(biāo)

? ? 子組件通過 props.index 獲得下標(biāo)

子組件跟父組件通信，需要調(diào)用父組件傳遞過來的方法

｜ 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接收父組件參數(shù)

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

React不直接操作DOM，刪除功能操作的是數(shù)據(jù)

通過數(shù)據(jù)下標(biāo)做刪除功能，下標(biāo)一般用數(shù)據(jù)庫id，實(shí)在沒辦法采用數(shù)組索引

通過 splice方法做數(shù)組刪除

｜ list.splice(index, 1);

盡量不要直接操作 state數(shù)據(jù)，而是復(fù)制出一個(gè)副本

｜ const list = this.state.list;

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