React拓展
一. react-router-dom@6拓展
react-router-dom的6版本是2021年年尾发布的，对5版本做出了一些路由组件用法上的修改，以及做了一些新增
1.概述
-
React Router 以三个不同的包发布到 npm 上，它们分别为：
- react-router: 路由的核心库，提供了很多的：组件、钩子。
- react-router-dom: 包含react-router所有内容，并添加一些专门用于 DOM 的组件，例如
<BrowserRouter>等 。 - react-router-native: 包括react-router所有内容，并添加一些专门用于ReactNative的API，例如:
<NativeRouter>等。
-
与React Router 5.x 版本相比，改变了什么？
-
内置组件的变化：移除
<Switch/>，新增<Routes/>等。 -
语法的变化：
component={About}变为element={<About/>}等。 -
新增多个hook：
useParams、useNavigate、useMatch等。 -
官方明确推荐函数式组件了！！！
…
-
2.Component
1. <BrowserRouter>
-
说明：
<BrowserRouter>用于包裹整个应用。 -
示例代码：
import React from "react"; import ReactDOM from "react-dom"; import { BrowserRouter } from "react-router-dom"; ReactDOM.render( <BrowserRouter> {/* 整体结构（通常为App组件） */} </BrowserRouter>,root );
2. <HashRouter>
- 说明：作用与
<BrowserRouter>一样，但<HashRouter>修改的是地址栏的hash值。 - 备注：6.x版本中
<HashRouter>、<BrowserRouter>的用法与 5.x 相同。
3. <Routes/> 与 <Route/>
-
v6版本中移除了先前的
<Switch>，引入了新的替代者：<Routes>。 -
<Routes>和<Route>要配合使用，且必须要用<Routes>包裹<Route>。 -
<Route>相当于一个 if 语句，如果其路径与当前 URL 匹配，则呈现其对应的组件。 -
<Route caseSensitive>属性用于指定：匹配时是否区分大小写（默认为 false）。 -
当URL发生变化时，
<Routes>都会查看其所有子<Route>元素以找到最佳匹配并呈现组件 。 -
<Route>也可以嵌套使用，且可配合useRoutes()配置 “路由表” ，但需要通过<Outlet>组件来渲染其子路由。 -
示例代码：
<Routes> /*path属性用于定义路径，element属性用于定义当前路径所对应的组件*/ <Route path="/login" element={<Login />}></Route> /*用于定义嵌套路由，home是一级路由，对应的路径/home*/ <Route path="home" element={<Home />}> /*test1 和 test2 是二级路由,对应的路径是/home/test1 或 /home/test2*/ <Route path="test1" element={<Test/>}></Route> <Route path="test2" element={<Test2/>}></Route> </Route> //Route也可以不写element属性, 这时就是用于展示嵌套的路由 .所对应的路径是/users/xxx <Route path="users"> <Route path="xxx" element={<Demo />} /> </Route> </Routes>
4. <Link>
-
作用: 修改URL，且不发送网络请求（路由链接）。
-
注意: 外侧需要用
<BrowserRouter>或<HashRouter>包裹。 -
示例代码：
import { Link } from "react-router-dom"; function Test() { return ( <div> <Link to="/路径">按钮</Link> </div> ); }
一级路由案例：
import React from 'react'
// 引入Navigate重定向内置组件
import { Route, Routes, Link, Navigate } from "react-router-dom"
import About from './pages/About'
import Home from './pages/Home'
export default function App() {
return (
<div>
<Link to="/about">点我跳转about</Link>
<br />
<Link to="/home">点我跳转Home</Link>
<Routes>
{/* 注意跳转的组件写法element={<></>} ,写上caseSensitive则区分大小写 */}
<Route path='/ABout' caseSensitive element={<About></About>}></Route>
<Route path='/Home' element={<Home></Home>}></Route>
{/* 切换到根路由时会重定向到Home组件,在react-dom5版本时，这里需要引入Redirect组件 */}
{/* <Redirect></Redirect> */}
{/* react-dom6版本删除了Redirect组件，取而代之的是使用Navigate内置组件 */}
{/* replace默认为false，即使通过push的方式添加历史记录 */}
<Route path='/' element={<Navigate to="/home" replace={false}></Navigate>}></Route>
</Routes>
</div>
)
}
Navigate重定向例子：
// 引入useState，指代在函数式组件中操作状态
import React, { useState } from 'react'
import { Navigate } from 'react-router-dom'
export default function Home() {
// useState(1)返回一个数组[状态值，操作此状态的方法]
const [sum, setSum] = useState(1)
console.log(sum);
return (
<div>
<h3>我是home内容</h3>
{/* replace默认为false，即使通过push的方式添加历史记录 */}
{sum === 2 ? <Navigate to="/about" replace={false} /> : <h4>当前sum的值为{sum}</h4>}
{/* <h4>当前sum的值为{sum}</h4> */}
<button onClick={() => setSum(2)}>点我修改sum值</button>
{/* <Navigate to={sum === 2 ? "/about" : ""} /> */}
</div>
)
}
5. <NavLink>
-
作用: 与
<Link>组件类似，且可实现导航的“高亮”效果。 -
示例代码：
import React from 'react' // 引入Navigate重定向内置组件 import { Route, Routes, Link, Navigate, NavLink } from "react-router-dom" import About from './pages/About' import Home from './pages/Home' import "./App.scss" //引入NavLink点击路由链接样式 export default function App() { // 点击路由连接NavLink就会切换类名样式，其中isActive参数表示当点击了此路由连接isActive就会为true function isActiveStyle({ isActive }) { console.log(isActive); return isActive ? "activeStyle" : "" } return ( <div> {/* NavLink为点击路由链接显示高亮的组件，但是要实现配置样式 */} <NavLink to="/about" className={isActiveStyle}>点我跳转about</NavLink> <br /> <NavLink to="/home">点我跳转Home</NavLink> <Routes> {/* 注意跳转的组件写法element={<></>} ,写上caseSensitive则区分大小写 */} {/* end属性表示当点击当前路由的子路由时，就会自动将子路由的父路由的链接高亮关闭显示 */} <Route path='/about' caseSensitive end element={<About></About>}></Route> <Route path='/Home' element={<Home></Home>}></Route> {/* 切换到根路由时会重定向到Home组件,在react-dom5版本时，这里需要引入Redirect组件 */} {/* <Redirect></Redirect> */} {/* react-dom6版本删除了Redirect组件，取而代之的是使用Navigate内置组件 */} {/* replace默认为false，即使通过push的方式添加历史记录 */} <Route path='/' element={<Navigate to="/home" replace={false}></Navigate>}></Route> </Routes> </div> ) }
6. <Navigate>
-
作用：只要
<Navigate>组件被渲染，就会修改路径，切换视图。 -
replace属性用于控制跳转模式（push 或 replace，默认是push）。 -
示例代码：
import React from 'react' // 引入Navigate重定向内置组件 import { Route, Routes, Link, Navigate } from "react-router-dom" import About from './pages/About' import Home from './pages/Home' export default function App() { return ( <div> <Link to="/about">点我跳转about</Link> <br /> <Link to="/home">点我跳转Home</Link> <Routes> {/* 注意跳转的组件写法element={<></>} */} <Route path='/about' element={<About></About>}></Route> <Route path='/Home' element={<Home></Home>}></Route> {/* 切换到根路由时会重定向到Home组件,在react-dom5版本时，这里需要引入Redirect组件 */} {/* <Redirect></Redirect> */} {/* react-dom6版本删除了Redirect组件，取而代之的是使用Navigate内置组件 */} {/* replace默认为false，即使通过push的方式添加历史记录 */} <Route path='/' element={<Navigate to="/home" replace={false}></Navigate>}></Route> </Routes> </div> ) }
7. <Outlet>
-
当
<Route>产生嵌套时，渲染其对应的后续子路由。类似于vue中的router-view组件，用于做路由渲染组件的插槽。 -
示例代码：
//根据路由表生成对应的路由规则 const element = useRoutes([ { path:'/about', element:<About/> }, { path:'/home', element:<Home/>, children:[ { path:'news', element:<News/> }, { path:'message', element:<Message/>, } ] } ]) //Home.js 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> ) }
3.Hooks
1. useRoutes()
-
作用：根据路由表，动态创建
<Routes>和<Route>。 -
示例代码：
//路由表配置：src/routes/index.js import About from '../pages/About' import Home from '../pages/Home' import {Navigate} from 'react-router-dom' export default [ { path:'/about', element:<About/> }, { path:'/home', element:<Home/> }, { path:'/', element:<Navigate to="/about"/> } ] //App.jsx import React from 'react' import {NavLink,useRoutes} from 'react-router-dom' import routes from './routes' export default function App() { //根据路由表生成对应的路由规则 const element = useRoutes(routes) return ( <div> ...... {/* 注册路由 */} {element} ...... </div> ) }
2. 编程式路由useNavigate()
-
作用：返回一个函数用来实现编程式导航。
-
示例代码：
import React from 'react' import {useNavigate} from 'react-router-dom' export default function Demo() { const navigate = useNavigate() const handle = () => { //第一种使用方式：指定具体的路径 navigate('/login', { replace: false, state: {a:1, b:2} }) //第二种使用方式：传入数值进行前进或后退，类似于5.x中的 history.go()方法 navigate(-1) } return ( <div> <button onClick={handle}>按钮</button> </div> ) }
通过路由url传参有三种方式：通过params、search、location向组件进行传参。
3. useParams()
-
作用：回当前匹配路由的
params参数，类似于5.x中的match.params。 -
示例代码：
// 路由链接传递过来的params参数,{/* 使用params方式进行传参，格式为restful格式标准 */} //<NavLink to={`detail/${item.id}/${item.title}/${item.content}`} >{item.title}</NavLink> // 消息详情页 import React from 'react' import { useParams } from 'react-router-dom' export default function Detail() { // 获取URL中携带过来的params参数 let params = useParams() console.log(params); return ( <div> <li>{params.id}</li> <li>{params.title}</li> <li>{params.content}</li> </div> ) }
4. useSearchParams()
-
作用：用于读取和修改当前位置的 URL 中的查询字符串。
-
返回一个包含两个值的数组，内容分别为：当前的seaech参数、更新search的函数。
-
示例代码：
// 消息详情页 import React from 'react' import { useSearchParams } from 'react-router-dom' export default function Detail() { // 使用方式与useState类似，它返回的是一个数组，所以需要使用数组解构来拿到传递的参数,但是需要调用.get("id")来获取id字段(与map用法类似)，和更新search参数用到的方法 const [searchParams, setSearch] = useSearchParams() let res = {} // 用res对象来保存路由url携带的参数字段以及内容 for (const item of searchParams.keys()) { res[item] = searchParams.get(item) } console.log(res); // 点击按钮触发修改search参数的回调 const changeSearch = () => { // 修改url传递的search参数内容 setSearch(`id=33&title=哈哈&content=好玩儿的react`) } return ( <div> <li>{res.id}</li> <li>{res.title}</li> <li>{res.content}</li> <button onClick={changeSearch}>点我更新一下收到的参数内容</button> </div> ) }
5. useLocation()
-
作用：获取当前 location 信息，对标5.x中的路由组件的
location属性。 -
示例代码：
// 消息详情页 import React from 'react' // 引入useLocation方法来获取location对象 import { useLocation } from 'react-router-dom' export default function Detail() { // 获取location对象，location对象中含有通过serach方式传递的路由参数，也含有state参数 // hash: "" // key: "b8o129k8" // pathname: "/home/message/detail" // search: "" // state: {id: '001', title: '消息1', content: 'wh'} let location = useLocation() console.log(location); return ( <div> <li>{location.state.id}</li> <li>{location.state.title}</li> <li>{location.state.content}</li> </div> ) }
6. useMatch()
-
作用：返回当前匹配信息，对标5.x中的路由组件的
match属性。 -
示例代码：
<Route path="/login/:page/:pageSize" element={<Login />}/> <NavLink to="/login/1/10">登录</NavLink> export default function Login() { const match = useMatch('/login/:x/:y') console.log(match) //输出match对象 //match对象内容如下： /* { params: {x: '1', y: '10'} pathname: "/LoGin/1/10" pathnameBase: "/LoGin/1/10" pattern: { path: '/login/:x/:y', caseSensitive: false, end: false } } */ return ( <div> <h1>Login</h1> </div> ) }
7. useInRouterContext()
作用：如果组件在 <Router> 的上下文中呈现，则 useInRouterContext 钩子返回 true，否则返回 false。
8. useNavigationType()
- 作用：返回当前的导航类型（用户是如何来到当前页面的）。
- 返回值：
POP、PUSH、REPLACE。 - 备注：
POP是指在浏览器中直接打开了这个路由组件（刷新页面）。
9. useOutlet()
-
作用：用来呈现当前组件中渲染的嵌套路由。
-
示例代码：
const result = useOutlet() console.log(result) // 如果嵌套路由没有挂载,则result为null // 如果嵌套路由已经挂载,则展示嵌套的路由对象
10.useResolvedPath()
- 作用：给定一个 URL值，解析其中的：path、search、hash值。
二. React拓展
1. 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。
4.callback是可选的回调函数, 它在状态更新、界面也更新后(render调用后)才被调用。
总结:
1.对象式的setState是函数式的setState的简写方式(语法糖)
2.使用原则：
(1).如果新状态不依赖于原状态 ===> 使用对象方式
(2).如果新状态依赖于原状态 ===> 使用函数方式
(3).如果需要在setState()执行后获取最新的状态数据,
要在第二个callback函数中读取
2. lazyLoad
路由组件的lazyLoad
//1.通过React的lazy函数配合import()函数动态加载路由组件 ===> 路由组件代码会被分开打包
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). 可以让你在函数组件中使用 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让函数组件也可以有state状态, 并进行状态数据的读写操作
(2). 语法: const [xxx, setXxx] = React.useState(initValue)
(3). useState()说明:
参数: 第一次初始化指定的值在内部作缓存
返回值: 包含2个元素的数组, 第1个为内部当前状态值, 第2个为更新状态值的函数
(4). setXxx()2种写法:
setXxx(newValue): 参数为非函数值, 直接指定新的状态值, 内部用其覆盖原来的状态值
setXxx(value => newValue): 参数为函数, 接收原本的状态值, 返回新的状态值, 内部用其覆盖原来的状态值
4. Effect Hook
(1). Effect Hook 可以让你在函数组件中执行副作用操作(用于模拟类组件中的生命周期钩子)
(2). React中的副作用操作:
发ajax请求数据获取
设置订阅 / 启动定时器
手动更改真实DOM
(3). 语法和说明:
useEffect(() => {
// 在此可以执行任何带副作用操作
return () => { // 在组件卸载前执行
// 在此做一些收尾工作, 比如清除定时器/取消订阅等
}
}, [stateValue]) // 如果指定的是[], 回调函数只会在第一次render()后执行
(4). 可以把 useEffect Hook 看做如下三个函数的组合
componentDidMount()
componentDidUpdate()
componentWillUnmount()
5. Ref Hook
(1). Ref Hook可以在函数组件中存储/查找组件内的标签或任意其它数据
(2). 语法: const refContainer = useRef()
(3). 作用:保存标签对象,功能与React.createRef()一样
4. Fragment
使用
<Fragment><Fragment>
<></>
作用
可以不用必须有一个真实的DOM根标签了
5. Context
理解
一种组件间通信方式, 常用于【祖组件】与【后代组件】间通信
使用
1) 创建Context容器对象：
const XxxContext = React.createContext()
2) 渲染子组时，外面包裹xxxContext.Provider, 通过value属性给后代组件传递数据：
<xxxContext.Provider value={数据}>
子组件
</xxxContext.Provider>
3) 后代组件读取数据：
//第一种方式:仅适用于类组件
static contextType = xxxContext // 声明接收context
this.context // 读取context中的value数据
//第二种方式: 函数组件与类组件都可以
<xxxContext.Consumer>
{
value => ( // value就是context中的value数据
要显示的内容
)
}
</xxxContext.Consumer>
注意
在应用开发中一般不用context, 一般都用它的封装react插件
6. 组件优化
Component的2个问题
只要执行setState(),即使不改变状态数据, 组件也会重新render() ==> 效率低
只当前组件重新render(), 就会自动重新render子组件，纵使子组件没有用到父组件的任何数据 ==> 效率低
效率高的做法
只有当组件的state或props数据发生改变时才重新render()
原因
Component中的shouldComponentUpdate()总是返回true
解决
办法1:
重写shouldComponentUpdate()方法
比较新旧state或props数据, 如果有变化才返回true, 如果没有返回false
办法2:
使用PureComponent
PureComponent重写了shouldComponentUpdate(), 只有state或props数据有变化才返回true
注意:
只是进行state和props数据的浅比较, 如果只是数据对象内部数据变了, 返回false
不要直接修改state数据, 而是要产生新数据
项目中一般使用PureComponent来优化
7. render props
如何向组件内部动态传入带内容的结构(标签)?
Vue中:
使用slot技术, 也就是通过组件标签体传入结构 <A><B/></A>
React中:
使用children props: 通过组件标签体传入结构
使用render props: 通过组件标签属性传入结构,而且可以携带数据，一般用render函数属性
children props
<A>
<B>xxxx</B>
</A>
{this.props.children}
问题: 如果B组件需要A组件内的数据, ==> 做不到
render props
<A render={(data) => <C data={data}></C>}></A>
A组件: {this.props.render(内部state数据)}
C组件: 读取A组件传入的数据显示 {this.props.data}
8. 错误边界
理解：
错误边界(Error boundary)：用来捕获后代组件错误，渲染出备用页面
特点：
只能捕获后代组件生命周期产生的错误，不能捕获自己组件产生的错误和其他组件在合成事件、定时器中产生的错误
使用方式：
getDerivedStateFromError配合componentDidCatch
// 生命周期函数，一旦后台组件报错，就会触发
static getDerivedStateFromError(error) {
console.log(error);
// 在render之前触发
// 返回新的state
return {
hasError: true,
};
}
componentDidCatch(error, info) {
// 统计页面的错误。发送请求发送到后台去
console.log(error, info);
}
9. 组件通信方式总结
组件间的关系：
- 父子组件
- 兄弟组件（非嵌套组件）
- 祖孙组件（跨级组件）
几种通信方式：
1.props：
(1).children props
(2).render props
2.消息订阅-发布：
pubs-sub、event等等
3.集中式管理：
redux、dva等等
4.conText:
生产者-消费者模式
比较好的搭配方式：
父子组件：props
兄弟组件：消息订阅-发布、集中式管理
祖孙组件(跨级组件)：消息订阅-发布、集中式管理、conText(开发用的少，封装插件用的多)
515
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
