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

通過 state 做 input 數(shù)據(jù)管理

通過 event.target.value 獲取input的值

通過 setState 更新 input 數(shù)據(jù)

通過 input的value綁定 state的值

｜ value={this.state.inputValue}

新增完后清空 input的值

｜ this.setState({inputValue: '' })

import?React?from?'react'

class?TodoList?extends?React.Component?{
??constructor(props){
????super(props);
????this.state?=?{
??????list:[],
??????inputValue:?'',
????}
??}

??handleBtnClick(){
????this.setState({
??????list:[...this.state.list,?this.state.inputValue],
??????inputValue:?''
????})
??}
??handleInputChange(e){
????this.setState({
??????inputValue:?e.target.value
????})
??}

??render(){
????return?(
??????<div>
????????<div>
??????????<input?value={this.state.inputValue}?onChange={this.handleInputChange.bind(this)}??/>
??????????<button?onClick={this.handleBtnClick.bind(this)}>添加</button>
????????</div>
????????<ul>
??????????{this.state.list.map((item,?index)=>{
????????????return?(<li?key={index}>{item}</li>)
??????????})}
????????</ul>
??????</div>
????)
??}
}

export?default?TodoList;

編寫TodoList功能

? ? 將 App組件 改成TodoList

? ? ? ? App文件重命名為 Todolist

? ? ? ? 類名改成Todolist， 導出 Todolsit

? ? ? ? index.js 引入 Todolist

? ? render 返回的最外層不能多兄弟標簽

? ? 事件名稱使用小駝峰命名

? ? 類里面方法中的this默認指向方法而不是類，所以需要對this做綁定

? ? 不能直接賦值 state，而是通過 setState()

? ? ...arr 數(shù)組展開運算符，可以用于追加內(nèi)容

? ? ｜ [...this.state.list, 'english']

簡單的JSX語法

? ? 可以用標簽結(jié)構(gòu)的代碼

? ? ｜ <div>Hello</div>

? ? 可以寫JS表達式

? ? ｜ {1+1}

什么是組件

? ? 從網(wǎng)頁的角度理解

? ? ? ? 組件是網(wǎng)頁組成的一部分

? ? React是一個基于組件開發(fā)的框架

? ? ? ? 組件用大寫字母開頭

? ? ? ? react-dom 用于掛載DOM

? ? ? ? ｜ ReactDOM.createRoot(document.getElementById('root'))

? ? ? ? ｜ #root 的div在 public/index.html 中

? ? App.js 是一個組件

? ? ? ? 組件中必須有一個 render()

? ? ? ? ? ? 里面必須有 return?

? ? ? ? export和import 配對使用

腳手架創(chuàng)建的代碼介紹

? ? index.js? ? →? 入口

? ? ? ? 引入 App.js?

可精簡文件

? ? reportWebVitals? ?→? 報錯文件

? ? index.css? ? →? 樣式文件

? ? App.test.js? ? →? 自動化測試用的

? ? App.css? ? →? 演示的樣式文件

? ? logo.svg? ? →? Logo圖片

nodeJs安裝

? ? nodeJs官網(wǎng)

? ? LTS 穩(wěn)定版本

? ? ｜ Long Term Support

? ? Current 最新版本

? ? 檢查nodeJs版本

? ? ? ? node -v

? ? 檢查 npm 版本

? ? ? ? npm -v

React 安裝

? ? Creact React APP 腳手架工具

? ? ? ? npx create-react-app todoList? ? →? 會創(chuàng)建todoList文件夾

? ? ? ? cd todoList? ? →? 進入文件夾

? ? ? ? npm start? ? →? 運行項目

React應用場景

• React?JS? ?→? 網(wǎng)頁

  React Native?→? 手機APP

• React?VR? ?→? VR全景視圖

React Fiber

• React 16之后的版本

• 新特性：優(yōu)先級、分片
  

子組件如果想和父組件通信，要調(diào)用父組件傳遞過來的方法

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

子組件通過props接收父組件傳遞過來的參數(shù)

React開發(fā)環(huán)境搭建

--------------------------

【1】安裝?nodejs （官網(wǎng)：LTS版本）

【2】安裝?create-react-app? （官網(wǎng)：docs 右側(cè)）

【3】在目錄通過命令創(chuàng)建項目：cra XXXXX

【4】運行項目?npm?start

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

子組件通過props接收父組件傳遞過來的參數(shù)

子組件通過調(diào)用父組件傳遞過來的方法實現(xiàn)與父組件的通信

創(chuàng)建子組件

import?{Component}?from?'react'
class?TodoItem?extends?Component{
??????constructor(props){
??????????//優(yōu)化
??????????this.itemDel?=?this.itemDel.bind(this)
??????}
??????itemDel(){
??????????this.props.itemDel()
??????????
??????????//const?{?itemDel?}?=?this.props
??????????//itemDel()
??????}
????
????render(){
????????const?{?content?}?=?this.props?//結(jié)構(gòu)賦值
????????return(
??????????<div?onClick={this.itemDel}>
????????????{content}
????????</div>
??????)
????}
}

