vue和react區(qū)別
整理下react中常見(jiàn)的坑
開(kāi)發(fā)環(huán)境搭建
基于create-react-app的再配置
報(bào)錯(cuò)
PS C:\Users\lijiawei\Desktop> npx create-react-app my-app
npm ERR! code ENOLOCAL
npm ERR! Could not install from "Files\nodejs\node_cache\_npx\68292" as it does not contain a package.json file.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Program Files\nodejs\node_cache\_logs\2018-12-17T07_15_39_571Z-debug.log
解決方法
npm install -g create-react-app
create-react-app myApp
React中組件的語(yǔ)法
函數(shù)式組件和類組件
- 函數(shù)式
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
- 類組件
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
兩種寫法
JSX語(yǔ)法
自定義的組件開(kāi)頭要大寫
代碼優(yōu)化
1、在構(gòu)造函數(shù)中做好this指向的改變
下面就不用.bind(this)
可以改變代碼的執(zhí)行性能
2、解決render函數(shù)中代碼過(guò)長(zhǎng)
image
Fragment（片段）
react 的特點(diǎn)
React設(shè)計(jì)思想
- 聲明式開(kāi)發(fā)
- 對(duì)應(yīng)的就是命令式（編程式）的開(kāi)發(fā)懈万，例如jQuery就是一個(gè)操作DOM的命令式開(kāi)發(fā)衷佃。而React這是好比我們?cè)谠O(shè)計(jì)一張大樓的圖紙受扳，我們只管圖紙?jiān)O(shè)計(jì)鞋真，怎么施工就交給React均函。
- 編程式實(shí)現(xiàn)需要以具體的代碼表達(dá)在哪里（where）螟凭，做什么（what）虚青，如何實(shí)現(xiàn)（how）；而聲明式只需要聲明在哪里（where）螺男，做什么（what）棒厘，而無(wú)需關(guān)心如何實(shí)現(xiàn)（how）
- 可以與其他框架并存
- 組件化
- 單項(xiàng)數(shù)據(jù)流
- 例如父組件中有5個(gè)子組件共同引用了一個(gè)數(shù)據(jù)源，當(dāng)5個(gè)子組件都有修改數(shù)據(jù)源的操作后烟号，如果出現(xiàn)bug绊谭，要精確定位bug很困難，必須一個(gè)一個(gè)組件找
- 如果真要改就統(tǒng)一在父組件中改
- 視圖層框架
- 函數(shù)式編程
- React代碼基本上都是一個(gè)個(gè)函數(shù)的寫法
- 優(yōu)勢(shì)1：易于維護(hù)汪拥，當(dāng)一個(gè)函數(shù)比較大時(shí)达传，可以拆分，每個(gè)函數(shù)各司其職
- 優(yōu)勢(shì)2：面試測(cè)試的開(kāi)發(fā)流程迫筑，如果項(xiàng)目代碼都是些函數(shù)宪赶，我們就可以很方便的測(cè)試其輸出是不是符合我們預(yù)期的值
