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

const?OrderItem?=?(props)?=>?{
????const?[item,setItem]?=?useState(props.content)
????const?[editing,setEditing]?=?useState(false)
????const?[commentVal,setCommentVal]?=?useState(item.commentVal?||?'')
????const?[star,setStar]?=?useState(item.star?||?0)
????//評論框
????const?domCommentBox=()?=>{
????????return?(
????????????<div?className='orderItem__commentBox'>
????????????????<textarea?className='orderItem__edit'?value={commentVal}?onChange={commentChange}></textarea>
????????????????{domCommentStar()}
????????????????<button?className='orderItem__btn?orderItem__btn--save'?onClick={commentSave}>提交</button>
????????????????<button?className='orderItem__btn?orderItem__btn--cancel'?onClick={commentCancel}>取消</button>
????????????</div>
????????)
????}
????//評星級
????const?domCommentStar=()=>{
????????return(
????????????<div?className='orderItem-star'>
????????????????{
????????????????????[1,2,3,4,5].map((i,index)=>{
????????????????????????const?light?=?star?>=?i???"orderItem-star--light"?:?""
????????????????????????return?<span?className={light}?key={index}?onClick={starClick.bind(this,i)}>★</span>
????????????????????})
????????????????}
????????????</div>
????????)
????}
????const?starClick=(i)=>{
????????setStar(i)
????}
????const?commentClick=()=>{
????????setEditing(true)
????}
????const?commentChange=(e)=>{
????????setCommentVal(e.target.value)
????}
????const?commentCancel=()=>{
????????setEditing(false)
????????setCommentVal('')
????????setStar(0)
????}
????//提交評價
????const?commentSave=()=>{
????????//?fetch('/commentSave').then(res=>{
????????//?????if(res.ok){??//請求成功后模擬渲染頁面
????????????????const?newItem?=?{...item,commentVal,star,ifEvaluate:true}
????????????????setItem(newItem)
????????????????console.log(newItem)
????????????????setEditing(false)
????????//?????}
????????//?})
???????
????}
????return?(
????????<div?className='orderItem'>
????????????<div?className='orderItem-main'>
????????????????<div?className='orderItem__imgBox'>
????????????????????<img?className='orderItem__img'?src={item.img}/>
????????????????</div>
????????????????<div?className='orderItem__cont'>
????????????????????<div?className='orderItem__title'>{item.title}</div>
????????????????????<div?className='orderItem__detail'>{item.detail}</div>
????????????????????<div?className='orderItem__price'>{item.price}</div>
????????????????</div>
????????????????<div?className='orderItem__btnBox'>
????????????????????{
????????????????????????item.ifEvaluate???(<button?className='orderItem__btn?orderItem__btn--true'>已評價</button>)?:
????????????????????????(<button?className='orderItem__btn?orderItem__btn--false'?onClick={commentClick}>評價</button>)
????????????????????}
????????????????</div>????????????????
????????????</div>
????????????{editing???domCommentBox()?:?null}
????????</div>
????);
};

const?OrderItem?=?(props)?=>?{?//訂單子組件
????const?item?=?props.content????//傳遞過來的數(shù)據(jù)
????return?(
????????<div?className='orderItem'>
????????????<div?className='orderItem__imgBox'>
????????????????<img?className='orderItem__img'?src={item.img}/>
????????????</div>
????????????<div?className='orderItem__cont'>
????????????????<div?className='orderItem__title'>{item.title}</div>
????????????????<div?className='orderItem__detail'>{item.detail}</div>
????????????????<div?className='orderItem__price'>{item.price}</div>
????????????</div>
????????????<div?className='orderItem__btnBox'>
????????????????{????//按鈕狀態(tài)
????????????????????item.ifEvaluate???(<button?className='orderItem__btn--true'>已評價</button>)?:
????????????????????(<button?className='orderItem__btn--false'>評價</button>)
????????????????}
????????????</div>
????????</div>
????);
};

const?OrderList?=?()?=>?{?//訂單列表組件
????const?[list,setList]?=?useState([])
????useEffect(()=>{?//DOM更新之后調(diào)用
????????fetch('/mock/orders.json').then(res=>{?//請求數(shù)據(jù)
????????????if(res.ok){
????????????????res.json().then(data=>{
????????????????????setList(data)
????????????????})
????????????}
????????})
????})
????return?(
????????<div>
????????????{
????????????????list.map((item,index)=>{?//列表遍歷
????????????????????return?<OrderItem??key={index}?content={item}/>
????????????????})
????????????}
???????????
????????</div>
????);
};

使用 create-react-app 快速搭建項目

根據(jù)UI劃分頁面組件，頭部、訂單列表、訂單詳情

組件的詳細開發(fā)

通過mock獲取服務(wù)器數(shù)據(jù)

將數(shù)據(jù)放到public/mock文件夾，調(diào)用路徑寫 /mock/orders.json'

使用fetch() 獲取ajax數(shù)據(jù)

坑：setState() 是方法，不是賦值

組件掛載完后請求數(shù)據(jù)

｜ componentDidMount

????componentDidMount(){
????????fetch('/mock/orders.json').then(res?=>?{
????????????if(res.ok){
????????????????res.json().then(data?=>?{
????????????????????this.setState({
????????????????????????data
????????????????????})
????????????????})
????????????}
????????})
????}

獲取列表數(shù)據(jù)，保持到data變量中

通過 data.map() 遍歷列表數(shù)據(jù)

演示數(shù)據(jù)

