蛐蛐的博客

react 配置路由前缀需要注意两点。

仓库：https://github.com/ant-design/ant-design-pro1.简介ant-design-pro是企业应用程序的开箱即用 UI 解决方案。2.初始化ant-design-pro的初始化由umi完成npm create umi? Select the boilerplate type ant-design-pro? ???? Which language do you want to use? TypeScript? ???? Do

文档：ProLayout - 高级布局 - ProComponents1.简介ProLayout 可以提供一个标准又不失灵活的中后台标准布局同时提供一键切换布局形态，自动生成菜单等功能。与 PageContainer 配合使用可以自动生成面包屑，页面标题，并且提供接入页脚工具栏。2.安装$ npm i @ant-design/pro-layout --save引入样式，可以引入css或者lessimport '@ant-design/pro-layou

文档：@umijs/preset-react1.perset-react@umijs/preset-react是针对 react 应用的插件集。包含：plugin-access，权限管理 plugin-analytics，统计管理 plugin-antd，整合 antd UI 组件 plugin-crossorigin，通常用于 JS 出错统计 plugin-dva，整合 dva plugin-helmet，整合 react-helmet，管理 HTML 文档标签（如标题、描述

文档：Directory structure1.项目结构umi项目的初始结构是这样的.├── package.json├── .umirc.ts├── .env├── dist├── mock├── public└── src ├── .umi ├── layouts/index.tsx ├── pages ├── index.less └── index.tsx └── app.ts1.1 pack

文档：​​​​​​Introduce1.简介umi是底层前端框架，提供了以下功能：完整的生命周期，通过插件实现了可扩展。 开箱即用的路由、构建、部署、测试等。umi在底层依赖了以下技术栈：react：react、react-dom react-router dva babel：@babel/runtime、@babel/register、@babel/preset-typescript typescript： express：express、compression

文档：GitHub - gsoft-inc/craco: Create React App Configuration Override, an easy and comprehensible configuration layer for create-react-app1.简介CreateReactAppConfigurationOverride 是一个简单而易懂的create-react-app配置层通过在应用程序的根目录添加单个配置文件craco.config.js并自定...

文档：​​​​​​迁移到 Next.js: Migrating from Create React App | Next.js | Next.js 中文网1.简介由于 Next.js 使用预渲染，因此只有在客户端时，您才需要安全地访问这些 Web API。在服务端执行渲染时，访问不到Web API2.解决由于next.js使用react，可以使用useEffect来在客户端执行代码import { useEffect, useState } from 'react'

文档：https://material-ui.com/zh/api/container/1.导入import Container from '@material-ui/core/Container';// orimport { Container } from '@material-ui/core';2.组件名称该MuiContainer名称可用于在主题级别提供默认道具或样式覆盖。3.属性Name Type Default ...

原文：https://github.com/facebook/jsx1.简介JSX是ECMAScript的类似XML的语法扩展，没有任何定义的语义。它不打算由引擎或浏览器实现。并不是将JSX纳入ECMAScript规范本身的建议。它旨在供各种预处理器（编译器）使用，以将这些令牌转换为标准ECMAScript。// Using JSX to express UI components.var dropdown = <Dropdown> A dropdow..

原文：https://github.com/acdlite/react-fiber-architecture1.简介Fiber 是 React 16 中新的协调引擎。它的主要目的是使 Virtual DOM 可以进行增量式渲染。React Fiber是对React核心算法的不断重新实现。这是React团队经过两年多研究的结晶。React Fiber的目标是提高其对动画，布局和手势等区域的适用性。它的标题功能是增量渲染：将渲染工作分成多个块并将其分布到多个帧中的能力。其他关键功..

文档：https://reactnative.cn/docs/running-on-device1.开启USB调试在默认情况下 Android 设备只能从应用市场来安装应用。你需要开启 USB 调试才能自由安装开发版本的 APP。首先，确定你已经打开设备的 USB 调试开关。2.连接设备使用adb devices命令：List of devices attached2a1f5d57 deviceemulator-5554 device...

文档：https://reactnative.cn/docs/environment-setup1.安装依赖必须安装的依赖有：Node、JDK 和 Android Studio。node：react-native宿主包jdk：android程序虚拟机Android Studio：用于管理安装sdk与虚拟机Node 的版本应大于等于 12，而 JDK 的版本必须是 1.8（目前不支持 1.9 及更高版本，注意 1.8 版本官方也直接称 8 版本）。安装完 Node 后建议设..

1.简介const [state, dispatch] = useReducer(reducer, initialArg, init);useState的替代方案。它接收一个形如(state, action) => newState的 reducer，并返回当前的 state 以及与其配套的dispatch方法。在某些场景下，useReducer会比useState更适用，例如 state 逻辑较复杂且包含多个子值，或者下一个 state 依赖于之前的 st...

