react随手记

碎记学者

已于 2023-04-25 17:44:34 修改

阅读量400

点赞数

分类专栏： react 文章标签： react.js 前端 javascript

于 2022-12-27 22:20:08 首次发布

本文链接：https://blog.csdn.net/qq_56462589/article/details/128449690

版权

react 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

组件间的通信方式

传递接收params，search，state参数，goBack()，goForward()

withRouter

redux+react-redux：用于多个组件间状态共享

setState的函数写法与对象写法

lazy：实现路由懒加载、Suspense

函数式组件

useState、useEffect、useRef

创建脚手架命令：

create-react-app 项目名

组件间的通信方式

组件通信方式：
1.父子间通信：
父组件：
<child abc={xxx}/>
子组件：
props.abc拿到数据
2.兄弟间通信:

（1）消息订阅与发布，redux集中式管理

（2）找到共同的父亲，然后将数据放在父亲身上，再通过子传父和父传子的方式来获取数据
3.

（1）消息订阅与发布，redux集中式管理

（2）祖孙通信Context:const {Provider,Consumer} = React.createContext()
祖先组件：
<Provider value={xxx}>
</Provider>
孙子组件：
<Consumer>
   (value)=>{
       return()}
</Consumer>

props校验：
安装prop-type包，然后引入在要用的组件中import PropTypes from 'prop-type'
例如：App组件中的Porps校验
App.propTypes={
   colors:PropTypes.array
   fn:PropTypes.func.isRequired//表示传过来的是一个函数，并且是必传项
}

//添加props默认值
App.defaultProps = {
   pageSize: 10//当其他组件没有传pageSize值给App时，默认接收的是10
}

Router6:useNavigationType, useResolvedPath

import React from 'react'
import { useNavigationType, useResolvedPath } from 'react-router-dom'

export default function Demo() {
 /*  作用：返回当前的导航类型（用户是如何来到当前页面的）
    返回值：POP、PUSH、RESPLACE
    备注：POP是指在浏览器中直接打开了这个路由组件（刷新页面） */
  console.log(useNavigationType())

  // 作用：给定一个URL值，解析其中的：path、search、hash值
  console.log(useResolvedPath('/user?id=001&name=tom#qwe'))
  // {pathname: '/user', search: '?id=001&name=tom', hash: '#qwe'}
  return (
    <div>Demo</div>
  )
}

Router6:<Outlet/>

<Outlet/>：当<Route>与useRoutes()一起使用配置‘路由表‘，则需要<Outlet>来渲染子路由

Router6:params,search,state路由传参，编程式路由导航navigate，navigate前进与后退

//在routes.js组件中：
import { lazy } from "react";
import { Navigate } from "react-router-dom";
// const Home = lazy(()=>import('./pages/Home'))
// const About = lazy(()=>import('./pages/About'))
import Home from './pages/Home'
import About from './pages/About'
import Message from './pages/Message'
import News from './pages/News'
import Msgdetail from './pages/Msgdetail'
import Newsdetail from './pages/Newsdetail'

export default [
  // 路由重定向
  {
    path:'/',
    element:<Navigate to='/about'/>
  },
  {
    path:'/about',
    element:<About/>
  },
  {
    path:'/home',
    element:<Home/>,
    children:[
      {
        path:'message',
        element:<Message/>,
        children:[
          {
            path:'detail',
            element:<Msgdetail/>
          }
        ]
      },
      {
        path:'news',
        element:<News/>,
        children:[
          {
            path:'detail',
            element:<Newsdetail/>
          }
        ]
      }
    ]
  }
]


//在MyNavLink组件中：
import React, { Component } from 'react'
import { NavLink } from 'react-router-dom'

export default class MyNavLink extends Component {
  render() {
    // console.log(this.props)
    return (
      <div>
        <NavLink {...this.props}></NavLink>
      </div>
    )
  }
}

