React【useMemo、useCallback、React Router简介、BrowserRouter编辑、HashRouter、Route & Routes、Outlet】(八)

缺乏、安全感 2024-02-20 08:47 43阅读 0赞

![1c46f92b26124817a93e339daad4858c.gif][]

**目录**

useMemo

useCallback

React Router简介

BrowserRouter编辑

HashRouter

Route & Routes

Outlet

Link && NavLink

路由传递参数\_params传参

路由传递参数\_search传参

路由传递参数\_createSearchParams

路由传递参数\_state传参

useNavigate 传参

--------------------

### useMemo    ###

![62247e0450ad4ba29628c62741dc0e9b.png][]

**useMemo(fn, deps)**

返回一个缓存值。  
第一个参数为函数，用来返回需要缓存的值，第二个参数为依赖项数组。  
它仅会在某个依赖项改变时才重新调用函数进行计算，改变缓存值的状态（如果没有提供依赖项数组， useMemo 在每次渲染时都会计算新的值）。这种优化有助于避免在每次渲染时都进行高开销的计算。

> 提示：  
> useMemo跟useEfect区别  
> useMemo用于去缓存数据，诸如副作用这类的操作属于**useEffect** 的适用范畴，而不是 **useMemo**

//UseMemoTest.js
    import React, { useState, useMemo,useCallback } from 'react';
    export default function UseMemoTest() {
        const [color, setColor] = useState()
        const [num1, setNum1] = useState(0)
        const [num2, setNum2] = useState(0);
      
        const num = useMemo(
            //当依赖项中的num1或者num2发生变化时，重新执行该函数，不受其他state改变的影响
           () => {
                
                return num1+num2
           }
           ,
           [num1,num2]);
        return (
            <div>
                <button onClick={() => setNum1(num1 + 1)}>num1 +</button>
                <button onClick={() => setNum2(num2 + 1)}>num2 +</button>
                <h3>num1+num2={num}</h3>
                <button style={
       { color }} onClick={() => setColor('red')}>改变颜色</button>
            </div>
       );
    }

### useCallback    ###

![8aaaa75c1cd64e66bd544004883add2b.png][]

**useCallback(fn, deps)**

返回一个缓存函数。  
第一个参数为函数，是需要被缓存的函数，第二个参数为依赖项数组。  
它仅会在某个依赖项改变时才重新定义被缓存函数，（如果没有提供依赖项数组， **useCallback** 在每次渲染时都会重新定义函数）。

> 提示：  
> **useCallback(fn, deps)** 相当于 **useMemo(() => fn(), deps)** 。

import React, { useCallback, useEffect,useMemo, useState } from 'react'
    export default function UseMemoTest() {
        const [color, setColor] = useState('red')
        const [num1, setNum1] = useState(0)
        const [num2, setNum2] = useState(0)
        // 缓存值
        const num = useMemo(() => {
            console.log('num1+num2')
            return num1 + num2
       }, [num1, num2])
        // 缓存函数
        const changeNum1 = useCallback(() => {
            setNum1(num1 + 1)
       }, [num1])
    return (
            <div>
                <button onClick={changeNum1}>更改num1</button>
                <button onClick={() => setNum2(num2 + 1)}>更改num2</button>
                <button onClick={() => setColor('blue')}>更改color</button>
                <h3>num1+num2={num}</h3>
            </div>
       )
    }

### React Router简介    ###

![61449855ec4a496db13e8a5af00e815d.png][]

React Router 是一个基于 React之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步。  
我们的React应用是单页面应用（一般只有一个html文件），路由可以让我们实现页面内容的切换。

**1、react-router**  
为 React Router 提供核心路由功能，但是你不需要直接安装react-router

**2、react-router-dom**  
react-router-dom 是基于react-router的，适用于浏览器端应用，react-router-dom包含react-router的所有功能，并且又增加了适合在浏览器运行环境下的一些功能。

> 提示：  
> 如果你写 React Native 应用，你应该安装 react-router-native；  
> 当你安装 react-router-dom 或 react-router-native 时，都会将 react-router 作为依赖安装。  
> 这次我们的react-router-dom使用的版本是V6。

**安装 react-router-dom**

> **npm install react-router-dom** 或者 **yarn add react-router-dom**

**初步体验**

