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

創(chuàng)建Context對(duì)象

把想要使用Context數(shù)據(jù)的節(jié)點(diǎn)換成<定義的文件名.Provider></定義的文件名.Provider>

Context 全局?jǐn)?shù)據(jù)

由上而下的數(shù)據(jù)流 單向數(shù)據(jù)流 所以數(shù)據(jù)處理放在父組件中
子組件向父組件傳值：this.props.方法名(值)

受控組件

非受控組件 將真實(shí)數(shù)據(jù)保存在dom中 因此在使用非受控組件時(shí) 更容易同時(shí)集成React和非React的代碼 如果想要快速而隨性、并且減少代碼量 可以使用非受控組價(jià) 否則需要使用受控組件

示例 使用到了某些生命周期

組件的生命周期：
組件初始化、組件更新、組件卸載

1. constructor 數(shù)據(jù)的初始化

   
   

2. componentWillMount 在掛載前也就是render之前被調(diào)用

   
   

3. getDerivedStateFromProps 從props中獲取到state

   
   

4. render 插入jsx生成的dom結(jié)構(gòu)

   
   

5. componentDidMount 組件掛載后立即調(diào)用 通常在這調(diào)用ajax請(qǐng)求

   
   

6. getDerivedStateFromProps

   
   

7. shouldComponentUpdate 到新的props或者state時(shí)都會(huì)調(diào)用，通過(guò)返回true或者false告知組件更新與否

   
   

8. render

   
   

9. getSnapshotBeforeUpdate

   
   

10. componentDidUpdate 組件更新結(jié)束后觸發(fā)

    
    

11. componentWillUnmount

點(diǎn)擊事件（兩種方式）

onClick={this.handleClick.bind(this)}

onClick={() => {this.handleClick()}}

State
this.setState 更改State中的值

constructor

這是ES6對(duì)類(Class)的默認(rèn)方法，一般用于數(shù)據(jù)初始化，通過(guò)?new?命令生成對(duì)象實(shí)例時(shí)自動(dòng)調(diào)用該方法。并且，該方法是類中必須有的，如果沒(méi)有顯示定義，則會(huì)默認(rèn)添加。

super

繼承它的父級(jí)

子類必須在constructor() 中調(diào)用 super() ，否則新建實(shí)例時(shí)會(huì)報(bào)錯(cuò)

Props

父組件向子組件傳輸數(shù)據(jù)：

子組件接收父組件的數(shù)據(jù)（props）：

子組件接收的值是只讀的（要像純函數(shù)一樣使用props參數(shù)）

在一個(gè)函數(shù)內(nèi) 不改變接收的參數(shù)稱為純函數(shù)

JSX被babel編譯過(guò)
JSX只是一種語(yǔ)法糖 是React.createElement的語(yǔ)法糖
（簡(jiǎn)單明了易懂）

jsx

是JavaScript的一種語(yǔ)法擴(kuò)展（內(nèi)部實(shí)現(xiàn)的）
語(yǔ)法是{} 可寫入表達(dá)式
寫入樣式 className
htmlFor??HTML?標(biāo)簽的 for 屬性?規(guī)定 label 與哪個(gè)表單元素綁定

Render方法 代表組件渲染出來(lái)的結(jié)果
ReactDom.render方法 可以把寫好的組件掛載在dom節(jié)點(diǎn)上

npm install create-react-app -g
create-react-app project-name

聲明式的寫法；組件化；一處學(xué)習(xí)，隨處編寫

狀態(tài)提升

單項(xiàng)數(shù)據(jù)流

組件初始化：

組件更新

組件卸載

React屬性
class?Namecard?extends?React.Component?{
????render(){
??????const?{?name,?number,?isHuman,?tags?}?=?this.props
??????return(
????????<div>
??????????<h4>{name}</h4>
??????????<ul>
???????????<li>電話：1234567890</li>
???????????<li>{?isHuman???'人類'?：'外星生物'}</li>
???????????<hr/>
???????????<p>
???????????{?tags.map((tag,?index)?=>?(
???????????????<span>?{tag}</span>
???????????))}
???????????</p>
??????????</ul>
????????</div>
??????)
????}
}
export?default?NameCard

JSX:JavaScript的語(yǔ)法擴(kuò)展，也為Js的語(yǔ)法糖，可以使用{}內(nèi)嵌任何JavaScript表達(dá)式，Jsx屬性
class?welcom?extends?React.component?{
????render(){
??????const?todolist?=?['Learn?React',?'Learn?Redux']
??????return(
??????????<div>
??????????????<h1>Hello?React</h1>
??????????????<ul>?
??????????????{
??????????????todolist.map(item?=>
??????????????<li>{item}</li>
??????????????)
??????????????}
??????????????</ul>
??????????</div>
??????)
????}
}
????export?default?Welcome

State（狀態(tài)）

組件內(nèi)部的數(shù)據(jù) 可以動(dòng)態(tài)改變

Props（屬性）

組件像一個(gè)函數(shù)一樣，接受特定的輸入（props），產(chǎn)出特定的輸出（React elements）

V = f(props)

Props屬性是由上到下單向傳遞的

Context提供了在組件中共享此類值的方法，設(shè)計(jì)目的是共享那些對(duì)于組件來(lái)說(shuō)全局的數(shù)據(jù)

不要僅僅為了避免在幾個(gè)層級(jí)下的組件傳遞props而使用context

JSX是一種語(yǔ)法糖

JSX是一種JavaScript語(yǔ)法擴(kuò)展

用花括號(hào)，在其中添加任意的表達(dá)式

屬性與html屬性非常一直，不同點(diǎn)在于類用className，for改為htmlFor

React? 用于創(chuàng)建用戶界面的JavaScript庫(kù)

聲明式的寫法

組件化

一次學(xué)習(xí)，隨處編寫

在 react 中，創(chuàng)建某一個(gè)響應(yīng)式數(shù)據(jù)可以使用在 this.state = {} 中添加屬性的方法，這一點(diǎn)和 Vue 有明顯的不同，Vue 是在 data 屬性中添加響應(yīng)式數(shù)據(jù)；

?class?LikeBtn?extends?React.component?{?
?????constructor(props)?{
?????super(props)
?????this.state?=?{
?????????likes:?0
?????}
?????}
}

在 react 中，添加事件和事件監(jiān)聽(tīng)函數(shù)：

例如：點(diǎn)擊事件:??onclick、事件監(jiān)聽(tīng)函數(shù): increaseLikes

使用駝峰命名原生 JS 事件onClick

并在 {} 中添加 this.increaseLikes

第一種寫法：

increaseLikes()?{
????//?...
}
render()?{
????return?(
????????<button?onClick={this.increaseLikes}>?like+?</button>
????)
}

第二種寫法：

increaseLikes()?{
????//?...
}
render()?{
????return?(
????????<button?onClick={()?=>?{this.increaseLikes()}}>?like+?</button>
????????{?this.state.likes?}
????)
}

上述兩種寫法，在 JSX 種使用箭頭函數(shù)可以省略在組件 constructor? 中在 this.increaseLikes 上綁定 this 的步驟；

如果不使用箭頭函數(shù)，必須要在組件 constructor? 中在 this.increaseLikes 上綁定 this，否則在事件監(jiān)聽(tīng)函數(shù)中 this 為 undefined；

在事件監(jiān)聽(tīng)函數(shù)中更改 state 里的數(shù)據(jù)時(shí)，需要使用 this.setState() 方法，傳入對(duì)象，這里的對(duì)象就是 state 對(duì)象，用更改對(duì)象屬性的方法更改 state 中的數(shù)據(jù)；

1111

5555

yyy

11111