React速成day3

HGC百事可乐
137 阅读3分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 4 天

useEffect发送网络请求

useRef

使用场景：

在函数组件中获取真实的dom元素对象或者是组件对象

useRef的作用是获取dom元素或者组件对象然后就可以调用它们了

useContext

实现步骤：

1.使用createContext创建Context对象

2.在顶层组件通过 Provider提供数据

3.在底层组件通过 useContext函数获取数据

import React, { useState, createContext, useContext } from 'react'
const Context = createContext()

function ComA() {
  // 使用useContext函数接收父级 传递的数据
  const count = useContext(Context)
  return (
    <div>
      this is ComA
      <br />
      app传过来的数据为：{count}
      <ComC />
    </div>
  )
}
function ComC() {
  const count = useContext(Context)
  return (
    <div>
      this is ComC
      <br />
      app传过来的数据为：{count}
    </div>
  )
}

function App() {
  const [count, setCount] = useState(0)
  return (
    /* 使用Provider向下级组件传递数据 */
    <Context.Provider value={count}>
      <div>
        <ComA />
        <button
          onClick={() => {
            setCount(count + 1)
          }}
        >
          +
        </button>
      </div>
    </Context.Provider>
  )
}

使用useContext不管是子组件还是孙组件都可以获得provider传过来的数据，但是要注意

const Context = createContext () 定义了provider是谁，必须要用这个字段才可以向下传递数据，并且顶层组件必须要用provider包裹

useContext(Context)

这个方法的参数也是provider，子组件获得的数据是下面这个

最后：

Context如果要传递的数据 只需要在整个应用初始化的时候传递一次就可以选择在当前文件里做数据提供

如果context需要传递数据并且将来还需要在对数据做修改 底层组件也需要跟着一起变就写到app.js

reactRouter

安装reactRouter

yarn add react-router-dom@6
或者
npm install react-router-dom@6

基础使用

import Home from './Home'
import About from './About'
import { BrowserRouter, Link, Routes, Route } from 'react-router-dom'
function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Link to="/">首页</Link>
        <Link to="/about">关于</Link>
        <Routes>
          <Route path="/" element={<Home />}></Route>
          <Route path="/about" element={<About />}></Route>
        </Routes>
      </BrowserRouter>
    </div>
  )
}

export default App

核心组件：

BrowserRouter

作用：包裹整个应用，一个 React 应用只需要使用一次

两种常用Router： HashRouter和BrowserRouter

HashRouter

使用 URL 的哈希值实现（http://localhost：3000/#/first）

BrowserRouter（推荐）

使用H5的history.pushState API实现（http://localhost：3000/first）

Link：

作用：用于指定导航链接，完成路由跳转

语法说明：组件通过to属性指定路由地址，最终会渲染为a链接元素

例：

<Link to ="/path"> 页面一 </Link>

Routes：

作用：提供一个路由出口，满足条件的路由组件会渲染到组件内部

<Routes>
{/*满足条件的路由组件会渲染到这里*/}
<Route/>
<Route/>
</Routes>

Route：

作用：用于指定导航链接，完成路由跳转

语法说明：path属性指定匹配的路径地址，element属性指定要渲染的组件

例

<Route path="/about" element={ <About/> }/>
  //说明：当url路径为‘/about’时，会渲染 <About/>组件

编程式导航

作用：通过js编程的方式进行路由页面跳转，比如从登录页跳转到关于页

//使用useNavigate实现页面跳转
import { useNavigate } from 'react-router-dom'

function Login() {
  // 执行useNavigate得到一个跳转函数，此参数为要跳转的路径
  const navigate = useNavigate()
  function goAbout() {
    navigate('/about', { replace: true })
  }
  return (
    <div>
      login
      <button onClick={goAbout}>跳到关于</button>
    </div>
  )
}
export default Login

步骤：

1.导入useNavigate钩子函数

2.执行钩子函数得到跳转函数

3.执行跳转函数完成跳转

注意：如果在跳转时不想加历史记录，可以添加额外参数replace为true

携带参数的编程式导航

两种传参方式：

1.searchParams传参

如

注意：如果传了两次一样的数据会以第一个为准

2.params传参

//路由设置不能写死，要有一个参数
<Route path="/about/:id" element={<About />}></Route>

function goAbout() {
  //将参数直接写到路由中
    navigate('/about/1001', { replace: true })
  }

import { useParams } from 'react-router-dom'

function About() {
//使用useParams获得路由中携带的参数
  const params = useParams()
  return <div>About得到的参数为{params.id}</div>
}
export default About

PS：这种方式只适合只有一个参数的情况

嵌套路由

步骤1：定义嵌套路由声明

步骤二：使用指定二级路由出口

嵌套路由对应的组件会在的位置显示

默认二级路由设置

做法：添加index属性 把它自己的path干掉

404路由配置

当所有路径都没有匹配的时候显示

语法：

在各级路由的最后添加*号路由作为兜底

avatar
文章
阅读
粉丝