```
import React, { Component, lazy, Suspense } from 'react'
// lazy
const About = lazy(() => import(/*webpackChunkName:"about"*/'./About.jsx'))
// ErrorBoundary
// componentDidCatch
export default class App extends Component {
state = {
hasError: false // 判斷是否存在 error
}
// componentDidCatch() {
// this.setState({
// hasError: true
// })
// }
// 捕獲組件的異步導入錯誤,執行方法
static getDerivedStateFromError() {
return {
hasError: true
}
}
render() {
if(this.state.hasError) {
return <div>網絡錯誤,請稍后重試</div>
}
return (
<div>
{/* Suspense 包裹異步組件,fallback 返回未加載時狀態 */}
<Suspense fallback={<div>loading</div>}>
<About/>
</Suspense>
{/* 111 */}
</div>
)
}
}
```
- 第一章:react 基礎
- 1. 關于 react
- 2. react 工作原理
- 0. 開發環境搭建
- 1. 創建并使用一個組件
- 1. 模塊化與組件化
- 2. 虛擬DOM
- 3. Diff 算法
- React 與 Vue 的使用差異
- 1. 組件創建方式
- 2. data 與 state
- 3. 方法使用方式&this
- 4. 數據雙向綁定
- 5. props
- 6. ref
- 7. for 循環元素
- 8. 生命周期
- create-react-app 改為多頁面應用
- react修改打包路徑,直接查看
- redux
- context
- lazy 實現延遲加載靜態屬性
- Memo實現指定組件進行渲染
- React Hooks
- React Hooks 的概念和意義
- 使用 useState
- axios單次切換formdata和payreload
- react 動態綁定 class
- 高階組件
- react設計模式