//App.js组件中：
import react from 'react'
import { Link ,Route ,NavLink,useRoutes} from 'react-router-dom'
import './pages/App.css'
import MyNavLink from './components/MyNavLink'
import Header from './components/Header'
import routes from './routes'

function App(){
    const element = useRoutes(routes)
        return (
            <div>
                <Header/>
                <hr/>
                <div className='route_show'>
                <ul >
                {/* <Link to='/home'>home</Link>
                <Link to='/about'>about</Link> */}
                    {/* <NavLink to='/home'>home</NavLink>
                    <NavLink to='/about'>about</NavLink> */}

                    
                    {/* 对NavLink进行二次封装 */}
                    <MyNavLink to="/about">about</MyNavLink>
                    <MyNavLink to="/home">home</MyNavLink>
                </ul>
                <div className='content_right'>
                    {element}
                </div>
            </div>
            </div>
        )
    }

export default App


//在Home组件中：
import React, { Component } from 'react'
import MyNavLink from '../components/MyNavLink'
import { Route ,Routes,Outlet} from 'react-router-dom'
// import Message from './Message'
// import News from './News'

export default class Home extends Component {
  render() {
    return (
      <div>
        <li>我是Home组件</li>
        <ol>
          <li>
            <MyNavLink to="news">News</MyNavLink>
            <MyNavLink to="message">Message</MyNavLink>
          </li>
          <hr />
          {/* <Switch className="route">
            <Route path="/home/news" component={News}></Route>
            <Route path="/home/message" component={Message}></Route>
          </Switch> */}
          {/* <Routes className="route">
            <Route path="/home/news" element={<News/>}></Route>
            <Route path="/home/message" element={<Message/>}></Route>
          </Routes> */}
          <Outlet/>
        </ol>
      </div>
    )
  }
}


//在Message组件中：

import React, { Component, useState } from 'react'
import { Route, Link, Outlet, useNavigate } from 'react-router-dom'

export default function Message() {
  const navigate = useNavigate()
  const [state, setState] = useState([
    { id: 1, title: 'msg1', content: 'love china' },
    { id: 2, title: 'msg2', content: 'love jx' },
    { id: 3, title: 'msg3', content: 'love sr' },
  ])
  function showMsgdetail(v) {
    navigate('detail', {
      // 编程式路由导航只能传递state参数，params和search参数是直接写在要跳转的链接或者路由后面进行拼接
      replace: false,
      state: {
        id: v.id,
        title: v.title
      }
    })
  }
  return (
    <div>
      <ul>
        {
          state.map(v => {
            return (
              <li key={v.id}>
                {/* 传递prarms参数 */}
                {/* <Link to={`/home/message/detail/${v.id}/${v.title}`}>{v.title}</Link> */}
                {/* 传递search(query)参数 */}
                {/* <Link to={`/home/message/detail?id=${v.id}&title=${v.title}`}>{v.title}</Link> */}
                {/* 传递state参数 */}
                {/* <Link to='detail' state={{id:v.id,title:v.title}}>{v.title}</Link> */}
                <button onClick={() => showMsgdetail(v)}>点击传递state参数跳转到msgdetail页面(编程式路由push)</button>
              </li>
            )
          })
        }
        <Outlet />
      </ul>
    </div>
  )
}


//在MsgDetail组件中：

import React, { Component } from 'react'
import { useLocation, useParams ,useSearchParams} from 'react-router-dom'

const data = [
  {id:1,content:'love china'},
  {id:2,content:'love jx'},
  {id:3,content:'love sr'},
]
export default function Msgdetail(){
  // 接收params参数
    /* const param = useParams()
    const {id,title} = param */

    // 接收search参数，修改search参数的方法
    /* const [search,setSearch] = useSearchParams()
    const id = search.get('id')
    const title = search.get('title') */

    // 接收state参数
    const {state:{id,title}} = useLocation()
    let resultContent = data.find(v=>{
      return v.id==id
    })||{}
    return (
      <p>
        <li>{id}</li>
        <li>{title}</li>
        <li>{resultContent.content}</li>
        {/* setSearch：改变search参数的方法 */}
        {/* <button onClick={()=>setSearch("id='7'&title='hhh'")}>点击改变search参数</button> */}
      </p>
    )
  }


