react 的知识点总结

最新推荐文章于 2024-03-29 10:00:13 发布
最新推荐文章于 2024-03-29 10:00:13 发布
阅读量1.3k 收藏
点赞数
文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bannerparter/article/details/126751198
版权

react特点

  1. 声明式编码，通过一些行为替代，例如语法糖
  2. 组件化编码，提高开发效率及组件复用率，js是命令式编码，通过获取->操作等步骤
  3. React Native 编写原生应用
  4. 高效（优秀的Diffing算法），通过虚拟DOM和优秀的diff算法，尽量减少与真实DOM的交互

创建react项目

npm create-react-app myapp

创建完毕之后，根据需要删除文件以及组件代码，例如：

App.css、App.test.js、index.css、logo.svg、reportWebvitals.js、setupTests.js等文件

index.js

index.js：删除多与代码，仅保留如下代码：

importReactfrom'react';
importReactDOMfrom'react-dom';
importAppfrom'./App';

ReactDOM.render(
<App/>,
document.getElementById('root')
);

app.js

改名为 app.jsx ，并修改代码为：

exportdefaultfunctionApp() {
  return (
    <div className="App">
    
    </div>
  );
}

配置路由文件

安装react-router-dom

npm install react-router-dom

基础使用

在app.jsx中

import React from 'react'
import { Link, BrowserRouter, Route, Routes } from 'react-router-dom'
import Home from './views/Home'
import About from './views/About'
export default function App() {

  return (
    <BrowserRouter>
      <Link to="/home">Home</Link>
      <Link to="/about">About</Link>
      <Routes>
        <Route path='/home' element={<Home></Home>}></Route>
        <Route path='/about' element={<About></About>}></Route>
      </Routes>
    </BrowserRouter>
  );
}

（PS：这里有个小技巧，BrowserRouter需要在每一个页面中使用，所以可以在index.js中：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {BrowserRouter} from 'react-router-dom'
ReactDOM.render(
  <BrowserRouter><App /></BrowserRouter>,
  document.getElementById('root')
);

）

NavLink

<NavLink>是一种特殊的 <Link>，知道它是否“活跃”。 这在构建导航菜单（如面包屑或一组选项卡）时很有用，您希望在其中显示当前选择了哪些选项卡；

只需要将原来的Link变成NavLink即可

{/* NavLink 默认添加active，可以通过函数传递给className*/}
<NavLink className={({ isActive }) => isActive ? 'now' : '' } to="/home">Home</NavLink>
<NavLink className={({ isActive }) => isActive ? 'now' : '' } to="/about">About</NavLink>

重定向

引入Navigate，并修改以下代码

<Routes>
   <Route path="/about" element={<About></ About >} />
   <Route path="/home" element={<Home></Home>} />
   {/* 重定向，当匹配不到路由时重定向至home */}
   <Route path="*" element={<Navigate to="/home" replace={true} />} />
</Routes>

嵌套路由

index页面：

import React from 'react'
import { NavLink, Outlet } from 'react-router-dom'

export default function Home() {
  return (
    <div>
      <NavLink to="/home/first">first</NavLink> |
      <NavLink to="/home/second">second</NavLink>
      {/* 嵌套路由出口 */}
      <Outlet></Outlet>
    </div>
  )
}

App.jsx页面：

export default function App() {

  return (
    <div>
      <NavLink to="/home">Home</NavLink>
      <NavLink to="/about">About</NavLink>
      <Routes>
        <Route path='/home' element={<Home></Home>}>
          <Route path='/home/' element={<First></First>}></Route>
			{/* 在V6版本中允许相对路径写法 */}
          <Route path='second' element={<Second></Second>}></Route>
        </Route>
        <Route path='/about' element={<About></About>}></Route>
        <Route path="*" element={<Navigate to="/home" replace={true} />} />
      </Routes>
    </div>
  );
}

useRoutes

useRoutes钩子在功能上等同于<Routes>，但它使用JavaScript对象而不是<Route>元素来定义路由。这些对象具有与普通<Route>元素相同的属性

在src中新建router/index.js：

import { Navigate } from 'react-router-dom'
import Home from '../views/Home'
import About from '../views/About'
import First from '../views/Home/First'
import Second from '../views/Home/Second'

let routers = [
    {
        path: '/home',
        element: <Home></Home>,
        children: [
            {
                path: '/home/',
                element: <First></First>,
            },
            {
                path: '/home/second',
                element: <Second></Second>,
            }
        ]
    },
    {
        path: '/about',
        element: <About></About>
    },
    {
        path: '*',
        element: <Navigate to="/home" replace={true} ></Navigate>
    }
]

export default routers;

App.js:

import React from 'react'
import { NavLink, useRoutes } from 'react-router-dom'
import router from './router'
import "./App.css"
export default function App() {
  let routers = useRoutes(router)
  return (
    <div>
      <NavLink to="/home">Home</NavLink>
      <NavLink to="/about">About</NavLink>
      {routers}
    </div>
  );
}

路由传参

params传参

配置路由

