React小结
1. setState
setState更新狀態(tài)的2種寫法
? (1). setState(stateChange, [callback])------對象式的setState
? ? ? ? ? ? 1.stateChange為狀態(tài)改變對象(該對象可以體現(xiàn)出狀態(tài)的更改)
? ? ? ? ? ? 2.callback是可選的回調(diào)函數(shù), 它在狀態(tài)更新完畢、界面也更新后(render調(diào)用后)才被調(diào)用
? ? ? ? ?
? (2). setState(updater, [callback])------函數(shù)式的setState
? ? ? ? ? ? 1.updater為返回stateChange對象的函數(shù)。
? ? ? ? ? ? 2.updater可以接收到state和props。
? ? ? ? ? ? 4.callback是可選的回調(diào)函數(shù), 它在狀態(tài)更新、界面也更新后(render調(diào)用后)才被調(diào)用。
總結(jié):
? ? 1.對象式的setState是函數(shù)式的setState的簡寫方式(語法糖)
? ? 2.使用原則：
? ? ? ? (1).如果新狀態(tài)不依賴于原狀態(tài) ===> 使用對象方式
? ? ? ? (2).如果新狀態(tài)依賴于原狀態(tài) ===> 使用函數(shù)方式
? ? ? ? (3).如果需要在setState()執(zhí)行后獲取最新的狀態(tài)數(shù)據(jù),
? ? ? ? ? 要在第二個callback函數(shù)中讀取
?2. lazyLoad
路由組件的lazyLoad
? //1.通過React的lazy函數(shù)配合import()函數(shù)動態(tài)加載路由組件 ===> 路由組件代碼會被分開打包
? const Login = lazy(()=>import('@/pages/Login'))
? //2.通過<Suspense>指定在加載得到路由打包文件前顯示一個自定義loading界面
? <Suspense fallback={<h1>loading.....</h1>}>
? ? ? ? <Switch>
? ? ? ? ? ? <Route path="/xxx" component={Xxxx}/>
? ? ? ? ? ? <Redirect to="/login"/>
? ? ? ? </Switch>
? ? </Suspense>
3. Hooks
#### 1. React Hook/Hooks是什么?
```
(1). Hook是React 16.8.0版本增加的新特性/新語法
(2). 可以讓你在函數(shù)組件中使用 state 以及其他的 React 特性
```
#### 2. 三個常用的Hook
```
(1). State Hook: React.useState()
(2). Effect Hook: React.useEffect()
(3). Ref Hook: React.useRef()
```
#### 3. State Hook
```
(1). State Hook讓函數(shù)組件也可以有state狀態(tài), 并進(jìn)行狀態(tài)數(shù)據(jù)的讀寫操作
(2). 語法: const [xxx, setXxx] = React.useState(initValue) ?
(3). useState()說明:
? ? ? ? 參數(shù): 第一次初始化指定的值在內(nèi)部作緩存
? ? ? ? 返回值: 包含2個元素的數(shù)組, 第1個為內(nèi)部當(dāng)前狀態(tài)值, 第2個為更新狀態(tài)值的函數(shù)
(4). setXxx()2種寫法:
? ? ? ? setXxx(newValue): 參數(shù)為非函數(shù)值, 直接指定新的狀態(tài)值, 內(nèi)部用其覆蓋原來的狀態(tài)值
? ? ? ? setXxx(value => newValue): 參數(shù)為函數(shù), 接收原本的狀態(tài)值, 返回新的狀態(tài)值, 內(nèi)部用其覆蓋原來的狀態(tài)值
```
#### 4. Effect Hook
```
(1). Effect Hook 可以讓你在函數(shù)組件中執(zhí)行副作用操作(用于模擬類組件中的生命周期鉤子)
(2). React中的副作用操作:
? ? ? ? 發(fā)ajax請求數(shù)據(jù)獲取
? ? ? ? 設(shè)置訂閱 / 啟動定時器
? ? ? ? 手動更改真實(shí)DOM
(3). 語法和說明:
? ? ? ? useEffect(() => {
? ? ? ? ? // 在此可以執(zhí)行任何帶副作用操作
? ? ? ? ? return () => { // 在組件卸載前執(zhí)行
? ? ? ? ? ? // 在此做一些收尾工作, 比如清除定時器/取消訂閱等
? ? ? ? ? }
? ? ? ? }, [stateValue]) // 如果指定的是[], 回調(diào)函數(shù)只會在第一次render()后執(zhí)行
? ?
(4). 可以把 useEffect Hook 看做如下三個函數(shù)的組合
? ? ? ? componentDidMount()
? ? ? ? componentDidUpdate()
? ? ? componentWillUnmount()
```
#### 5. Ref Hook
```
(1). Ref Hook可以在函數(shù)組件中存儲/查找組件內(nèi)的標(biāo)簽或任意其它數(shù)據(jù)
(2). 語法: const refContainer = useRef()
(3). 作用:保存標(biāo)簽對象,功能與React.createRef()一樣
```
4. Fragment?
### 使用
? <Fragment><Fragment>
? <></>
### 作用
> 可以不用必須有一個真實(shí)的DOM根標(biāo)簽了
5. Context?
### 理解
> 一種組件間通信方式, 常用于【祖組件】與【后代組件】間通信
### 使用
```js
1) 創(chuàng)建Context容器對象：
? const XxxContext = React.createContext() ?
2) 渲染子組時，外面包裹xxxContext.Provider, 通過value屬性給后代組件傳遞數(shù)據(jù)：
? <xxxContext.Provider value={數(shù)據(jù)}>
? ? 子組件
? ? </xxxContext.Provider>
? ?
3) 后代組件讀取數(shù)據(jù)：
? //第一種方式:僅適用于類組件
? ? static contextType = xxxContext ?// 聲明接收context
? ? this.context // 讀取context中的value數(shù)據(jù)
? ?
? //第二種方式: 函數(shù)組件與類組件都可以
? ? <xxxContext.Consumer>
? ? ? {
? ? ? ? value => ( // value就是context中的value數(shù)據(jù)
? ? ? ? ? 要顯示的內(nèi)容
? ? ? ? )
? ? ? }
? ? </xxxContext.Consumer>
```
### 注意
? 在應(yīng)用開發(fā)中一般不用context, 一般都用它的封裝react插件
?
6. 組件優(yōu)化?
### Component的2個問題
> 1. 只要執(zhí)行setState(),即使不改變狀態(tài)數(shù)據(jù), 組件也會重新render() ==> 效率低
>
> 2. 只當(dāng)前組件重新render(), 就會自動重新render子組件，縱使子組件沒有用到父組件的任何數(shù)據(jù) ==> 效率低
### 效率高的做法
> ?只有當(dāng)組件的state或props數(shù)據(jù)發(fā)生改變時才重新render()
### 原因
> ?Component中的shouldComponentUpdate()總是返回true
### 解決
? 辦法1:
? ? 重寫shouldComponentUpdate()方法
? ? 比較新舊state或props數(shù)據(jù), 如果有變化才返回true, 如果沒有返回false
? 辦法2: ?
? ? 使用PureComponent
? ? PureComponent重寫了shouldComponentUpdate(), 只有state或props數(shù)據(jù)有變化才返回true
? ? 注意:
? ? ? 只是進(jìn)行state和props數(shù)據(jù)的淺比較, 如果只是數(shù)據(jù)對象內(nèi)部數(shù)據(jù)變了, 返回false ?
? ? ? 不要直接修改state數(shù)據(jù), 而是要產(chǎn)生新數(shù)據(jù)
? 項(xiàng)目中一般使用PureComponent來優(yōu)化
?
?7. render props?
### 如何向組件內(nèi)部動態(tài)傳入帶內(nèi)容的結(jié)構(gòu)(標(biāo)簽)?
? Vue中:
? ? 使用slot技術(shù), 也就是通過組件標(biāo)簽體傳入結(jié)構(gòu) ?<A><B/></A>
? React中:
? ? 使用children props: 通過組件標(biāo)簽體傳入結(jié)構(gòu)
? ? 使用render props: 通過組件標(biāo)簽屬性傳入結(jié)構(gòu),而且可以攜帶數(shù)據(jù)，一般用render函數(shù)屬性
### children props
? <A>
? ? <B>xxxx</B>
? </A>
? {this.props.children}
? 問題: 如果B組件需要A組件內(nèi)的數(shù)據(jù), ==> 做不到
### render props
? <A render={(data) => <C data={data}></C>}></A>
? A組件: {this.props.render(內(nèi)部state數(shù)據(jù))}
? C組件: 讀取A組件傳入的數(shù)據(jù)顯示 {this.props.data}
?
<hr/>
8. 錯誤邊界?
#### 理解：
錯誤邊界(Error boundary)：用來捕獲后代組件錯誤，渲染出備用頁面
#### 特點(diǎn)：
只能捕獲后代組件生命周期產(chǎn)生的錯誤，不能捕獲自己組件產(chǎn)生的錯誤和其他組件在合成事件、定時器中產(chǎn)生的錯誤
##### 使用方式：
getDerivedStateFromError配合componentDidCatch
```js
// 生命周期函數(shù)，一旦后臺組件報(bào)錯，就會觸發(fā)
static getDerivedStateFromError(error) {
? ? console.log(error);
? ? // 在render之前觸發(fā)
? ? // 返回新的state
? ? return {
? ? ? ? hasError: true,
? ? };
}
componentDidCatch(error, info) {
? ? // 統(tǒng)計(jì)頁面的錯誤。發(fā)送請求發(fā)送到后臺去
? ? console.log(error, info);
}
9. 組件通信方式總結(jié)?
組件間的關(guān)系：
- 父子組件
- 兄弟組件（非嵌套組件）
- 祖孫組件（跨級組件）
#### 幾種通信方式：
? ? 1.props：
? ? ? (1).children props
? ? ? (2).render props
? ? 2.消息訂閱-發(fā)布：
? ? ? pubs-sub、event等等
? ? 3.集中式管理：
? ? ? redux、dva等等
? ? 4.conText:
? ? ? 生產(chǎn)者-消費(fèi)者模式
#### 比較好的搭配方式：
? ? 父子組件：props
? ? 兄弟組件：消息訂閱-發(fā)布、集中式管理
? ? 祖孫組件(跨級組件)：消息訂閱-發(fā)布、集中式管理、conText(開發(fā)用的少，封裝插件用的多)
總結(jié)
- 上一篇： Redis 实战案例总结
- 下一篇： [react] 状态管理器它精髓是什么？