## React Router 6 概述

<img src="https://ftp.bmp.ovh/imgs/2022/02/f86f98dd6ff7d01b.png" style="width:50%;margin-left:50%;transform:translateX(-50%)" />





1. React Router 以三个不同的包发布到 `npm` 上，它们分别为：

   1. `react-router`: 路由的核心库，提供了很多的：组件、钩子。
   2. **`react-router-dom`:** 包含`react-router`所有内容，并添加一些专门用于 DOM 的组件，例如 `<BrowserRouter>`等。
   3. `react-router-native`: 包括`react-router`所有内容，并添加一些专门用于`ReactNative`的API，例如:`<NativeRouter>`等。
2. 与React Router 5.x 版本相比，改变了什么？

   1. 内置组件的变化：移除`<Switch/>` ，新增 `<Routes/>`等。
   2. 语法的变化：`component={About}` 变为 `element={<About/>}`等。
   3. 新增多个hook：`useParams`、`useNavigate`、`useMatch`等。
   4. <strong style="color:#dd4d40">官方明确推荐函数式组件了！！！</strong>
   

## 准备工作

创建新项目：

```bash
npx create-react-app router6
```

目前`create-react-app`默认创建为React 18，先降到17版本：

```bash
npm install react@17.x react-dom@17.x --save
```

安装`react-router-dom`：

```bash
npm i react-router-dom
```

若以上命令出现报错，则加后缀：`--legacy-peer-deps`

编写基本内容：