path: '/about/:id',

跳转

<NavLink to="/about/1">About</NavLink>

页面获取：

import React from 'react'
import { useParams} from 'react-router-dom';
export default function About(props) {
    let { id } = useParams()
    console.log(id);
    return (
        <div>About</div>
    )
}

search传参

跳转

<NavLink to="/about?id=1">About</NavLink>

获取

import React from 'react'
import { useSearchParams } from 'react-router-dom';
export default function About(props) {
    let [search] = useSearchParams()
    let id = search.get('id');
    return (
        <div>About</div>
    )
}

state传参

跳转：

<NavLink to="/about" state={{ id: 1 }}>About</NavLink>

获取

import React from 'react'
import {useLocation} from 'react-router-dom';
export default function About(props) {
    let {state:{id}} = useLocation()
    console.log(id);
    return (
        <div>About</div>
    )
}

编程式路由

useNavigate钩子返回一个函数，允许您以编程方式进行导航

let navigate = useNavigate()
  function jump() {
    navigate('/about',{
      replace: true,
      state: {
        id: 1
      }
    })
  }

导航函数有两个签名:

  1. 传递一个To值(与的类型相同)和一个可选的second {replace, state}
  2. 或在历史堆栈中传递你想要的增量。例如，navigate(-1)相当于点击后退按钮。

页面开发

创建虚拟dom

js方式

<body>
    <!-- 1.准备一个容器,做为作用域 -->
    <div id="test"></div>
    <!-- 引入js文件,注意顺序 -->
    <!-- 引入react核心库 -->
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <!-- 引入用于支持react操作dom的扩展 -->
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script>
        // 1.创建虚拟dom
        const VDOM = React.createElement('h1', {
            id: 'test',
            className: 'cla',
            onClick() {
                alert('hello')
                // 绑定事件
            }
        }, 'hello') // 标签名,标签属性(class需要改为className),标签内容
        // const VDOM = React.createElement('h1', {
        //     id: 'ttt',
        //     class: 'uuuu'
        // }, React.createElement('span', {}, 'hello')) // 多个标签嵌套的写法,繁琐,应该使用jsx
        // 2.渲染虚拟dom到页面
        ReactDOM.render(VDOM, document.getElementById('test')) // 两个参数:虚拟dom,容器
    </script>
</body>

jsx方式

<body>
     <!-- 1.准备一个容器,做为作用域 -->
     <div id="test"></div>
     <!-- 引入js文件,注意顺序 -->
     <!-- 引入react核心库 -->
     <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
     <!-- 引入用于支持react操作dom的扩展 -->
     <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
     <!-- 引入babel,用于将jsx转换成js -->
     <script src="../js/babel.min.js"></script>
     <script type="text/babel">// 表示这里面写的是jsx,通过babel进行编译,一定要写
        // 1.创建虚拟dom
        // const VDOM = <h1>hello</h1>  // 此处一定不要写引号,不是字符串,jsx的写法
        const VDOM = (// 多层嵌套的写法,但需要babel翻译,翻译后的代码React.createElement('h1',{},React.createElement('span',{},'hello'))
            <h1>
                <span>hello</span>
            </h1>
        )
        // 2.渲染虚拟dom到页面
        ReactDOM.render(VDOM, document.getElementById('test'))// 两个参数:虚拟dom,容器
     </script>
</body>

数据请求

首先：安装axios ：npm install axios;

然后：

axios({
  url:'地址',
  params:{
    
  }
}).then((res)=>{
  console.log(res.data)
}).catch((error)=>{
  console.log(error)
})

变量定义

  1. state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)
  2. 组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)
  3. 用来给组件提供组件内部使用的数据

注意！！！

  1. 只有通过class创建的组件才具有状态
  2. 组件中render方法中的this为组件实例对象
  3. 组件自定义的方法中this为undefined，如何解决？
    强制绑定this: 通过函数对象的bind()
    箭头函数+赋值语句
  4. 状态数据，不能直接修改或更新,必须使用setState()
  5. 状态是私有的，完全由组件来控制
  6. 不要在 state 中添加 render() 方法中不需要的数据，会影响渲染性能！
    可以将组件内部使用但是不渲染在视图中的内容，直接添加给 this
  7. 不要在 render() 方法中调用 setState() 方法来修改state的值
    但是可以通过 this.state.name = 'rose' 方式设置state（不推荐!!!!）

配置代理

在src中，新建setupProxy.js（必须是这个名字，react脚手架会识别），在文件中写以下配置内容（最近的项目要使用高版本这个，不然会导致项目无法启动）：
http-proxy-middleware高版本（2以上）：

const proxy = require('http-proxy-middleware')//引入http-proxy-middleware，react脚手架已经安装

module.exports = function(app){
	app.use(
		proxy.createProxyMiddleware('/api',{ //遇见/api1前缀的请求，就会触发该代理配置
			target:'http://localhost:5000', //请求转发给谁
			changeOrigin:true,//控制服务器收到的请求头中Host的值
			pathRewrite:{'^/api':''} //重写请求路径，下面有示例解释
		}),
		proxy.createProxyMiddleware('/api2',{
			target:'http://localhost:5001',
			changeOrigin:true,
			pathRewrite:{'^/api2':''}
		}),
	)
}