//src/index.js
    import React from 'react';
    import ReactDOM from 'react-dom/client';
    import './index.css';
    import { BrowserRouter, Route, Routes,Link, Outlet } from 'react-router-dom'
    import reportWebVitals from './reportWebVitals';
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(
      <React.StrictMode>
        <BrowserRouter>
          <div>
            <ul>
              <li>
                <Link to="/">首页</Link>
              </li>
              <li>
                <Link to="/user">用户页面</Link>
              </li>
            </ul>
            <hr />
            <Routes>
              <Route path="/" element={<App/>}>
                <Route index element={<Home/>} />
                <Route path="user" element={<User />}/>
                  
              </Route>
            </Routes>
          </div>
        </BrowserRouter>
      </React.StrictMode>
    );
    // // If you want to start measuringperformance in your app, pass a function
    // // to log results (for example:reportWebVitals(console.log))
    // // or send to an analytics endpoint.Learn more: https://bit.ly/CRA-vitals
    // reportWebVitals();
    function App(props) {
      return <>
        <h2>App</h2>
        <Outlet />
      </>
    }
    function Home() {
      return <h2>我是首页面</h2>
    }
    function User(props) {
      return <>
        < h2>我是用户页面</h2>
        <Outlet />
      </>
    }

### BrowserRouter   ![3cbcea6dce964dc8a5d7d66b53cdf513.png][] ###

**<BrowserRouter>** 使用HTML5 History API保持页面 和 URL 的同步，使用干净的URL将当前位置存储在浏览器的地址栏中。  
props  
**basename**

<BrowserRouter basename='/app'>
         {/* 代表浏览器打开页面的时候会有个/app的前缀 */}
          <div>
            <ul>
              <li>
                <Link to="/">首页</Link>
               {/*http://localhost:3000/app */}
              </li>
              <li>
                <Link to="/user">用户页面</Link>
               {/* 跳转到http://localhost:3000/app/user */}
              </li>
            </ul>
            <hr />
            <Routes>
              <Route path="/" element={<App/>}>
                <Route index element={<Home/>} />
                <Route path="user" element={<User />}/>
              </Route>
            </Routes>
          </div>
        </BrowserRouter>

**chidlren**  
路由的集合。

### HashRouter    ###

![14c27d505ffe479bb75fc764d558eb53.png][]

**＜HashRouter＞** 使用 Hash 模式路由保持页面 和 URL 的同步。

<HashRouter basename='/app'>
         {/* 代表浏览器打开页面的时候会有个/app的前缀*/}
          <div>
            <ul>
              <li>
                <Link to="/">首页</Link>
               {/* http://localhost:3000/#/app*/}
              </li>
              <li>
                <Link to="/user">用户页面</Link>
               {/* 跳转到http://localhost:3000/#/app/user */}
              </li>    
            </ul>
            <hr />
            <Routes>
              <Route path="/" element={<App />}>
                <Route index element={<Home />}/>
                <Route path="user" element={<User />}/>
              </Route>
            </Routes>
          </div>
        </HashRouter>

> **BrowserRouter** 与**HashRouter**区别：  
> 1、BrowseRouter使用HTML5的history API，HashRouter使用哈希  
> 1.1.地址表现形式不同  
> BrowserRouter : http://localhost:3000/app  
> HashRouter : http://localhost:3000/\#/app  
> 2、BrowseRouter地址的请求会发送到服务器，需要服务器的支持，而HashRouter的不会。
> 
> 3、官方推荐使用BrowserRouter。

###  ###

### Route & Routes ###

![69716b669b004d32a471658834fde5c1.png][]

**<Route>**

用来配置URL与UI，如果其路径与当前地址栏中URL匹配，则会呈现其元素。  
1、props  
path :设置访问路径  
element :设置对应URL要渲染的组件  
caseSensitive :设置路径是否区分大小写，默认为false

**<Routes>**  
包裹一组 **<Route>** ，每当地址发生变化时， **<Routes>** 都会查看其所有 **子<Route>元素** ，以找到最佳路径匹配并呈现对应的UI。

### Outlet    ###

![d159f38a61c440f088aa8757a811afd4.png][]

**<Outlet>**

父路由元素中应使用 **<Outlet>** 来渲染其子路由元素。这允许在呈现子路由时显示嵌套UI。  
如果URL跟父路由的路径完全匹配，则会默认渲染设置了index属性的子路由，如果子路由中没有设置index的，则不渲染任何子路由。

function App(props) {
      return <>
        <h2>App</h2>
       {/* 将来子路由的UI被渲染到Outlet这个位置 */}
        <Outlet />
      </>
    }

### Link && NavLink    ###

![87b83d478df9437aa03b6bb016ccae1f.png][]

**<Link>**

用户可以通过点击它来导航跳转到另一个页面。  
props：  
 **to** :设置点击后要跳转的页面地址  
**string** ：to的值为字符串，代表要跳转的路径  
**object** : to的值为对象，该对象可以包含下列属性：  
pathname: **<string>** 表示要链接到的路径  
search: **<string>** 查询参数  
hash: 一个放在URL中的Hash，例如 \#a-hash.

<Link to="/">首页</Link>
    <Link to="/user">用户页面</Link>
    {/*<Link to={
       {pathname:'/user'}} >用户页面</Link>*/}