//在Header非路由组件中实现前进与后退：
import React, { Component } from 'react'
import { useNavigate } from 'react-router-dom'

function Header() {
  const navigate = useNavigate()
  function goBack(){
    // router5
    // this.props.history.goBack()
    
    // router6
    navigate(-1)
  }
  function goForward(){
    // this.props.history.goForward()
    navigate(1)
  }
    return (
      <div className='react_header'>
        <h2>React-router-dom</h2>
        <button onClick={goBack}>回退</button>&nbsp;
        <button onClick={goForward}>前进</button>
      </div>
    )
  }

export default Header

Router6hook:useResolvedPath()

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

Router6:Navigate,element,Routes,NavLink自定义高亮显示

//在App.js组件中：
import React, { Component } from 'react'
import { NavLink, Routes, Route, Navigate ,useRoutes} from 'react-router-dom'
import Fun from './Navigate'
import Error from './Error'

function App(){
  function computeClassName({isActive}){
    return  isActive ? 'linkFont activeLink' : 'linkFont'
  }
    return (
      <div>
//className:接收一个函数
        <NavLink className={computeClassName} to='/navigate'>navigate</NavLink>&nbsp;&nbsp;&nbsp;
        <NavLink className={computeClassName} to='/error'>error</NavLink>
        <div>
          <Routes>
            <Route path='/navigate' element={<Fun />} />
            <Route path='/error' element={<Error />} />
            <Route path='/' element={<Navigate to='/error' />} />
          </Routes>
        </div>
      </div>
    )
  }

  export default App



//在Navigate组件中:
import React, { useState } from 'react'
import { Navigate } from 'react-router-dom'

export default function Nav() {
  const [sum,setSum] = useState(1)
  return (
    <div>
      {/* 重定向Navigate：指定跳转到指定页面 */}
      {sum==2?<Navigate to='/error'/>:<h2>sum：{sum}</h2>}
      <button onClick={()=>setSum(2)}>点击sum变为2</button>
      
    </div>
  )
}

Router6:路由表

//在src下新建routes.js:
import { lazy } from "react";
import { Navigate } from "react-router-dom";

// const Nav = lazy(()=>import('./Navigate'))
// const Error = lazy(()=>import('./Error'))
import Nav from "./Navigate";
import Error from './Error'

export default [
  {
    path:'/navigate',
    element:<Nav/>
  },
  {
    path:'/error',
    element:<Error/>
  },
  {
    path:'/',
    element:<Navigate to='/navigate'/>
  }
]

//在App.js组件中：
import React, { Component } from 'react'
import { NavLink,useRoutes} from 'react-router-dom'
import routes from './routes'

function App(){
  const element = useRoutes(routes)
    return (
      <div>
        <NavLink to='/navigate'>navigate</NavLink>&nbsp;&nbsp;&nbsp;
        <NavLink to='/error'>error</NavLink>
        <div>
          {element}
        </div>
      </div>
    )
  }

  export default App

useCallback

 // 防止因为组件重新渲染，导致方法被重新创建，起到缓存作用，只有第二个参数变化，才重新声明渲染
  const Fun = useCallback(()=>{
        // 函数
        ()=>{}
    },[name])

useMemo

const a = useMemo(()=>{
        // 函数
        ()=>{}
    },[name])
//与Vue中的compute属性类似，a得到的结果是useMemo第一个函数参数的返回值，第二个参数是监测改变的数据
//如果数组中的name没有发生变化，则函数会采取缓存的方式，return回上次的返回值