http-proxy-middleware低版本（2以下）：

const proxy = require('http-proxy-middleware')//引入http-proxy-middleware，react脚手架已经安装

module.exports = function(app){
	app.use(
		proxy('/api',{ //遇见/api1前缀的请求，就会触发该代理配置
			target:'http://localhost:5000', //请求转发给谁
			changeOrigin:true,//控制服务器收到的请求头中Host的值
			pathRewrite:{'^/api':''} //重写请求路径，下面有示例解释
		}),
		proxy('/api2',{
			target:'http://localhost:5001',
			changeOrigin:true,
			pathRewrite:{'^/api2':''}
		}),
	)
}

写好以后，重启项目！！！
然后进行请求

Mr.A.D.0013
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
liujie2019#Blog#React知识点总结1
07-25
2. 使用 PropTypes 进行类型检查 4. dangerouslySetInnerHTML函数 6. 事件处理
【React】react路由配置 useRoutes
m0_61049675的博客
08-28 242
router.tsx文件。Home.tsx文件。
react路由表——useRoutes
weixin_60932546的博客
01-23 603
【代码】react路由表——useRoutes。
使用 react-router-dom v6.22 的 useRoutes 路由表
最新发布
JudithHuang的博客
03-29 496
我们可以在 React 应用程序中使用useRoutes钩子来管理路由配置。这种方式使得路由的定义和渲染更加简单和灵活，有助于更好地组织和维护项目中的路由结构。
React+Antd+Vite+TypeScript 项目实战教程
IT飞牛
05-10 4032
本教程属于react入门教程，课程围绕如何搭建一个简单的登录页面展开，会带你快速了解react、redux、redux-devtool、react-router-dom、axiox这些常见技术的使用方式，教程最后会附上项目源码。
React Router中useRoutes()方法的使用
有事儿私信。
06-19 861
当我们需要路由权限控制点时候, 对路由数组做一些权限的筛选过滤。这时需要把路由进行集中式管理。所谓的集中式路由配置就是用一个数组统一把所有的路由对应关系写好替换本来的Roues组件，便于管理路由，更加灵活。
React路由
qq_42760314的博客
07-25 512
一个路由就是一个key-value映射关系key为如今，value可能是function也有可能是component。
React 基础知识点总结
02-21
React 基础知识点总结
react实战项目总结知识点
08-08
react实战项目总结知识点
react及react生态知识总结
10-18
对react，react全家桶，react native等的知识点进行汇总
React总结.xmind
10-14
React总结.xmind
浅析React Router V6 useRoutes的使用
热门推荐
ncgNCGg的博客
01-10 2万+
本篇文章记录了useRoutes第一个参数的使用方法，暂不涉及第二个参数。
【React Router 6 快速上手一】重定向Navigate / useRoutes路由表 / 嵌套路由Outlet
xuxuii的博客
08-15 1万+
react-router: 路由的核心库，提供了很多的：组件、钩子。包含react-router所有内容，并添加一些专门用于 DOM 的组件，例如 等。等。与React Router 5.x 版本相比，改变了什么？内置组件的变化：移除，新增等。变为等。useParams、、useMatch等。官方明确推荐函数式组件了！！！…......
五、【React-Router6】路由表 useRoutes() + Outlet
天行健，君子以自强不息
12-02 4249
react-router 6 的 路由表 useRoutes() + Outlet
react 使用useRoutes遇到的问题
Lora_0925的博客
07-01 3447
Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.
React如何利用hook的useRoutes()写路由表
一介菜鸡
04-27 5988
你的组件必须是函数组件，才能用hook 1，在你组件中引入useRoutes() import { useRoutes } from 'react-router-dom' 2，在你的组件中引入你想展示的路由 import Login from '../views/login/Login' import NewsSand from '../views/NewsSand/NewsSand' import Redirect from '../utils/Redirect' import NotFo
记录react的学习生涯之useRoutes的配置
Su__py的博客
01-10 316
2、在src下创建一个router文件夹，创建一个IndexRouter的js文件，在这个文件里面保存路由配置。需要注意的是，如果是子组件，需要在父组件加上，才能显示~3、在app.js文件里面引入这个文件夹，并且使用。1、首先是react-router-dom的安装。最后npm start运行项目，就能看到效果啦~
react-router v6 ts下useRoutes的使用
LiWei_Jiang的博客
06-28 2851
文件内容如下 在react-router v6中需要将使用了useRoutes的整个组件都放入当中，就像下面这样 最后我们使用useRoutes
react 知识点常用的
07-14
以下是React中常用的一些知识点： 1. 组件：React将用户界面拆分为可重用的组件，组件是构建React应用的基本单元。组件可以是函数组件或者类组件。 2. JSX：JSX是一种类似于HTML的语法扩展，可以在JavaScript代码...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值