react 基礎(chǔ)
JSX
- JSX是一個(gè) JavaScript 的語(yǔ)法擴(kuò)展,可以很好地描述 UI 應(yīng)該呈現(xiàn)出它應(yīng)有交互的本質(zhì)形式岛啸。
- React DOM 在渲染所有輸入內(nèi)容之前，默認(rèn)會(huì)進(jìn)行轉(zhuǎn)義茴肥。它可以確保在你的應(yīng)用中值戳，永遠(yuǎn)不會(huì)注入那些并非自己明確編寫的內(nèi)容。所有的內(nèi)容在渲染之前都被轉(zhuǎn)換成了字符串炉爆。
- JSX 里的 class 變成了 className
深入了解：
JSX 僅僅只是 React.createElement(component, props, ...children) 函數(shù)的語(yǔ)法糖堕虹。
如下JSX代碼：
<MyButton color="blue" shadowSize={2}>
Click Me
</MyButton>
會(huì)編譯為：
React.createElement(
MyButton,
{color: 'blue', shadowSize: 2},
'Click Me'
)
元素
- 元素是構(gòu)成 React 應(yīng)用的最小磚塊卧晓。
- React 元素是創(chuàng)建開(kāi)銷極小的普通對(duì)象。React DOM 會(huì)負(fù)責(zé)更新 DOM 來(lái)與 React 元素保持一致赴捞。
- 組件是由元素構(gòu)成的逼裆。
-
false,null,undefined,true是合法的子元素。但它們并不會(huì)被渲染赦政。
以下的 JSX 表達(dá)式渲染結(jié)果相同：
<div />
<div></div>
<div>{false}</div>
<div>{null}</div>
<div>{undefined}</div>
<div>{true}</div>
組件
組件名稱必須以大寫字母開(kāi)頭(React 會(huì)將以小寫字母開(kāi)頭的組件視為原生 DOM 標(biāo)簽)
- 函數(shù)組件（以前稱之為無(wú)狀態(tài)組件胜宇，但
Hook出來(lái)之后叫為函數(shù)組件）：
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
- class組件
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
props
當(dāng) React 元素為用戶自定義組件時(shí)，它會(huì)將 JSX 所接收的屬性（attributes）轉(zhuǎn)換為單個(gè)對(duì)象傳遞給組件恢着，這個(gè)對(duì)象被稱之為 “props”桐愉。組件無(wú)論是使用函數(shù)聲明還是通過(guò) class 聲明，都決不能修改自身的 props
// 這段代碼會(huì)在頁(yè)面上渲染 “Hello, Sara”
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />;
ReactDOM.render(
element,
document.getElementById('root')
);
//上段代碼渲染時(shí)發(fā)生了什么：
1. 我們調(diào)用 ReactDOM.render() 函數(shù)掰派，并傳入 <Welcome name="Sara" /> 作為參數(shù)从诲。
2. React 調(diào)用 Welcome 組件，并將 {name: 'Sara'} 作為 props 傳入靡羡。
3. Welcome 組件將 <h1>Hello, Sara</h1> 元素作為返回值系洛。
4. React DOM 將 DOM 高效地更新為 <h1>Hello, Sara</h1>。
有多種方式可以在 JSX 中指定 props略步。
- JavaScript 表達(dá)式作為 Props
- 字符串字面量
- props 默認(rèn)值為
true
State
- 使用
this.setState()設(shè)置state的值 -
this.setState()可能是異步的 - 調(diào)用
this.setState()的時(shí)候描扯，React 會(huì)把你提供的對(duì)象合并到當(dāng)前的 state。
數(shù)據(jù)流
react是單向數(shù)據(jù)流趟薄，任何的 state 總是所屬于特定的組件绽诚，而且從該 state 派生的任何數(shù)據(jù)或 UI 只能影響樹(shù)中“低于”它們的組件。
生命周期
在 V16 版本中引入了 Fiber 機(jī)制杭煎。這個(gè)機(jī)制一定程度上的影響了部分生命周期的調(diào)用憔购，并且也引入了新的 2 個(gè) API 來(lái)解決問(wèn)題。（Fiber 本質(zhì)上是一個(gè)虛擬的堆棧幀岔帽，新的調(diào)度器會(huì)按照優(yōu)先級(jí)自由調(diào)度這些幀玫鸟，從而將之前的同步渲染改成了異步渲染，在不影響體驗(yàn)的情況下去分段計(jì)算更新犀勒。在之前的版本中屎飘，如果你擁有一個(gè)很復(fù)雜的復(fù)合組件，然后改動(dòng)了最上層組件的 state贾费，那么調(diào)用椙展海可能會(huì)很長(zhǎng)，調(diào)用棧過(guò)長(zhǎng)褂萧，再加上中間進(jìn)行了復(fù)雜的操作押桃，就可能導(dǎo)致長(zhǎng)時(shí)間阻塞主線程，帶來(lái)不好的用戶體驗(yàn)导犹。Fiber 就是為了解決該問(wèn)題而生唱凯。）
class ExampleComponent extends React.Component {
// 用于初始化 state
constructor(props) {
super(props)
this.state = { hasError: false };
}
// 用于替換 `componentWillReceiveProps` 羡忘，該函數(shù)會(huì)在初始化和 `update` 時(shí)被調(diào)用
// 因?yàn)樵摵瘮?shù)是靜態(tài)函數(shù)，所以取不到 `this`, 如果需要對(duì)比 `prevProps` 需要單獨(dú)在 `state` 中維護(hù)
// 它應(yīng)返回一個(gè)對(duì)象來(lái)更新 state
static getDerivedStateFromProps(nextProps, prevState) {}
// 判斷是否需要更新組件磕昼，多用于組件性能優(yōu)化
shouldComponentUpdate(nextProps, nextState) {}
// 組件掛載后調(diào)用
// 可以在該函數(shù)中進(jìn)行請(qǐng)求或者訂閱
componentDidMount() {}
// 用于替換 componentWillUpdate 卷雕，該函數(shù)會(huì)在 update 后 DOM 更新前被調(diào)用
// 用于讀取最新的 DOM 數(shù)據(jù)。
getSnapshotBeforeUpdate() {}
// 組件即將銷毀
// 可以在此處移除訂閱票从，定時(shí)器等等
componentWillUnmount() {}
// 組件銷毀后調(diào)用
componentDidUnMount() {}
// 組件更新后調(diào)用
componentDidUpdate() {}
// 錯(cuò)誤邊界 - 渲染備用 UI
// 更新 state 使下一次渲染能夠顯示降級(jí)后的 UI
// 注意錯(cuò)誤邊界僅可以捕獲其子組件的錯(cuò)誤漫雕，它無(wú)法捕獲其自身的錯(cuò)誤
static getDerivedStateFromError(error) {
return { hasError: true };
}
// 錯(cuò)誤邊界 - 打印錯(cuò)誤信息
// 你同樣可以將錯(cuò)誤日志上報(bào)給服務(wù)器
// 注意錯(cuò)誤邊界僅可以捕獲其子組件的錯(cuò)誤，它無(wú)法捕獲其自身的錯(cuò)誤
componentDidCatch(error, info) {
console.log(error, info);
}
// 渲染組件函數(shù)
render() {}
// 以下函數(shù)不建議使用
UNSAFE_componentWillMount() {}
UNSAFE_componentWillUpdate(nextProps, nextState) {}
// 接收到新的props時(shí)調(diào)用
UNSAFE_componentWillReceiveProps(nextProps) {}
}
對(duì)于異步渲染峰鄙，現(xiàn)在渲染有兩個(gè)階段：reconciliation 和 commit 浸间。前者過(guò)程是可以打斷的，后者不能暫停吟榴，會(huì)一直更新界面直到完成魁蒜。
- Reconciliation 階段：
- componentWillMount
- componentWillReceiveProps
- shouldComponentUpdate
- componentWillUpdate
- Commit 階段：
- componentDidMount
- componentDidUpdate
- componentWillUnmount
因?yàn)?reconciliation 階段是可以被打斷的，所以 reconciliation 階段會(huì)執(zhí)行的生命周期函數(shù)就可能會(huì)出現(xiàn)調(diào)用多次的情況煤墙，從而引起 Bug梅惯。所以對(duì)于 reconciliation 階段調(diào)用的幾個(gè)函數(shù)宪拥，除了 shouldComponentUpdate 以外仿野，其他都應(yīng)該避免去使用。
V16.4以后生命周期圖解（不包含官方不建議使用的）
事件處理
- React 事件的命名采用小駝峰式（camelCase）她君，而不是純小寫脚作。
- 使用 JSX 語(yǔ)法時(shí)你需要傳入一個(gè)函數(shù)作為事件處理函數(shù)，而不是一個(gè)字符串缔刹。
為JSX內(nèi)時(shí)間綁定this的幾種方式：
- constructor內(nèi)處理：
constructor() {
this.handleClick = this.handleClick.bind(this);
}
- JSX內(nèi)使用bind:
<button onClick={this.handleClick.bind(this, id)}>Delete Row</button>
- 箭頭函數(shù)：
<button onClick={() => this.handleClick(id)}>Delete Row</button>
key
key 幫助 React 識(shí)別哪些元素改變了球涛，比如被添加或刪除。因此你應(yīng)當(dāng)給數(shù)組中的每一個(gè)元素賦予一個(gè)確定的標(biāo)識(shí)校镐。
key 只是在兄弟節(jié)點(diǎn)之間必須唯一
受控組件
使 React 的 state 成為“唯一數(shù)據(jù)源”亿扁。渲染表單的 React 組件還控制著用戶輸入過(guò)程中表單發(fā)生的操作。被 React 以這種方式控制取值的表單輸入元素就叫做受控組件鸟廓。
非受控組件
表單數(shù)據(jù)將交由 DOM 節(jié)點(diǎn)來(lái)處理从祝。使用非受控組件時(shí)如果想賦予組件一個(gè)初始值，但是不去控制后續(xù)的更新引谜。 在這種情況下, 你可以指定一個(gè) defaultValue 屬性牍陌，而不是 value。
<input type="file" /> 始終是一個(gè)非受控組件
