react笔记 4 - Hooks，React Router 6等

cheems1
283 阅读10分钟

疑问

PureComponent 是如何对比的？

扩展

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调用后)才被调用。

总结:

  1. 对象式的setState是函数式的setState的简写方式(语法糖)
  2. 如果需要在setState()执行后获取最新的状态数据, 要在第二个callback函数中读取

路由组件的lazyLoad

//1.通过React的lazy函数配合import()函数动态加载路由组件 ===> 路由组件代码会被分开打包
const Login = lazy(() => import('@/pages/Login'))

//2.通过<Suspense>指定在加载得到路由打包文件前显示一个自定义loading界面
<Suspense fallback={<h1>loading.....</h1>}>
  <Switch>
    <Route path="/xxx" component={Login}/>
    <Redirect to="/login"/>
  </Switch>
</Suspense>

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()一样

Fragment

使用

<Fragment><Fragment>
<></>

作用

可以不用必须有一个真实的DOM根标签了

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.username},年龄: ${value.age}` }
    </xxxContext.Consumer>

注意

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

组件优化

Component的2个问题

  1. 只要执行setState(),即使不改变状态数据, 组件也会重新render() ==> 效率低
  2. 只当前组件重新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来优化

render props

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

Vue中: 
  使用slot技术, 也就是通过组件标签体传入结构  <A><B/></A>
React中:
  使用children props: 通过组件标签体传入结构
  使用render props: 通过组件标签属性传入结构,而且可以携带数据，一般用render函数属性

children props

<A>
  <B>xxxx</B>
</A>

// A组件中使用B组件:
{this.props.children}

render props

<A render={
  (data) => <C name={data}></C>
}></A>

// A组件中使用C组件: 
{this.props.render(xxx)}

C组件: 读取A组件传入的数据显示 this.props.name

错误边界

理解：

用来捕获后代组件错误，渲染出备用页面

特点：

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

使用方式：

getDerivedStateFromError 配合 componentDidCatch

// 生命周期函数，一旦后代组件报错，就会触发
static getDerivedStateFromError(error) {
    console.log(error);
    // 在render之前触发
    // 返回新的state
    return {
        hasError: true,
    };
}

// 后代组件报错时会触发
componentDidCatch(error, info) {
    // 统计页面的错误。发送请求发送到后台去
    console.log(error, info);
}

组件通信方式总结

组件间的关系：

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

几种通信方式：

  1.props：
    (1).children props
    (2).render props
  2.消息订阅-发布：
    pubs-sub 等
  3.集中式管理：
    redux、dva等等
  4.conText:
    生产者-消费者模式

比较好的搭配方式：

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

React Router 6 快速上手

概述

  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. 官方明确推荐函数式组件了！！！
      ......

Components

<Routes/> 与 <Route/>

  1. 移除 <Switch/> ，新增 <Routes/>。
  2. <Route> 中 component={About} 变为 element={<About/>}。
  3. <Route> 也可以嵌套使用。
  4. 示例代码：
<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>

<Navigate>

删除了<Redirect>，用<Navigate>代替。

  1. 作用：只要<Navigate>组件被渲染，就会修改路径，切换视图。
  2. replace属性用于控制跳转模式（push 或 replace，默认是push）。
  3. 示例代码：
import React,{useState} from 'react'
import {Navigate} from 'react-router-dom'

export default function Home() {
  const [sum,setSum] = useState(1)
  return (
    <div>
      <h3>我是Home的内容</h3>
      {/* 根据sum的值决定是否切换视图 */}
      {sum === 1 ? <h4>sum的值为{sum}</h4> : <Navigate to="/about" replace={true}/>}
      <button onClick={()=>setSum(2)}>点我将sum变为2</button>
    </div>
  )
}

<NavLink>

  1. 作用: 与<Link>组件类似，且可实现导航的“高亮”效果。
  2. 示例代码：
// 注意: NavLink默认类名是active，下面是指定自定义的class

//自定义样式
<NavLink
    to="login"
    className={({ isActive }) => isActive? 'base one': 'base'}
>login</NavLink>

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

<Outlet>

  1. 当<Route>产生嵌套时，渲染其对应的后续子路由。
  2. 示例代码：
//根据路由表生成对应的路由规则
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>
  )
}

Hooks

useRoutes()

  1. 作用：根据路由表，动态创建<Routes>和<Route>。
  2. 示例代码：
//路由表配置：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>
  )
}

useParams()

  1. 作用：回当前匹配路由的params参数，类似于5.x中的match.params。
  2. 示例代码：
import React from 'react';
import { useParams } from 'react-router-dom';
​
export default function Detail() {
  // 获取URL中携带过来的params参数
  let { id } = useParams();
  ...
}

useSearchParams()

  1. 作用：用于读取和修改当前位置的 URL 中的查询字符串。
  2. 返回一个包含两个值的数组，内容分别为：当前的seaech参数、更新search的函数。
  3. 示例代码：
import React from 'react'
import {useSearchParams} from 'react-router-dom'
​
export default function Detail() {
  const [search,setSearch] = useSearchParams()
  const id = search.get('id')
  const title = search.get('title')

  return (
    <ul>
      <li>
        <button onClick={()=>setSearch('id=008&title=哈哈')}>点我更新一下收到的search参数</button>
      </li>
      <li>消息编号：{id}</li>
      <li>消息标题：{title}</li>
    </ul>
  )
}

useLocation()

  1. 作用：获取当前 location 信息，对标5.x中的路由组件的location属性。

  2. 示例代码：

import React from 'react'
import {useLocation} from 'react-router-dom'
​
export default function Detail() {
  const x = useLocation()
  // x就是location对象: 
  /*
    {
      hash: "",
      key: "ah9nv6sz",
      pathname: "/login",
      search: "?name=zs&age=18",
      state: {a: 1, b: 2}
    }
  */
  return (
    <ul>
      <li>消息编号：{id}</li>
      <li>消息标题：{title}</li>
      <li>消息内容：{content}</li>
    </ul>
  )
}

useNavigate()

<withRouter> 已被移除。

  1. 作用：返回一个函数用来实现编程式导航。
  2. 示例代码：
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>
  )
}

useMatch()

  1. 作用：返回当前匹配信息，对标5.x中的路由组件的match属性。
  2. 示例代码：
<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>
  )
}

需求

路由的state参数

import {useLocation} from 'react-router-dom'
...
const {state:{id,title,content}} = useLocation()

不常用的 Hooks

useInRouterContext()

作用：如果组件在 <Router> 的上下文中呈现，则 useInRouterContext 钩子返回 true，否则返回 false。

useNavigationType()

  1. 作用：返回当前的导航类型（用户是如何来到当前页面的）。
  2. 返回值：POP、PUSH、REPLACE。
  3. 备注：POP是指在浏览器中直接打开了这个路由组件（刷新页面）。

useOutlet()

  1. 作用：用来呈现当前组件中渲染的嵌套路由。
  2. 示例代码： 
    const result = useOutlet()
console.log(result)
// 如果嵌套路由没有挂载,则result为null
// 如果嵌套路由已经挂载,则展示嵌套的路由对象

useResolvedPath()

作用：给定一个 URL值，解析其中的：path、search、hash值。

avatar
文章
阅读
粉丝