**reloadDocument** :跳过路由，则直接实现 <a href/> 的功能  
**state** :location.state参数

**<NavLink>**

一个特殊的 <Link> ，它会知道当前被选中的项是哪个。被选中选会添加 .active class。

<NavLink to="/"  style={({ isActive }) => {
                  return isActive ? { color:'red' } : undefined
               }}>首页</NavLink>
    <NavLink to="/user"  style={({ isActive }) =>{
                  return isActive ? { color:'red' } : undefined
               }}>用户页面</NavLink>

**Navigate**

![a16aeb2a5d2f4c37839b0544372769e9.png][]

当渲染一个 <Navigate> 元素的时候，就会执行它指向的路由跳转。

一般逻辑发生变化后，想要跳转到其他页面（非手动点击方式）使用。

//index.js
    <Routes>
              <Route path='/login'  element= {<Login/>}/>
              <Route path="/" element={<App />}>
                <Route index element={<Home />}/>
                <Route path="user" element= {<User />}  caseSensitive>
                  <Route path='item' element= {<Item/>} />
                </Route>
              </Route>
    </Routes>

//pages/Login.js
    import React, { useRef, useState } from 'react'
    import { Navigate } from 'react-router-dom'
    export default function Login() {
        const nameRef = useRef()
        const pwdRef = useRef()
        const [isLogin, setIsLogin] = useState()
        const onLogin = (e) => {
            // 阻止默认事件
            e.preventDefault()
    
            // 如果输入了用户名跟密码。则登录成功，跳转到首页
            if (nameRef.current.value && pwdRef.current.value) {
                setIsLogin(true)
           }
       }
        return (
            <div>
                <h2>登录</h2>
                <form onSubmit={onLogin}>
                   用户名：<input ref={nameRef}required/>
                   密码：<input type='password' ref={pwdRef} required/>
                    <button type='submit'>登录</button>
                </form>
               {/* isLogin为ture,则跳转到首页 */}
               {isLogin&&<Navigate to='/' />}
            </div>
       )
    }

### 路由传递参数\_params传参    ###

![77bb8bffda3b4724b2af3fe590d4a43a.png][]

在要跳转的路由路径中使用 :params 这种语法传递参数，然后在跳转后的页面中使用 **useParams** 读取传递过来的参数。

<Route path="user/:city" element={<User />}/>
     {/* 设置参数的key值 */}

{/* 跳转路由的时候传递参数，参数值为beijing */}
    <NavLink to="user/xiaotong"  style={({ isActive }) => {
                  return isActive ? { color:'red' } : undefined
               }}>用户页面</NavLink>

import {  Outlet, useParams } from 'react-router-dom'
    function User(props) {
    const params= useParams()
    //获取传递过来的参数
    console.log(params)//{city:'xiaotong'}
      return <>
        < h2>我是用户页面</h2>
        <Outlet />
      </>
    }

### 路由传递参数\_search传参    ###

![7783c169d8164eb3b4b05ef7411c74ce.png][]

如果 **to** 接收一个对象，则可以通过对象的属性search传递参数：

{/* 通过search属性传递参数 */}
    <NavLink to= {
       {pathname:'user',search:`city=${'xiaotong'}`} } style={({ isActive }) => {
                  return isActive ? { color: 'red' } : undefined
               }}>用户页面</NavLink>

通过 **useSearchParams()** 获取参数：

function User(props) {
    // 通过useSearchParams读取通过search传递的参数
    const [searchParams,setSearchParams]=useSearchParams()
    console.log(searchParams.get('city'))//xiaotong
      return <>
        < h2>我是用户页面</h2>
        <Outlet />
      </>
    }

### 路由传递参数\_createSearchParams    ###

![5d33a071edfb4f7db98a63c46a011d43.png][]

使用 **createSearchParams** 支持传递对象或者数组

<NavLink to=
    {
       {pathname:'user',search:`${createSearchParams({city:'xiaotong',arr:'[1,2,3]'})}`}} style={({ isActive }) => {
                  return isActive ? { color:'red' } : undefined
               }}>用户页面</NavLink>

function User(props) {
    // 通过useSearchParams读取通过search传递的参数
    const [searchParams,setSearchParams]=useSearchParams()
    console.log(searchParams.get('city'))//xiaotong
    console.log(JSON.parse(searchParams.get('arr')) )//[1,2,3]
      return <>
        < h2>我是用户页面</h2>
       {/* 将来 */}
        <Outlet />
      </>
    }

### 路由传递参数\_state传参    ###

![a07cf569e61e4e18bc108fc9208c90c6.png][]

通过 **state** 属性传递参数：

<NavLink to='user' state=
    {
       {city:'beijing',arr:[1,2,3]}} style={({ isActive }) => {
                  return isActive ? { color: 'red' } : undefined
               }}>用户页面</NavLink>