export?default?TodoItem

父組件引入子組件

import?{Component,Fragment}?from?'react'
import?TodoItem?from?'./TodoItem'

itemDel(index){
????let?list=[...this.state.list]
????list.splice(index,1)
????this.setState({list})
}

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

render(){
????return(
????????<Fragment>
????????????<div>
????????????????<input?className='input-style'?value={this.state.inputVal}?onChange={this.inputChange}/>
????????????????<button?style={{background:'blue',color:'#fff'}}?onClick={this.butClick}>add</button>
????????????</div>?
????????????<ul>{this.getTodoItems()}</ul>
????????</Fragment>
????)
}

//函數(shù)組件寫法

const?ToDoList=()=>?{
????const?[val,setVal]?=?useState('')
????const?[list,setList]?=?useState([])
???
????const?butClick=()=>{
??????setList([...list,val])
??????setVal('')
????}
????const?inputChange=(e)=>{
??????setVal(e.target.value)
????}
????const?itemDel=(e)=>{
??????let?newList=list
??????let?i=e.target.dataset.inx
??????newList.splice(i,1)
??????setList([...newList])
????}
????useEffect(()=>{
??????console.log(list)
????},[list])
????
??return?(
????<div?className="ToDoList">
??????<div>
????????<input?value={val}?onChange={inputChange}?/>
????????<button?onClick={butClick}>add</button>
??????</div>
??????<ul>
????????{
??????????list.map((item,index)=>{
????????????return?<li?key={index}?data-inx={index}?onClick={itemDel}>{item}</li>
??????????})
??????????//其他傳參方式?這兩種每次組件渲染時會創(chuàng)建一個新的函數(shù)影響性能
??????????//箭頭函數(shù)?onClick={()=>itemDel(index)}??綁定?onClick={itemDel.bind(this,index)}
????????}
??????</ul>
????</div>
??);
}

? ? ? ?

React面向數(shù)據(jù)編程，自動處理DOM

class組件

constructor(props){?//組件創(chuàng)建時自動執(zhí)行
????super(props);?//初始化
????this.state?=?{?//創(chuàng)建state對象
????????list:[],
????????inputVal:''
????}
????
????//優(yōu)化
????this.inputChange?=?this.inputChange.bind(this)
????this.butClick?=?this.butClick.bind(this)
????
}

btnClick()?{//增加
????this.setState({//改變state數(shù)據(jù)
????????list:?[...this.state.list,this.state.inputVal],
????????inputVal:''
????})
}

inputChange(e)?{//輸入框內(nèi)容
????this.setState({
????????inputVal:?e.target.value
????})
}

itemDel(index){//刪除
????let?list=[...this.state.list]
????list.splice(index,1)
????this.setState({list})
}

//DOM
render(){
????return(
????????<div>
????????????<div>
????????????????<input?value={this.state.inputVal}?onChange={this.inputChange}/>
????????????????<button?onClick={this.butClick}>add</button>
????????????</div>?
????????????<ul>
????????????????{
????????????????????this.state.list.map((item,index)?=>?{??//循環(huán)list
????????????????????????return?<li?key={index}?onClick={this.itemDel.bind(this,index)}>{item}</li>
????????????????????})
????????????????}
????????????</ul>
????????</div>
????)
}

?? ? ?

JSX語法

是一種JavaScript語法擴展，在React中可以方便地用來描述UI

在JSX中插入JavaScript表達式： {JS表達式}

JS表達式就是一個短語，常用的表達式有：

常量

變量名；

函數(shù)定義表達式；

屬性訪問表達式；

函數(shù)調(diào)用表達式；

算數(shù)表達式；

關系表達式；

邏輯表達式；

if語句以及for循環(huán)不是JavaScript表達式，不能直接作為表達式寫在{}中，但可以先將其賦值給一個變量

React基于組件開發(fā)

用戶定義的組件必須以大寫字母開頭

以小寫字母開頭的元素代表一個 HTML 內(nèi)置組件
比如?<div>?或者?<span>?會生成相應的字符串?'div'或者?'span'?傳遞給?React.createElement（作為參數(shù)）。

ReactDOM將組件掛載到頁面dom節(jié)點上，渲染dom

ReactDOM.render(<App?/>,document.getElementById('root'));

定義React組件

class?組件名??extends??Component{
????render(){???????????????????????//必有函數(shù)，負責要顯示的內(nèi)容
????????return(
?????????????//要顯示的內(nèi)容
?????????）；?
?????}}

新版

function?App()?{
??return?(
??
??);
}
export?default?App;