hx_programmer的博客

react-router-dom现在发了6.0版本，目前不稳定,这里我们使用5.X 基础步骤 第一步 安装包 npm i react-router-dom@5.3.0 第二步 导入包，并使用。 import { HashRouter, Route, Link } from 'react-router-dom' 第三步 使用Link指定导航链接 使用Route指定路由规则(哪个路径展示哪个组件) 路由三大对象之-Router Router 组件：包裹整个应用，一个 R...

这里给出的解决方案是封装一个鉴权路由组件 组件代码 import { hasToken } from '@/utils/storage' // 这里是封装了获取token的函数 import React from 'react' import { Route, Redirect } from 'react-router-dom' // 我们需要解构所有的属性，除了component属性 export default function PrivateRoute ({ component, path })

问题导入 一般我们在非组件中跳转路由,由于hooks只能在函数组件中使用,所以我们在非组件中可以用window.location.href,例如: window.location.href = '/login' 这里有一个问题,就是使用window.location.href跳转路由会刷新页面,那么如何在不刷新页面的情况下跳转路由呢,接下来我们来说一下解决办法 背景 react-router-dom中直接有Router这个包，但是它Router 没有histo...

111111

useContext基本使用可以分为固定的三步 1.根组件导入并调用createContext方法，得到Context对象，并导出 import { createContext } from 'react' export const Context = createContext() 2.在根组件中使用 Provider 组件包裹需要接收数据的后代组件，并通过 value 属性提供要共享的数据 return ( <Context.Provider val...

1.使用useRef获取DOM元素 const refContainer = useRef(null); console.log(refContainer) 返回一个可变的 ref 对象，该对象只有个 current 属性，初始值为传入的参数( null)。 可以把这个ref对象利用元素的ref属性绑定在dom元素上,示例如下: import React, { useRef } from 'react' import reactDom from 'react-dom' export .

概念:接收一个包含命令式、且可能有副作用代码的函数 使用时有几种使用方式: 1.不带第二个参数。执行时机：初始执行，每次更新之后都要执行。 可以模拟 componentDidmount + componentDidUpdate useEffect(() => { // 副作用函数的内容 }) 2.带第二个参数，参数是空数组。执行时机：只执行第一次。 模拟 componentDidMount useEffect(() ...

为什么要使用React-redux 每个组件都需要单独导入store 在根组件上的写法不友好 什么是react-redux 是 Redux 官方提供的 React 绑定库 React 和 Redux 是两个独立的库，两者之间职责独立。 Redux可以和其他的js库，框架一起使用，而并不专门用于react。 为了实现在 React 中使用 Redux 进行状态管理 ，就需要一种机制，将这两个独立的库关联在一起。这时候就用到 React-Redux 这个绑定库了

什么是redux Redux 是 JavaScript 应用的状态容器，提供可预测的状态管理。 为什么Rect要用 Redux React 是 DOM 的一个抽象层（UI 库），并不是 Web 应用的完整解决方案。因此react在涉及到数据的处理以及组件之间的通信时会比较复杂。 对于大型的复杂应用来说，这两方面恰恰是最关键的。因此，只用 React，写大型应用比较吃力 不使用 Redux ： 只能使用父子组件通讯、状态提升等 React 自带机制 ...