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

flag,點(diǎn)贊按鈕

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

context提供了在組件中共享此類值的方法

設(shè)計(jì)目的：共享對(duì)于組件來(lái)說(shuō)的全局?jǐn)?shù)據(jù)

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

• 狀態(tài)提升：
  

將共享的狀態(tài)提升至最近的父組件進(jìn)行管理

• 自上而下的數(shù)據(jù)流 top-down data flow
  

任何可變數(shù)據(jù)只有一個(gè)數(shù)據(jù)源，在數(shù)據(jù)源對(duì)數(shù)據(jù)進(jìn)行管理

• 和雙向綁定的區(qū)別：
  

需使用回調(diào)函數(shù)

便于尋找debug

實(shí)例分析?

組件：

評(píng)論列表 CommentList.js

留下評(píng)論 CommentBox.js

狀態(tài)：

狀態(tài)提升—>父組件管理 App.js

State: {comments: []}

數(shù)據(jù)流向：?jiǎn)蜗驍?shù)據(jù)流Top-down flow。從父組件流入子組件

表單元素和其他DOM元素的區(qū)別

Controlled Components - 受控組件

例：留言框

非受控組件：表單的替代技術(shù) 保存到dom，更容易集成

• 組件初始化

constructor componentDidMount

• 組件更新
  

New props setState() forceUpdate() —>render ?componentDidUpdate

• 組件卸載
  

componentWillUnmount

舉例：電子鐘表

初始化當(dāng)前時(shí)間

組件添加定時(shí)器

組件刪除

• 屬性：不可變，外部傳入
  

• 狀態(tài)（state）：可變，私有
  

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

This.setState()是更新state的唯一途徑

例：點(diǎn)贊按鈕

Props（屬性）

組件—函數(shù)，輸入—輸出

V = f(props)

例： 一張名片

樣式：bootstrap foo，通過(guò)npm安裝在my-first-react工程文件夾中

在index.js中引用bootstrap

屬性是只讀的

純函數(shù)：不改變函數(shù)的值

非純函數(shù)

jsx只支持純函數(shù)

這奇怪的HTML被編譯成什么？

BABEL在線編譯工具

一種語(yǔ)法糖，替代React.createElement()

返回的是ReactElement對(duì)象，此對(duì)象的屬性比較復(fù)雜，本質(zhì)上是Object

基本語(yǔ)法

花括號(hào)內(nèi)添加 JavaScript表達(dá)式

例：{’String’} 直接輸出

{12 + 2}計(jì)算后可直接輸出

{[1, 2, 3]}類似Repeat

Render(){

const todoList = [‘Learn React’, ‘Learn Redux’]

Return(

<div>

<h1> Hello React</h1>

<ul>

{

todoList.map(item =>

<li>{item}</li>?

)

}

</ul>

</div>

)

}

Render(){

const isLogin = true

return(

<div>

<h1>Hello React</h1>

{isLogin ? <p>你已經(jīng)登錄</p> :<p>請(qǐng)登錄</p>}

</div>

)

}

兩個(gè)特殊屬性

class ? className

for ? ?htmlFor

其他屬性與HTML屬性一致

#Readme

項(xiàng)目文檔

#package.json

項(xiàng)目依賴、命令

#public公共文件

index.html：主頁(yè) root節(jié)點(diǎn)是程序的主入口

#src文件

app文件與樣式文件

#新建組建(使用es6的語(yǔ)法)

1，src文件夾下，創(chuàng)建Welcome.js

2，引入依賴 import

3，新建類 extends React.component

4，新建render(){}方法，顯示結(jié)果

????return <h1> Hello React</h1>

5，導(dǎo)出整個(gè)類

????export default Welcome

6，把Welcome component掛在到節(jié)點(diǎn)上

????打開index.js，使用ReactDOM進(jìn)行掛載

1，進(jìn)入剛才創(chuàng)建的代碼

cd my-first-react

2，查看package.json文件

cat pakcage.json

發(fā)現(xiàn)已內(nèi)置npm命令（npm start, npm build, npm test, npm eject）

3，npm start

terminal自動(dòng)化啟動(dòng)并在chrome中打開localhost:3000

# 準(zhǔn)備開發(fā)環(huán)境

1，官方腳手架工具 create-react-app

所需工具：terminal，node（版本大于6.5），npm

npm install create-react-app -g

2，創(chuàng)建項(xiàng)目

create-react-app my-first-react

開始自動(dòng)安裝依賴，耗時(shí)大概幾分鐘。

JSX，其實(shí)是一種語(yǔ)法糖——React.createElement()，它返回的是ReactElement對(duì)象。