1. 项目结构
   ![image.png](https://s2.loli.net/2022/05/21/mfKbG9RHWt6DXkc.png)

2. **index.js**

   ```jsx
   import React from "react"
   import ReactDOM from "react-dom"
   import { BrowserRouter } from "react-router-dom"
   import App from "./App"
   
   ReactDOM.render(
       <BrowserRouter>
           <App />
       </BrowserRouter>,
       document.getElementById('root')
   )
   ```

   App.jsx声明函数式组件

## 一级路由

在`React Router 6`中，`<Route />`的`component`属性已替换为`element`，`Switch`已弃用并替换为`Routes`，值得注意的是，在`React Router 5`中，用`<Switch></Switch>`包裹`<Route />`不是必须的，但在`React Router 6`中必须用`<Routes></Routes>`包裹`<Route />`。

**App.jsx**

```jsx
import React from 'react'
import { NavLink, Routes, Route } from 'react-router-dom'
import About from './pages/About'
import Home from './pages/Home'

export default function App() {
    return (
        <div>
            <div className="row">
                <div className="col-xs-offset-2 col-xs-8">
                    <div className="page-header"><h2>React Router Demo</h2></div>
                </div>
            </div>
            <div className="row">
                <div className="col-xs-2 col-xs-offset-2">
                    <div className="list-group">
                        {/* 路由链接 */}
                        <NavLink className="list-group-item" to="/about">About</NavLink>
                        <NavLink className="list-group-item" to="/home">Home</NavLink>
                    </div>
                </div>
                <div className="col-xs-6">
                    <div className="panel">
                        <div className="panel-body">
                            {/* 注册路由 */}
                            <Routes>
                                <Route path='/about' element={<About/>} />
                                <Route path='/home' element={<Home/>} />
                            </Routes>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}
```

![GIF 2022-5-21 19-03-58.gif](https://s2.loli.net/2022/05/21/HTgf1pdwJbjPNEy.gif)

## 重定向

`React Router 6`已将原有的`Redirect`删除，现在使用`Navigate`

只要`<Navigate />`组件被渲染，就会修改路径、切换视图

- `to`属性：重定向地址
- `replace`属性：false为push，true为replace

使用：嵌套在`Route`标签中使用

```jsx
<Route path='/' element={<Navigate to='/about' />} />
```

需求：点击使sum+1并实现路由跳转

```jsx
import React, {useState} from 'react'
import { Navigate } from 'react-router-dom'

export default function Home() {
  const [sum, setSum] = useState(1)
  return (
    <>
      <h3>我是Home的内容</h3>
      {sum === 2 ? <Navigate to="/about" /> : <h4>当前sum的值是：{sum}</h4>}
      <button onClick={() => setSum(2)}>点击sum+1</button>
    </>
  )
}
```

![GIF 2022-5-24 19-52-53.gif](https://s2.loli.net/2022/05/24/GCOKHvhUa21zxVQ.gif)

## NavLink

作用: 与`<Link>`组件类似，且可实现导航的“高亮”效果，与Router 5不同的是，不在使用`activeClassName`，而是如下所示：

```jsx
<NavLink
    to="login"
    className={({ isActive }) => {
        console.log('home', isActive)
        return isActive ? 'base one' : 'base'
    }}
>login</NavLink>
```

默认情况下，当Home的子组件匹配成功，Home的导航也会高亮，当`NavLink`上添加了`end`属性后，若Home的子组件匹配成功，则Home的导航没有高亮效果。

## 路由表

使用`useRoutes` Hook，根据路由表，动态创建`<Routes>`和`<Route>`。

```jsx
import React from 'react'
import { NavLink, Navigate, useRoutes } from 'react-router-dom'
import About from './pages/About'
import Home from './pages/Home'

export default function App() {
    // 根据路由表生成对应的路由规则
    const element = useRoutes([
        {
            path: '/about',
            element: <About/>
        },
        {
            path: '/home',
            element: <Home/>
        },
        {
            path: '/',
            element: <Navigate to="/about"/>
        }
    ])

    return (
        <div>
            <div className="row">
                <div className="col-xs-offset-2 col-xs-8">
                    <div className="page-header"><h2>React Router Demo</h2></div>
                </div>
            </div>
            <div className="row">
                <div className="col-xs-2 col-xs-offset-2">
                    <div className="list-group">
                        {/* 路由链接 */}
                        <NavLink className="list-group-item" to="/about">About</NavLink>
                        <NavLink className="list-group-item" to="/home">Home</NavLink>
                    </div>
                </div>
                <div className="col-xs-6">
                    <div className="panel">
                        <div className="panel-body">
                            {/* 注册路由 */}
                            {element}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}
```

## 嵌套路由

路由表写法：

```js
/* eslint-disable import/no-anonymous-default-export */
import { Navigate } from "react-router-dom"
import About from "../pages/About"
import Home from "../pages/Home"
import Message from "../pages/Message"
import News from "../pages/News"

export default [
    {
        path: '/about',
        element: <About />
    },
    {
        path: '/home',
        element: <Home />,
        children: [
            {
                path: 'message', // 不要有斜线
                element: <Message />
            },
            {
                path: 'news',
                element: <News />
            },
        ]
    },
    {
        path: '/',
        element: <Navigate to="/about" />
    }
]
```

Home组件：使用`<Outlet />`，当`<Route>`产生嵌套时，渲染其对应的后续子路由。

```jsx
import React from 'react'
import { NavLink, Outlet } from 'react-router-dom'

export default function Home() {
  return (
    <div>
      <h2>Home组件内容</h2>
      <div>
        <ul className="nav nav-tabs">
          <li>
            <NavLink className="list-group-item" to="news">News</NavLink> {/* 不能写斜线 */}
          </li>
          <li>
            <NavLink className="list-group-item" to="message">Message</NavLink>
          </li>
        </ul>
        {/* 指定路由组件呈现的位置 */}
        <Outlet />
      </div>
    </div>
  )
}
```

## 传递参数

### params参数

> 1. 路由链接(携带参数)：`<Link to='/demo/test/tom/18'}>详情</Link>`
>
> 2. 在路由表中声明接收参数：
>
>    ```jsx
>    path: 'message', // 不要有斜线
>    element: <Message />,
>    children: [
>        {
>            path: 'detail/:id/:title/:content',
>            element: <Detail />
>        }
>    ]
>    ```
>
> 3. 接收参数：`const {id, title, content} = useParams()`

Message组件：

```jsx
import React, { useState } from 'react'
import { Link, Outlet } from 'react-router-dom'

export default function Message() {

    const [messages] = useState([
        {id: '001', title: 'message1', content: 'abcdefg'},
        {id: '002', title: 'message2', content: 'hijklmn'},
        {id: '003', title: 'message3', content: 'opqrst'},
        {id: '004', title: 'message4', content: 'uvwxyz'},
    ])

    return (
        <div>
            <ul>    
                {
                    messages.map((message) => {
                        return (
                            <li key={message.id}>
                                <Link to={`detail/${message.id}/${message.title}/${message.content}`}>{message.title}</Link>&nbsp;&nbsp; 
                            </li>
                        )
                    })
                }
            </ul>
            <hr />
            {/* 指定路由组件的展示位置 */}
            <Outlet />
        </div>
    )
}
```

Detail组件：

```jsx
import React from 'react'
import { useMatch, useParams } from 'react-router-dom'

export default function Detail() {
  const {id, title, content} = useParams()
  const x = useMatch('/home/message/detail/:id/:title/:content')
  console.log(x)
  return (
    <ul>
        <li>id: {id}</li>
        <li>title: {title}</li>
        <li>content: {content}</li>
    </ul>
  )
}
```

### search参数

> 1. 路由链接(携带参数)：`<Link to='/demo/test?name=tom&age=18'}>详情</Link>`
> 2. 注册路由(无需声明，在路由表中正常注册即可)
> 3. 接收参数：`const [search, setSearch] = useSearchParams()`

Detail组件：

```jsx
import React from 'react'
import { useLocation, useSearchParams } from 'react-router-dom'

export default function Detail() {
  const [search, setSearch] = useSearchParams()
  const id = search.get('id')
  const title = search.get('title')
  const content = search.get('content')
  const x = useLocation()
  console.log(x)
  return (
    <ul>
        <li>
            <button onClick={() => setSearch('id=005&title=阿巴阿巴&content=ohhhhhh')}>点击修改search参数</button>
        </li>
        <li>id: {id}</li>
        <li>title: {title}</li>
        <li>content: {content}</li>
    </ul>
  )
}
```

![GIF 2022-5-27 22-23-06.gif](https://s2.loli.net/2022/05/28/OJu2KzBH9L7tUhv.gif)

### state参数

传递的内容不会在地址栏展示，与组件的状态（state）不同

> 1. 路由链接(携带参数)：
>
>    ```jsx
>    <Link
>        to='detail'
>        state={{
>            id: message.id,
>            title: message.title,
>            content: message.content
>        }}>{message.title}
>    </Link>
>    ```
>
> 2. 注册路由(无需声明，在路由表中正常注册即可)
>
> 3. 接收参数：`const {state: {id, title, content}} = useLocation()`
>
> 4. 备注：刷新也可以保留住参数，但清除浏览器数据后不可

## 编程式路由导航

需求：鼠标滑过时引起组件渲染，这时`<Link/> <NavLink/> <Navigate/>`都不能胜任

```jsx
import React, { useState } from 'react'
import { Link, Outlet, useNavigate } from 'react-router-dom'

export default function Message() {

    const [messages] = useState([
        {id: '001', title: 'message1', content: 'abcdefg'},
        {id: '002', title: 'message2', content: 'hijklmn'},
        {id: '003', title: 'message3', content: 'opqrst'},
        {id: '004', title: 'message4', content: 'uvwxyz'},
    ])

    const navigate = useNavigate()

    function show(message) {
        navigate('detail', {
            replace: false, // 默认为false，可不写
            state: {
                id: message.id,
                title: message.title,
                content: message.content
            }
        })
    }

    return (
        <div>
            <ul>    
                {
                    messages.map((message) => {
                        return (
                            <li key={message.id}>
                                <Link
                                    to='detail'
                                    state={{
                                        id: message.id,
                                        title: message.title,
                                        content: message.content
                                    }}>{message.title}
                                </Link>&nbsp;&nbsp; 
                                <button onClick={() => show(message)}>展示详情</button>
                            </li>
                        )
                    })
                }
            </ul>
            <hr />
            {/* 指定路由组件的展示位置 */}
            <Outlet />
        </div>
    )
}
```

![GIF 2022-5-27 22-54-09.gif](https://s2.loli.net/2022/05/28/yzTKRPHOjlkXZno.gif)

扩展：前进与后退

```jsx
import React from 'react'
import { useNavigate } from 'react-router-dom'

export default function Header() {
    const navigate = useNavigate()
    function back() {
        navigate(-1)
    }
    function forward() {
        navigate(1)
    }
    return (
        <div className="col-xs-offset-2 col-xs-8">
            <div className="page-header">
                <h2>React Router Demo</h2>
                <button onClick={back}>👈后退</button>
                <button onClick={forward}>前进👉</button>
            </div>
        </div>
    )
}
```

## 其他的Hooks

### `useInRouterContext()`

主要用于判断当前组件（一般组件和路由组件）是否处于路由的上下文环境中，即组件被`BrowserRouter`或`HashRouter`包裹（包括子组件），不在路由的上下文环境中，即脱离了路由器的管理

返回一个布尔值，处于路由的上下文环境中时返回真。

### `useNavigationType()`

返回当前的导航类型

- POP：在浏览器中直接打开或刷新页面
- PUSH
- REPLACE

### `useOutlet()`

用来呈现当前组件中渲染的嵌套路由

- `console.log(useOutlet())`
- 如果嵌套路由没有挂载，则输出null
- 如果嵌套路由已经挂载，则展示嵌套的路由对象

### `useResolvedPath()`

给定一个URL值，解析其中的`path`、`search`、`hash`值

`console.log(useResolvedPath('/user?id=01&name=abc&se=hi#goto'))`

React学习08：React路由（React Router 6）

## `setState`





`setState`更新状态的2种写法:

1. `setState(stateChange, [callback])`------对象式的`setState`
   1. `stateChange`为状态改变对象(该对象可以体现出状态的更改)
   2. `callback`是可选的回调函数, 它在状态更新完毕、界面也更新后(`render`调用后)才被调用
2. `setState(updater, [callback])`------函数式的`setState`
   1. `updater`为返回`stateChange`对象的函数
   2. `updater`可以接收到`state`和`props`
   3. `callback`是可选的回调函数, 它在状态更新、界面也更新后(`render`调用后)才被调用

```jsx
import React, { Component } from 'react'

export default class Demo extends Component {

  state = {count: 0}

  inicrement = () => {
    /* 对象式的setState */
    // 1.获取原来的count值
    // const {count} = this.state
    // // 2.更新状态
    // this.setState({count: count+1}, () => {
    //     console.log(this.state.count) // 1
    // })
    // // console.log(this.state.count) // 0

    /* 函数式的setState */
    // this.setState((state, props) => {
    //     return {count: state.count+1}
    // })
    this.setState(state => ({count: state.count+1})) // 简写
  }

  render() {
    return (
      <div>
        <h1>当前求和为：{this.state.count}</h1>
        <button onClick={this.inicrement}>点击+1</button>
      </div>
    )
  }
}
```

1. 对象式的`setState`是函数式的`setState`的简写方式(语法糖)

2. 使用原则：

   (1).如果新状态不依赖于原状态 => 使用对象方式

   (2).如果新状态依赖于原状态 => 使用函数方式

   (3).如果需要在`setState()`执行后获取最新的状态数据，要在第二个`callback`函数中读取

## `lazyLoad`

路由组件的懒加载：

1. 通过`React`的`lazy`函数配合`import()`函数动态加载路由组件 => 路由组件代码会被分开打包
2. 通过`<Suspense fallback=?><Suspense/>`指定在加载得到路由打包文件前显示一个自定义loading界面

```jsx
import React, { Component, lazy, Suspense } from 'react'
import {NavLink, Route} from 'react-router-dom'
// import About from './About'
// import Home from './Home'

const About = lazy(() => import('./About'))
const Home = lazy(() => import('./Home'))


export default class Demo extends Component {

    render() {
        return (
            <div>
                <div className="row">
                    <div className="col-xs-offset-2 col-xs-8">
                        <div className="page-header"><h2>React Router Demo</h2></div>
                    </div>
                </div>
                <div className="row">
                    <div className="col-xs-2 col-xs-offset-2">
                        <div className="list-group">
                            <NavLink className="list-group-item" to="/about">About</NavLink>
                            <NavLink className="list-group-item" to="/home">Home</NavLink>
                        </div>
                    </div>
                    <div className="col-xs-6">
                        <div className="panel">
                            <div className="panel-body">
                                <Suspense fallback={<h1>Loading...</h1>}>
                                    <Route path="/about" component={About}/>
                                    <Route path="/home" component={Home}/>
                                </Suspense>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
```

![GIF 2022-5-22 22-47-29.gif](https://s2.loli.net/2022/05/22/zLMCRmkNHvQe8wO.gif)

## Hooks

Hook是React 16.8.0版本增加的新特性/新语法，可以在函数组件中使用 `state` 以及其他的 React 特性

### State Hook

State Hook让函数组件也可以有state状态，并进行状态数据的读写操作

1. 语法: `const [xxx, setXxx] = React.useState(initValue)`
2. `useState()`说明:
   * 参数: 第一次初始化指定的值在内部作缓存
   * 返回值: 包含2个元素的数组, 第1个为内部当前状态值, 第2个为更新状态值的函数
3. `setXxx()`2种写法:
   * `setXxx(newValue)`: 参数为非函数值, 直接指定新的状态值, 内部用其覆盖原来的状态值
   * `setXxx(value => newValue)`: 参数为函数, 接收原本的状态值, 返回新的状态值, 内部用其覆盖原来的状态值

```jsx
import React from 'react'

export default function Demo() {
    const [count, setCount] = React.useState(0)
    const [name, setName] = React.useState('tom')

    function add() {
        // setCount(count + 1) // 第一种写法
        setCount(count => count + 1) // 第二种写法
    }

    // const add = () => {
    //     setCount(count + 1)
    // }

    // console.log(add)

    function change() {
        setName('jerry')
    }

    return (
        <div>
            <h2>当前求和为：{count}</h2>
            <h2>我的名字是：{name}</h2>
            <button onClick={add}>点击+1</button>
            <button onClick={change}>点击改名</button>
        </div>
    )
}
```

![GIF 2022-5-23 20-16-52.gif](https://s2.loli.net/2022/05/23/g8Xlw9yC24fKb5E.gif)

### Effect Hook

Effect Hook 可以在函数组件中执行副作用操作(用于模拟类组件中的生命周期钩子)

1. React中的副作用操作:
       
       * 发ajax请求数据获取
       
       * 设置订阅 / 启动定时器
       
       * 手动更改真实DOM
   
2. 语法和说明: 

      ```jsx
        useEffect(() => { 
          // 在此可以执行任何带副作用操作
          return () => { // 在组件卸载前执行
            // 在此做一些收尾工作, 比如清除定时器/取消订阅等
          }
        }, [stateValue]) // 如果指定的是[], 回调函数只会在第一次render()后执行，即什么都不监听
      ```

3. 可以把 `useEffect` Hook 看做如下三个函数的组合
       * `componentDidMount()`
       * `componentDidUpdate()`
       * `componentWillUnmount()` 

```jsx
import React from 'react'
import ReactDOM from 'react-dom'
export default function Demo() {
    const [count, setCount] = React.useState(0)

    React.useEffect(() => {
        let timer = setInterval(() => {
            setCount(count => count + 1)
        }, 1000)
        return () => {
            clearInterval(timer)
        }
    }, [])

    function add() {
        // setCount(count + 1) // 第一种写法
        setCount(count => count + 1) // 第二种写法
    }

    function unmount() {
        // 这是18的写法：目前卸载组件能成功卸载但会报warning，日后再研究一下React18卸载组件的方法
        // ReactDOM.createRoot(document.getElementById('root')).unmount()
        // 所以用下17
        ReactDOM.unmountComponentAtNode(document.getElementById('root'))
    }

    return (
        <div>
            <h2>当前求和为：{count}</h2>
            <button onClick={add}>点击+1</button>
            <button onClick={unmount}>卸载组件</button>
        </div>
    )
}
```

![GIF 2022-5-23 22-39-52.gif](https://s2.loli.net/2022/05/23/WaM5PvXHcdjQAye.gif)

### Ref Hook

Ref Hook可以在函数组件中存储/查找组件内的标签或任意其它数据

1. 语法: `const refContainer = useRef()`
2. 作用:保存标签对象,功能与`React.createRef()`一样

```jsx
import React from 'react'
import ReactDOM from 'react-dom'
export default function Demo() {
    const [count, setCount] = React.useState(0)

    const myRef = React.useRef()

    function show() {
        alert(myRef.current.value)
    }

    function add() {
        // setCount(count + 1) // 第一种写法
        setCount(count => count + 1) // 第二种写法
    }

    return (
        <div>
            <h2>当前求和为：{count}</h2>
            <button onClick={add}>点击+1</button>
            <input type="text" ref={myRef} />
        <button onClick={show}>提示数据</button>
        </div>
    )
}
```

![GIF 2022-5-23 22-38-47.gif](https://s2.loli.net/2022/05/23/Nl8v7MgzoLIWc5U.gif)

## Fragment

`<Fragment></Fragment>`可以传`key`和`children`属性，`<></>`不允许传任何属性

像这样：

```jsx
import React, { Component, Fragment } from 'react'

export default class Demo extends Component {
  render() {
    return (
      <Fragment>
          <input type="text" />
          <input type="text" />
      </Fragment>
    )
  }
}
```

![image.png](https://s2.loli.net/2022/05/24/WOHLy2z9XcuJp1e.png)

## Context

一种组件间通信方式, 常用于【祖组件】与【后代组件】间通信

在应用开发中一般不用context, 一般都用它的封装react插件

1. 创建Context容器对象：`const XxxContext = React.createContext()`  	

2. 渲染子组件时，外面包裹`XxxContext.Provider`, 通过value属性给后代组件传递数据：

   ```jsx
   <xxxContext.Provider value={数据}>
   	子组件
   </xxxContext.Provider>
   ```

3. 后代组件读取数据：

   ```jsx
   1. //第一种方式:仅适用于类组件 
        static contextType = xxxContext  // 声明接收context
        this.context // 读取context中的value数据
   2. //第二种方式: 函数组件与类组件都可以
        <xxxContext.Consumer>
          {
            value => ( // value就是context中的value数据
              要显示的内容
            )
          }
        </xxxContext.Consumer>
   ```

```jsx
import React, { Component } from 'react'
import './index.css'

// 创建用于保存用户名的Context对象
const UserNameContext = React.createContext()
const {Provider, Consumer} = UserNameContext

export default class Demo extends Component {

    state = {username: 'tom', age: 18}

    render() {
        const {username, age} = this.state
        return (
            <div className='com' style={{'width': '500px'}}>
                <h1>这是Demo组件</h1>
                <h2>用户名为：{username}</h2>
                <Provider value={{username, age}}>
                    <A />
                </Provider>
            </div>
        )
    }
}

class A extends Component {
    render() {
        return (
            <div className='com'>
                <h3>这是A组件</h3>
                <h4>不展示用户名</h4>
                <B />
            </div>
        )
    }
}

/* class B extends Component {
    // 需要Context就“举手” - 声明接收Context
    static contextType = UserNameContext
    render() {
        const {username, age} = this.context
        return (
            <div className='com'>
                <h3>这是B组件</h3>
                <h4>从Demo接收到的用户名为：{username}，年龄为：{age}</h4>
            </div>
        )
    }
} */

function B() {
  return (
    <div className='com'>
        <h3>这是B组件</h3>
        <Consumer>
            {
                value => <h4>从Demo接收到的用户名为：{value.username}，年龄为：{value.age}</h4>
            }
        </Consumer>
    </div>
  )
}
```

![image.png](https://s2.loli.net/2022/05/24/NADkFHoSvxOMh7V.png)

## 组件优化

### Component的2个问题

1. 只要执行`setState()`，即使不改变状态数据，组件也会重新`render()` => 效率低
2. 只要前组件重新`render()`，就会自动重新`render`子组件，纵使子组件没有用到父组件的任何数据 => 效率低
3. 原因：`Component`中的`shouldComponentUpdate()`总是返回`true`

### 效率高的做法

只有当组件的`state`或`props`数据发生改变时才重新`render()`

1. 重写`shouldComponentUpdate()`方法，比较新旧`state`或`props`数据, 如果有变化才返回`true`，如果没有返回`false`

   ```jsx
   import React, { Component } from 'react'
   
   export default class Parent extends Component {
   
       state = {carName: '奔驰'}
   
       changeCar = () => {
           this.setState({carName: '迈巴赫'})
       }
   
       shouldComponentUpdate(nextProps, nextState) {
           console.log(nextProps, nextState) // 接下来要变化的目标props和目标state
           console.log(this.props, this.state) // 目前的props和state
           if(JSON.stringify(this.state) === JSON.stringify(nextState)) {
               return false
           } return true
       }
   
       render() {
           console.log('parent--render')
           const {carName} = this.state
           return (
               <div style={{ 'width': '500px', 'backgroundColor': 'skyblue', 'padding': '10px' }}>
                   <h3>这是Parent组件</h3>
                   <span>车名字是： {carName}</span>
                   <br /><button onClick={this.changeCar}>点击换车</button>
                   <Child carName='宝马'/>
               </div>
           )
       }
   }
   
   class Child extends Component {
       shouldComponentUpdate(nextProps, nextState) {
           console.log(nextProps, nextState) // 接下来要变化的目标props和目标state
           console.log(this.props, this.state) // 目前的props和state
           if(JSON.stringify(this.props) === JSON.stringify(nextProps)) {
               return false
           } return true
       }
       render() {
           console.log('child--render')
           return (
               <div style={{ 'width': '100%', 'backgroundColor': 'orange', 'padding': '10px', 'marginTop': '20px' }}>
                   <h3>这是Child组件</h3>
                   <span>车名字是： {this.props.carName}</span>
               </div>
           )
       }
   }
   ```

2. 使用`PureComponent`，`PureComponent`重写了`shouldComponentUpdate()`, 只有`state`或`props`数据有变化才返回true
   项目中一般使用`PureComponent`来优化

   ```jsx
   import React, { PureComponent } from 'react'
   
   export default class Parent extends PureComponent {
   
       state = {carName: '奔驰'}
   
       changeCar = () => {
           this.setState({carName: '迈巴赫'})
       }
   
       render() {
           console.log('parent--render')
           const {carName} = this.state
           return (
               <div style={{ 'width': '500px', 'backgroundColor': 'skyblue', 'padding': '10px' }}>
                   <h3>这是Parent组件</h3>
                   <span>车名字是： {carName}</span>
                   <br /><button onClick={this.changeCar}>点击换车</button>
                   <Child carName='宝马'/>
               </div>
           )
       }
   }
   
   class Child extends PureComponent {
       render() {
           console.log('child--render')
           return (
               <div style={{ 'width': '100%', 'backgroundColor': 'orange', 'padding': '10px', 'marginTop': '20px' }}>
                   <h3>这是Child组件</h3>
                   <span>车名字是： {this.props.carName}</span>
               </div>
           )
       }
   }
   ```

   `PureComponent`只是进行`state`和`props`数据的浅比较，如果只是数据对象内部数据变了, 返回`false` ，不要直接修改`state`数据, 而是要产生新数据
   ![image.png](https://s2.loli.net/2022/05/24/bLiPEwyF5VxhrsZ.png)

## render props

向组件内部动态传入带内容的结构(标签)：

1. `Vue`中: 

   * 使用slot技术, 也就是通过组件标签体传入结构  `<A><B/></A>`

2. `React`中:

   * 使用`children props`: 通过组件标签体传入结构

     ```jsx
     import React, { Component } from 'react'
     
     export default class Parent extends Component {
         render() {
             return (
                 <div style={{ 'width': '500px', 'backgroundColor': 'skyblue', 'padding': '10px' }}>
                     <h3>这是Parent组件</h3>
                     <A><B/></A>
                 </div>
             )
         }
     }
     
     class A extends Component {
         state = {name: 'tom'}
         render() {
             console.log(this)
             const {name} = this.state
             return (
                 <div style={{ 'width': '100%', 'backgroundColor': 'orange', 'padding': '10px' }}>
                     <h3>这是A组件</h3>
                     {this.props.children}
                 </div>
             )
         }
     }
     
     class B extends Component {
         render() {
             console.log('render--B')
             return (
                 <div style={{ 'width': '100%', 'backgroundColor': 'rgb(79, 207, 93)', 'padding': '10px' }}>
                     <h3>这是B组件</h3>
                 </div>
             )
         }
     }
     ```

     ![image.png](https://s2.loli.net/2022/05/24/abSJCGwYvpL2WQD.png)

   * 使用`render props`: 通过组件标签属性传入结构,而且可以携带数据，一般用`render`函数属性

     ```jsx
     import React, { Component } from 'react'
     
     export default class Parent extends Component {
         render() {
             return (
                 <div style={{ 'width': '500px', 'backgroundColor': 'skyblue', 'padding': '10px' }}>
                     <h3>这是Parent组件</h3>
                     <A render={name => <B name={name}/>} />
                 </div>
             )
         }
     }
     
     class A extends Component {
         state = {name: 'tom'}
         render() {
             console.log(this)
             const {name} = this.state
             return (
                 <div style={{ 'width': '100%', 'backgroundColor': 'orange', 'padding': '10px' }}>
                     <h3>这是A组件</h3>
                     {this.props.render(name)}
                 </div>
             )
         }
     }
     
     class B extends Component {
         render() {
             console.log('render--B')
             return (
                 <div style={{ 'width': '100%', 'backgroundColor': 'rgb(79, 207, 93)', 'padding': '10px' }}>
                     <h3>这是B组件, {this.props.name}</h3>
                 </div>
             )
         }
     }
     ```

     ![image.png](https://s2.loli.net/2022/05/24/aVNLdvOXqhZywEG.png)



## 错误边界

错误边界(`Error boundary`)：用来捕获后代组件错误，渲染出备用页面，只使用于生产环境

只能捕获**后代**组件生命周期产生的错误，不能捕获自己组件产生的错误和其他组件在合成事件、定时器中产生的错误

```jsx
import React, { Component } from 'react'
import Child from './Child'

export default class Parent extends Component {

    state = {
        hasError: '' // 用于标识子组件是否产生错误
    }

    // 当子组件出现报错时，会触发getDerivedStateFromError调用，并携带错误信息
    static getDerivedStateFromError(error) {
        console.log(error)
        return {hasError: error}
    }

    componentDidCatch(error, info) {
        console.log('统计错误次数，发送给后台') // 统计错误次数，反馈给服务器
    }

    render() {
        return (
            <div>
                <h2>这是Parent组件</h2>
                {this.state.hasError ? <h2>出现了点小问题...</h2> : <Child />}
            </div>
        )
    }
}
```

## 组件间通信方式总结

### 组件间的关系

- 父子组件
- 兄弟组件（非嵌套组件）
- 祖孙组件（跨级组件）

### 几种通信方式

1. `props`
   * `children props`
   * `render props`
2. 消息订阅-发布
   * `pub-sub`、`event`等
3. 集中式管理
   * `redux`、`dva`等
4. `conText`
   * 生产者-消费者模式

### 比较好的搭配方式

- 父子组件：`props`
- 兄弟组件：消息订阅-发布、集中式管理
- 祖孙组件(跨级组件)：消息订阅-发布、集中式管理、`conText`(开发用的少，封装插件用的多)

React学习07：React扩展

![image.png](https://s2.loli.net/2022/05/22/Esa2TL7X3S9jCIB.png)

`antd` 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。





## 特性

- 🌈 提炼自企业级中后台产品的交互语言和视觉风格。
- 📦 开箱即用的高质量 React 组件。
- 🛡 使用 TypeScript 开发，提供完整的类型定义文件。
- ⚙️ 全链路开发和设计工具体系。
- 🌍 数十个国际化语言支持。
- 🎨 深入每个细节的主题定制能力。

[官网](https://ant.design/index-cn)&nbsp;&nbsp;&nbsp;&nbsp;[GitHub](https://github.com/ant-design/ant-design/)

## 安装与使用

```bash
npm install antd
yarn add antd
```

### Demo

```jsx
import React, { Component } from 'react'
import { Button, DatePicker } from 'antd'
import { QqOutlined } from '@ant-design/icons'
import 'antd/dist/antd.css'

const {RangePicker} = DatePicker


export default class App extends Component {

    render() {
        return (
            <div>
                App....
                <Button type="primary">Primary Button</Button>
                <Button icon={<QqOutlined />}>Primary Button</Button>
                <button>点击！</button>
                <QqOutlined />
                <DatePicker />
                <RangePicker />
            </div>
        )
    }
}
```

![image.png](https://s2.loli.net/2022/05/22/NMY2EdcuSK6jpvG.png)

### 样式的按需引入

[官方文档](https://ant.design/docs/react/use-with-create-react-app-cn#%E9%AB%98%E7%BA%A7%E9%85%8D%E7%BD%AE)

安装依赖：

```bash
npm i craco babel-plugin-import
```

如果报错则添加后缀`--legacy-peer-deps`

修改`package.json`如下：

```json
"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
  "eject": "react-scripts eject"
},
```

在项目根目录创建`craco.config.js`，内容如下：

```js
/* craco.config.js */
module.exports = {
    babel: {
        plugins: [
            [
                'import',
                {
                    libraryName: 'antd',
                    libraryDirectory: 'es',
                    style: 'css',
                }
            ]
        ]
    }
}
```

即可实现`antd4`的按需引入

### 自定义主题

安装依赖：

```bash
npm i craco-less
```

在`src/`下创建`App.less`，引用less文件：

```less
@import '~antd/dist/antd.less';
```

在`App.jsx`中引入样式：`import './App.less'`

修改`craco.config.js`如下：

```js
/* craco.config.js */
const CracoLessPlugin = require('craco-less')

module.exports = {
    plugins: [
        {
            plugin: CracoLessPlugin,
            options: {
                lessLoaderOptions: {
                    lessOptions: {
                        modifyVars: { '@primary-color': '#1DA57A' },
                        javascriptEnabled: true
                    }
                }
            }
        }
    ],
    babel: {
        plugins: [
            [
                'import',
                {
                    libraryName: 'antd',
                    libraryDirectory: 'es',
                    style: true
                }
            ]
        ]
    }
}
```

完成自定义主题的配置：

![image.png](https://s2.loli.net/2022/05/22/ovXUT3KiJHpr2c5.png)

React Router 6 概述

`setState`

相关理解

SPA

函数相关

call()