const?data?=?[
????{
????????"id":?1,
????????"shop":?"院落創(chuàng)意菜",
????????"picture":?"http://www.qwphp.com/web/uploads/2016-03-07/159cbcca4f2f5959e9ba209eecbf0d5a.jpg",
????????"product":?"百香果（冷飲）1扎",
????????"price":?19.9,
????????"ifCommented":?false
????},?{
????????"id":?2,
????????"shop":?"正一味",
????????"picture":?"http://www.qwphp.com/web/uploads/2016-03-07/a7368d9b6bee0d505a220cd903dcd43c.jpg",
????????"product":?"肥牛石鍋拌飯+雞蛋羹一份",
????????"price":?25,
????????"ifCommented":?false
????},?{
????????"id":?3,
????????"shop":?"凍酸奶",
????????"picture":?"http://www.qwphp.com/web/uploads/2016-03-07/4c21dde63b15de6bed3a02305a9ab8c3.jpg",
????????"product":?"凍酸奶（小杯)一杯",
????????"price":?8,
????????"ifCommented":?true
????},?{
????????"id":?4,
????????"shop":?"吉野家",
????????"picture":?"http://www.qwphp.com/web/uploads/2016-03-07/0444fdd46ef30cb81b706ef27f18295f.jpg",
????????"product":?"雞汁燒魚+中杯汽水/紫菜蛋花湯",
????????"price":?20,
????????"ifCommented":?true
????}
]

BEM 命名規(guī)范

｜ Bem 是塊（block）、元素（element）、修飾符（modifier）的簡寫，由 Yandex 團隊提出的一種前端 CSS 命名方法論。

? ? __雙下劃線：代表層級關(guān)系

? ? -- 雙中桿： 代表不同狀態(tài)

按鈕狀態(tài)可以用 三目運算符 ? :?

劃分依據(jù)

? ? 根據(jù)視圖層的UI劃分

? ? 訂單列表也可以拆分為 header, orderList, OrderItem 三個組件

拆分方式

? ? 每個組件用單獨的文件夾包裹

? ? 文件夾中放 index.js 和 style.css

? ? 使用react snippet 插件 rrc 快速創(chuàng)建組件模板

組件的文件結(jié)構(gòu)

? ? components

? ? ? ? Header

? ? ? ? ? ? index.js

? ? ? ? ? ? style.css

? ? ? ? OrderList

? ? ? ? ? ? index.js

? ? ? ? ? ? style.css

? ? ? ? OrderItem

? ? ? ? ? ? index.js

? ? ? ? ? ? style.css

將App.js 轉(zhuǎn)到 components文件夾統(tǒng)一管理

? ? components\App

? ? ? ? index.js? ? →? ?由App.js重命名

? ? ? ? style.css? ?→? 有App.css重命名

安裝項目

? ? npx create-react-app my-order

? ? npm 鏡像源切換

? ? ｜ npm set registry http://registry.npmmirror.com

package.json

? ? dependencies 安裝好的依賴

? ? react-scripts? 封裝 webpack相關(guān)的工作，支持熱更新

課程目標

? ? 掌握React項目的開發(fā)流程

? ? 理解和應(yīng)用React組件化思想

案例效果

? ? 手機端訂單列表

? ? 使用Chrome的手機模式調(diào)試

Vscode插件

? ? npm Intellisense??

? ? ｜? 自動補全依賴模塊的提示

? ? Path Intellisense

? ? ｜ 路徑補全提示

? ? Prettier-Code formatter

? ? ｜ 代碼格式化

? ? Reactjs code snippets

? ? ｜ react 代碼模板

React 簡介?

? ? 構(gòu)建用戶界面的JS庫

? ? 聲明式的視圖層

? ? 以組件為基礎(chǔ)

知識回顧

? ? JSX

? ? ? ? 支持HTML標簽和自定義組件

? ? ? ? 支持JS變量和表達式

Props和State

? ? Props組件對外接口

? ? ? ? 通過屬性和方法進行父子組件通信

? ? State組件對內(nèi)接口

? ? ? ? 內(nèi)部數(shù)據(jù)狀態(tài)

? ? ? ? ｜?

組件聲明周期（鉤子函數(shù)）

? ? 掛載

? ? ? ? constructor()

? ? ? ? componentDidMount()

? ? 更新

? ? ? ? componentDidUpdate()

? ? 卸載

? ? ? ? componentWillUnmount()

列表和Keys

? ? 唯一的key屬性

事件處理

? ? 事件名用小駝峰

? ? 事件指向 需要 bind 指向組件實例

? ? 箭頭函數(shù)不需要處理this問題

表單

? ? 受控組件 →? 數(shù)據(jù)由react的state管理

? ? 數(shù)據(jù)統(tǒng)一管理，可以減少bug

react: 構(gòu)建用戶界面的JavaScript庫，聲明式的視圖層，以組件為基礎(chǔ)

基礎(chǔ)知識

*JSX

*Props和State

*組件生命周期

*列表和keys

????當列表數(shù)據(jù)發(fā)生變化時，react將key作為每一個列表項的唯一標識，去判斷列表的變化，減少不必要的重復渲染

*事件處理

????駝峰寫法

????this綁定或用箭頭函數(shù)

*表單

????受控組件? 通過state管理

handleChange(event){
????this.setState({value:?event.target.value});
}

<input?type="text"?value={this.state.value}?onChange={this.handleChange}?/>

????不受控組件

如果props.data.stars是有值的就取該值，否取值為0

id值相同用===，如果相同，將item中的comment、stars、ifCommented（值為true）修改掉，如果不同，仍然返回item

在掛載函數(shù)compoentDidMount中獲取后臺數(shù)據(jù)，使用html5的fetch函數(shù)請求數(shù)據(jù)。

在構(gòu)造函數(shù)中定義一個初始的state值。

在React中寫js需要用到{}