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

import?React?from?'react';

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

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

??????}

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

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

??????//刪除點擊的列表項；
??????handleItemDelet(index){

??????????//這一步相當于復制list（即副本）；在React中對state數據進項操作時，建議對副本操作，提高代碼可調實性；
??????????const?list?=?[...this.state.list];
??????????list.splice(index,1);
??????????this.setState({
??????????????list????//list?:?list的簡化，當key=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)=>{????//循環list；
??????????????????????return?<li?key={index}?onClick={this.handleItemDelet.bind(this,index)}>{item}</li>
??????????????????})}
??????????????</ul>
??????????</div>
??????);
????}
}


export?default?ToDoList;

import?React?from?'react';

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

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

??????}

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

??????//監聽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)=>{//循環list；
??????????????????????return?<li?key={index}>{item}</li>
??????????????????})}
??????????????</ul>
??????????</div>
??????);
????}
}


export?default?ToDoList;

import?React?from?'react';

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

??????//state存放數據的地方；
??????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? 等價于導入的Fragment

組件最外層的div可以使用 React.Fragment元素代替，在渲染時不會顯示最外層標簽。

[...arr,aa] 展開運算符

jsx中只能寫表達式不能寫語句，此寫法錯誤。

react Fiber 是react Fiber之后的版本統稱

第一步： 安裝 node??

第二步 ：利用腳手架 創建項目 npx create-react-app todolist

第三步：進入 todolist 文件后 運行項目 npm start

react fiber? 是指 react 16之后的版本所對應的 react ，對底層的核心算法進行了改良，引入了一些優先級的概念等，使代碼運行的更加流暢

jsx中的花括號中只能寫表達式，而不能寫語句。

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

// 子組件通過props接口父組件參數

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

React學習官網：

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

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

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