使用 useLocation 来接收state传递的参数，useLocation会返回一个 location对象，只要浏览器地址发生改变，则这个location就会随着更新。

import { useLocation } from 'react-router-dom'
    function User(props) {
        
    // 通过useLocation读取通过state传递的参数
        const location = useLocation()
        console.log(location)
        console.log(location.state)//访问location的state属性即可
        return <>
            < h2>我是用户页面</h2>
        </>
    }

**useNavigate**

![5302908a62844680a307089ddc068fb2.png][]

这个hook返回一个函数，这个函数可以让我们进行编程式路由跳转。

import React, { useRef, useState } from 'react'
    import { Navigate, useNavigate } from 'react-router-dom'
    export default function Login() {
        const nameRef = useRef()
        const pwdRef = useRef()
        const navigate = useNavigate()
        // const [isLogin,setIslogin]=useState()
        const onLogin = (e) => {
            e.preventDefault()
    
            if (nameRef.current.value && pwdRef.current.value) {
                // setIslogin(true)
                navigate('/')
           }
       }
        return (
            <div>
                <h2>登录</h2>
                <form onSubmit={onLogin}>
                   用户名：<input ref={nameRef} required />
                   密码：<input type='password' ref={pwdRef} required />
                    <button type='submit'>登录</button>
                </form>
               {/* 如果isLogin为true，则跳转到首页*/}
               {/* {isLogin && <Navigate to='/'/>} */}
            </div>
       )
    }

### useNavigate 传参    ###

![063932ccbfd540899a1ab18e34c0ab3f.png][]

**params传参**

<Routes>
              <Route path="/" element={<App/>}>
                <Route index element={<Home/>} />
               {/* 设置参数的key值 */}
                <Route path="user/:city" element={<User />} />
              </Route>
              <Route path='/login' element= {<Login />} />
            </Routes>

<button onClick= {()=>navigate('/user/xiaotong')}>用户页
    </button>

function User(props) {
        //通过useParams获取参数
         const params= useParams()
         console.log(params)//{city:'xiaotong'}
      
        return <>
            < h2>我是用户页面</h2>
            
        </>

**search传参**

<button onClick={() => navigate({pathname:'user',search:`city=xiaotong`})}>用户页</button>

function User(props) {
        
         const [searchParams,setSearchParams]=useSearchParams()
         console.log(searchParams.get('city'))//xiaotong
        
        return <>
            < h2>我是用户页面</h2>
            
           {/* 将来 */}
           {/* <Outlet /> */}
        </>
    }

**state传参**

<button onClick={() => navigate('user',{state:{city:'xiaotong'}})}>用户页</button>

function User(props) {
       //通过useLocation获取state传递的参数
        const location = useLocation()
        console.log(location)
        console.log(location.state)
      
        return <>
            < h2>我是用户页面</h2>
          
        </>
    }

[1c46f92b26124817a93e339daad4858c.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/1ba2c49f848f4346827d4ac727793579.png
[62247e0450ad4ba29628c62741dc0e9b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/40850733473c427dafe2a24c5a28a234.png
[8aaaa75c1cd64e66bd544004883add2b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/e762e8360b8146afab1b5f4f80b19888.png
[61449855ec4a496db13e8a5af00e815d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/1e6283c7fbec4350a835c9cc8e16ea9b.png
[3cbcea6dce964dc8a5d7d66b53cdf513.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/1d12542cec604c1e81c3388c7e115dc4.png
[14c27d505ffe479bb75fc764d558eb53.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/a4ff0bf5ee654bbfbbc714ecd206c376.png
[69716b669b004d32a471658834fde5c1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/f1e4f20075ed442bbb8e2f7ebc54e5f0.png
[d159f38a61c440f088aa8757a811afd4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/2fe5d0f50ab743ba908fd5b0d86198fa.png
[87b83d478df9437aa03b6bb016ccae1f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/bcedf1a563da48d08952a03cf2119d7d.png
[a16aeb2a5d2f4c37839b0544372769e9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/80f940b5e8ff4142bf27c03f8c95d56e.png
[77bb8bffda3b4724b2af3fe590d4a43a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/dc16c51c982147ad84f86c9db1e6d62d.png
[7783c169d8164eb3b4b05ef7411c74ce.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/2f1cd7b66f3f498d80a3b69de79a4526.png
[5d33a071edfb4f7db98a63c46a011d43.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/deab56b1de77455dbc5ca0732501a270.png
[a07cf569e61e4e18bc108fc9208c90c6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/c95d98bb67e14bb9a9aab893b3c80781.png
[5302908a62844680a307089ddc068fb2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/494b76691ff745ff8c2c9031492e2ed2.png
[063932ccbfd540899a1ab18e34c0ab3f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/751677b97bfc41d1983560ee31f0e11f.png