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

import?React?from?'react';

//React避免?Dom?操作，主要是面向數(shù)據(jù)操作;
??class?ToDoList?extends?React.Component{

??????//state存放數(shù)據(jù)的地方；
??????constructor(props){
??????????super(props);
??????????this.state?=?{
?????????????list:[],
?????????????inputValue:''
??????????}

??????}

??????//修改state用setState；
??????handleBtnClick(){
??????????this.setState({
??????????????list:[
??????????????????...this.state.list,//...:數(shù)組展開符；
??????????????????this.state.inputValue
??????????????],
??????????????inputValue:''//為了讓點(diǎn)擊后input值清空；
??????????});
??????}

??????//監(jiān)聽input值變化；
??????handleBtnChange(e){
??????????this.setState(
??????????????{
??????????????????inputValue:e.target.value?//獲取變化值；
??????????????}
??????????);
??????}

??????//刪除點(diǎn)擊的列表項(xiàng)；
??????handleItemDelet(index){

??????????//這一步相當(dāng)于復(fù)制list（即副本）；在React中對(duì)state數(shù)據(jù)進(jìn)項(xiàng)操作時(shí)，建議對(duì)副本操作，提高代碼可調(diào)實(shí)性；
??????????const?list?=?[...this.state.list];
??????????list.splice(index,1);
??????????this.setState({
??????????????list????//list?:?list的簡(jiǎn)化，當(dāng)key=value時(shí)可簡(jiǎn)化；
??????????})


??????}
????render(){
??????return?(
??????????<div>
??????????????<div>
??????????????????<input?value={this.state.inputValue}?onChange={this.handleBtnChange.bind(this)}></input>
??????????????????<button?onClick={this.handleBtnClick.bind(this)}>add</button>
??????????????</div>
??????????????<ul>
??????????????????{this.state.list.map((item,index)=>{????//循環(huán)list；
??????????????????????return?<li?key={index}?onClick={this.handleItemDelet.bind(this,index)}>{item}</li>
??????????????????})}
??????????????</ul>
??????????</div>
??????);
????}
}


export?default?ToDoList;

import?React?from?'react';

//React避免?Dom?操作，主要是面向數(shù)據(jù)操作;
??class?ToDoList?extends?React.Component{

??????//state存放數(shù)據(jù)的地方；
??????constructor(props){
??????????super(props);
??????????this.state?=?{
?????????????list:[],
?????????????inputValue:''
??????????}

??????}

??????//修改state用setState；
??????handleBtnClick(){
??????????this.setState({
??????????????list:[
??????????????????...this.state.list,//...:數(shù)組展開符；
??????????????????this.state.inputValue
??????????????],
??????????????inputValue:''//為了讓點(diǎn)擊后input值清空；
??????????});
??????}

??????//監(jiān)聽input值變化；
??????handleBtnChange(e){
??????????this.setState(
??????????????{
??????????????????inputValue:e.target.value//獲取變化值；
??????????????}
??????????);
??????}
????render(){
??????return?(
??????????<div>
??????????????<div>
??????????????????<input?value={this.state.inputValue}?onChange={this.handleBtnChange.bind(this)}></input>
??????????????????<button?onClick={this.handleBtnClick.bind(this)}>add</button>
??????????????</div>
??????????????<ul>
??????????????????{this.state.list.map((item,index)=>{//循環(huán)list；
??????????????????????return?<li?key={index}>{item}</li>
??????????????????})}
??????????????</ul>
??????????</div>
??????);
????}
}


export?default?ToDoList;

import?React?from?'react';

//React避免?Dom?操作，主要是面向數(shù)據(jù)操作;
??class?ToDoList?extends?React.Component{

??????//state存放數(shù)據(jù)的地方；
??????constructor(props){
??????????super(props);
??????????this.state?=?{
?????????????list:[
?????????????]
??????????}

??????}

??????//修改state用setState；
??????handleBtnClick(){
??????????this.setState({
??????????????list:[
??????????????????...this.state.list,
??????????????????'add?css'
??????????????]
??????????});
??????}
????render(){
??????return?(
??????????<div>
??????????????<div>
??????????????????<input></input>
??????????????????<button?onClick={this.handleBtnClick.bind(this)}>add</button>
??????????????</div>
??????????????<ul>
??????????????????{this.state.list.map((item,index)=>{
??????????????????????return?<li?key={index}>{item}</li>
??????????????????})}
??????????????</ul>
??????????</div>
??????);
????}
}


export?default?ToDoList;

React.Fragment? 等價(jià)于導(dǎo)入的Fragment

組件最外層的div可以使用 React.Fragment元素代替，在渲染時(shí)不會(huì)顯示最外層標(biāo)簽。

[...arr,aa] 展開運(yùn)算符

jsx中只能寫表達(dá)式不能寫語句，此寫法錯(cuò)誤。

react Fiber 是react Fiber之后的版本統(tǒng)稱

第一步： 安裝 node??

第二步 ：利用腳手架 創(chuàng)建項(xiàng)目 npx create-react-app todolist

第三步：進(jìn)入 todolist 文件后 運(yùn)行項(xiàng)目 npm start

react fiber? 是指 react 16之后的版本所對(duì)應(yīng)的 react ，對(duì)底層的核心算法進(jìn)行了改良，引入了一些優(yōu)先級(jí)的概念等，使代碼運(yùn)行的更加流暢

jsx中的花括號(hào)中只能寫表達(dá)式，而不能寫語句。

// 父組件通過屬性的形式向子組件傳遞參數(shù)

// 子組件通過props接口父組件參數(shù)

React.Fragment?忽略render中的最外層外套

React學(xué)習(xí)官網(wǎng)：

????https://reactjs.org/

????????????docs

????????????tutorial