1.简介const value = useContext(MyContext);接收一个 context 对象（React.createContext的返回值）并返回该 context 的当前值。 当前的 context 值由上层组件中距离当前组件最近的<MyContext.Provider>的valueprop 决定。 当组件上层最近的<MyContext.Provider>更新时，该 Hook 会触发重渲染，并使用最新传递给MyCont...

1.简介useEffect(didUpdate);该 Hook 接收一个包含命令式、且可能有副作用代码的函数。 在函数组件主体内（这里指在 React 渲染阶段）改变 DOM、添加订阅、设置定时器、记录日志以及执行其他包含副作用的操作都是不被允许的，因为这可能会产生莫名其妙的 bug 并破坏 UI 的一致性。 使用useEffect完成副作用操作。赋值给useEffect的函数会在组件渲染到屏幕之后执行。你可以把 effect 看作从 React 的纯函数式世界通往命令式...

1.简介const [state, setState] = useState(initialState);useState返回一个数组，第一个元素是state值，第二个元素是更新 state 的函数。 在初始渲染期间，返回的状态 (state) 与传入的第一个参数 (initialState) 值相同。后续重新执行代码，初始值无影响。 setState函数用于更新 state。它接收一个新的 state 值并将组件的一次重新渲染加入队列。setState(newState)...

1.简介打包是个非常棒的技术，但随着你的应用增长，你的代码包也将随之增长。尤其是在整合了体积巨大的第三方库的情况下。你需要关注你代码包中所包含的代码，以避免因体积过大而导致加载时间过长。为了避免搞出大体积的代码包，在前期就思考该问题并对代码包进行分割是个不错的选择。 代码分割是由诸如Webpack，Rollup和 Browserify（factor-bundle）这类打包器支持的一项技术，能够创建多个包并在运行时动态加载。对你的应用进行代码分割能够帮助你“懒加载”当前用户所需要的...

1.简介如下变量声明：const element = <h1>Hello, world!</h1>;这个有趣的标签语法既不是字符串也不是 HTML。它被称为 JSX，是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言，但它具有 JavaScript 的全部功能。JSX 可以生成 React “元素”。React 认...

1.简介其实就是实现一个类似图片相册之类的效果，点击图片时背景的图片列表不变，但是出现图片弹框2.实例import React, { MouseEventHandler } from "react";import { BrowserRouter as Router, Switch, Route, Link, useHistory, useLocation, useParams} from "react-router-dom";expo...

1.简介有些人在集中式路由配置中发现价值。路由配置只是数据。 React擅长映射将数据放入组件中，而<Route>是组件。我们的路由配置只是逻辑“路由”的数组，使用`path`和`component`道具，顺序与您在<Switch>中进行操作的方式相同。2.实例import React from "react";import { BrowserRouter as Router, Switch, Route, Link} f...

1.简介react-transition-group默认的动画触发方式为设置in属性为true，此时被包含的组件会被以动画方式渲染2.实例import React from "react";import { TransitionGroup, CSSTransition} from "react-transition-group";import { BrowserRouter as Router, Switch, Route, Link,...

1.简介有时需要侧边栏内容随着路由而改变2.实例const routes = [ { path: "/", exact: true, sidebar: () => <div>home!</div>, main: () => <h2>Home</h2> }, { path: "/bubblegum", sidebar:...

1.简介有时您不知道所有可能的路线预先为您的应用程序； 例如，当构建文件系统浏览UI或确定根据数据动态生成的网址。在这些情况下，它有助于拥有一个能够在运行时根据需要生成路由。2.实例function Person() { let { url } = useRouteMatch(); let { id } = useParams<any>(); let person = find(parseInt(id)); retu...

1.简介用于在离开页面之前提示用户。当您的应用程序进入应阻止用户导航的状态时（例如，表单已完成一半填充），请使用<Prompt>。2.属性2.1 message提示用户尝试离开的消息。可以是字符串或者函数：<Prompt message="Are you sure you want to leave?" /><Prompt message={(location, action) => { if (......

1.实例type MenuLinkProps = { label : string , to : string , activeOnlyWhenExact? : boolean}function MenuLink({ label, to, activeOnlyWhenExact = false } : MenuLinkProps) { let match = useRouteMatch({ path: to, exact: a...

1.简介渲染<Redirect>会导航到新位置。新位置将覆盖历史记录堆栈中的当前位置，就像服务器端重定向（HTTP 3xx）一样。<Redirect>虽然是一个组件，实际上更像一个动作，只要这个组件被渲染就发生重定向动作2.属性2.1 to重定向到的URL。任何可以path-to-regexp@^1.7.0理解的有效URL路径。to中使用的所有URL参数必须由from覆盖。也可以使用一个location对象来代表重定向到的位置。p...

1.实例import React from 'react';import { BrowserRouter as Router, Switch, Route, Link, useParams, useRouteMatch} from "react-router-dom";import './App.css'; function Topics() { let { path, url } = useRouteMatch(); re...

1.简介该useRouteMatch钩子尝试获取当前URL的匹配。对于无需实际呈现即可访问比赛数据的最有用的方法。2.API该useRouteMatch钩子执行：不带参数时，返回当前<Route>对象的match对象 接受一个参数时，该参数与matchPath的props参数相同。它可以是字符串的路径名，也可以是带有Route组件match属性的对象，如下所示：const match = useRouteMatch({ path: "/BLOG...

1.简介useParams返回URL参数的键/值对的对象。使用它来访问当前<Route>的match.params。2.实例function Home() { let { path } = useParams<any>(); return <h2>Path {path}</h2>;} function App() { return ( <div style={{ wi...

1.简介该useLocation挂钩返回代表当前URL的location对象。您可以将其视为类似于URL更改时useState会返回新值的location。2.API位置表示应用程序现在所在的位置，您希望其运行的位置，甚至是以前的位置。看起来像这样：{ key: 'ac3df4', // not with HashHistory! pathname: '/somewhere', search: '?some=search-string', hash:...

1.简介该useHistory钩子使您可以访问可用于导航的history实例。2.APIhistory指的history程序包，它是React Router仅有的两个主要依赖项之一（除了React本身），它提供了几种不同的实现来在各种环境中管理JavaScript中的会话历史记录。browser history：特定于DOM的实现，在支持HTML5历史记录API的Web浏览器中很有用 hash history：遗留Web浏览器的DOM特定实现 memory his...

1.简介Switch与各种语言中的Switch关键字含义类似，代表只执行第一个匹配的含义。渲染第一个与位置匹配的<Route>或<Redirect>元素<Switch>独特之处在于它只绘制子元素中第一个匹配的路由元素。如果没有<Switch>，直接使用一堆<Route>，则每个与当前路径匹配的<Route>都会被绘制2.实例使用<Switch>时 <S...

1.HooksReact Router附带了一些挂钩，可让您访问路由器的状态并从组件内部执行导航。请注意：您必须使用React> = 16.8才能使用这些钩子中的任何一个！useHistory useLocation useParams useRouteMatch1.1 useHistory该useHistory挂钩使您可以访问history可用于导航的实例。import { useHistory } from "react-router-dom"...

Redux是React生态系统的重要组成部分。对于想要同时使用React Router和Redux的人们，我们希望使其无缝集成。为此，有些人希望：与store同步路由数据，并从store访问路由数据。 能够通过dispatching动作进行导航。 在Redux devtools中支持对路线更改进行时间旅行调试。所有这些都需要更深入的集成。我们的建议是完全不要在Redux store中保留您的Route。这是我们的理由：路由数据已经成为您关心它的大多数组件的支持。无论是来自store还...

1.简介本指南的目的是解释使用React Router时要具有的思维模型。我们称其为“动态路由”，它与您可能更熟悉的“静态路由”完全不同。2.静态路由如果您使用过Rails，Express，Ember，Angular等，则使用了静态路由。在这些框架中，您将在进行任何渲染之前将路由声明为应用程序初始化的一部分。React Router pre-v4也是静态的（主要是）。让我们看一下如何在express中配置路由：// Express Style routing:...

1.简介在早期版本的React Router中，我们提供了对滚动恢复的开箱即用的支持，从那以后人们一直在要求它。希望本文档可以帮助您从滚动条和路由中获得所需的信息！浏览器开始以history.pushState与普通浏览器导航相同的方式自行处理滚动恢复。它已经可以在chrome中使用，而且非常棒。这是Scroll恢复规格。由于浏览器开始处理“默认情况”，并且应用程序具有不同的滚动需求（例如本网站！），因此我们不附带默认滚动管理功能。本指南应帮助您实现任何滚动需求。2.滚动到...

1.简介网络的一项重要功能是，我们不必让访问者下载整个应用程序即可使用。您可以将代码拆分视为增量下载应用程序。要做到这一点，我们将使用的WebPack，@babel/plugin-syntax-dynamic-import和loadable-components。webpack内置了对动态导入的支持；但是，如果您使用Babel（例如，将JSX编译为JavaScript），则需要使用该@babel/plugin-syntax-dynamic-import插件。这是仅语法的插件，这意味着Ba...

1.简介服务器上的渲染有些不同，因为它们都是无状态的。基本思想是，我们将应用包装在无状态<StaticRouter>而不是有状态的<BrowserRouter>。我们从服务器传入请求的url，以便路由可以匹配，然后context我们将讨论一个prop。// client<BrowserRouter> <App/></BrowserRouter>// server (not the complete stor...

1.基本路由import React from "react";import { BrowserRouter as Router, Switch, Route, Link} from "react-router-dom"; export default function App() { return ( <Router> <div> <nav> <ul> ...