05 2022 档案
摘要：在看了前面的 React-Redux 之后，这篇文章主要介绍的就是内部的实现过程，为了更好的去了解 React-Redux 内部的工作原理，首先新建一个 connect 目录，存放具体的实现代码，在经过观察我们之前使用 React-Redux 的代码发现在导出的时候是通过调用一个 connect 的
阅读全文
摘要：在看怎么获取之前首先博主这里使用了 Egg 搭建了一个后台，下载，然后将 Egg 项目启动起来不介绍如何启动不会的自行去学习 Egg，然后启动了之后就可以进行下一步操作了，然后更改我们的前端 React 代码进行发送网络请求拿到数据这里采用 fetch 进行请求。 更改 About.js 如下 im
阅读全文
摘要：当前使用 Redux 存在的问题： 冗余代码太多, 每次使用都需要在构造函数中获取 Redux 存储的内容 每次使用都需要监听和取消监听 操作 store 的代码过于分散 如何解决冗余代码太多问题 使用 React-Redux React-Redux 概述 React-Redux 是 Redux 官
阅读全文
摘要：紧接着上一篇 React-Redux-综合运用(在React中使用) 的内容，本文主要介绍的是 Redux 在其它组件当中的使用以及注意点，在 src 目录下创建一个 component 目录在目录当中创建一个 home 与 about 组件，里面的内容是基于 app.js 进行参考得到的如下： H
阅读全文
摘要：在之前的 React-Redux-优化 文章当中说明了一个问题需要解决，在本文主要介绍的就是这个问题的解决方案; store、action、reducer 代码都写在一个文件中，不利于维护 这个问题呢，可以在项目工程当中新建一个 store 文件夹，在该文件夹当中分别创建 action.js，con
阅读全文
摘要：在上一篇 React-Redux-基本使用 的文章当中其实是存在问题的主要问题有以下几点： store、action、reducer 代码都写在一个文件中，不利于维护(后续文章解决) action 和 reducer 中都是使用字符串来指定和判断操作类型，写错不报错(本文当中进行解决) action
阅读全文
摘要：安装 安装稳定版： npm install --save redux index.js: const redux = require('redux'); // 定义一个状态 let initialState = { count: 0 }; // 利用 store 来保存状态（state） const
阅读全文
摘要：Redux 三大原则 单一数据源 整个应用程序的 state 只存储在一个 store 中 Redux 并没有强制让我们不能创建多个 Store，但是那样做并不利于数据的维护 单一的数据源可以让整个应用程序的 state 变得方便维护、追踪、修改 State 是只读的 唯一修改 State 的方法一
阅读全文
摘要：什么是 Redux Redux 是一个管理状态（数据）的容器，提供了可预测的状态管理 什么是可预测的状态管理 数据, 在什么时候，因为什么，发生了什么改变，都是可以控制和追踪的，我们就称之为预测的状态管理 为什么要使用 Redux React 是通过数据驱动界面更新的，React 负责更新界面，而我
阅读全文
摘要：路由统一管理(路由集中管理) 现在虽然我们能通过路由实现组件切换, 但是现在我们的路由都比较分散, 不利于我们管理和维护，所以 React 也考虑到了这个问题, 也给我们提供了统一管理路由的方案。 官方文档：https://www.npmjs.com/package/react-router-con
阅读全文
摘要：路由参数传递 URL 参数，例如：?key=value&key=value 更改 App.js 的 Home 组件的路由跳转规则： import React from 'react'; import Home from './components/Home' import About from '.
阅读全文
摘要：手动路由跳转 不通过 Link/NavLink 来设置资源地址, 而是通过 JS 来设置资源地址。 如果是 Hash 模式, 那么只需要通过 JS 设置 Hash 值即可 更改 App.js 的路由模式为 Hash 模式： import React from 'react'; import Home
阅读全文
摘要：Redirect 资源重定向, 也就是可以在访问某个资源地址的时候重定向到另外一个资源地址 例如: 访问 /user 重定向到 /login 假如说我现在需要实现这么一个功能就是当用户登陆过了之后访问 /user 时就显示用户相关的组件信息，否则跳到登录界面进行登录才可访问。 新建 User.js:
阅读全文
摘要：嵌套路由(子路由) 路由里面又有路由, 我们就称之为嵌套路由 新建 Discover.js: import React from 'react'; import {NavLink, Switch, Route} from "react-router-dom"; function Hot() { re
阅读全文
摘要：Switch 默认情况下路由会从上至下匹配所有的 Route, 只要匹配都会显示 如果 Route 没有指定 path, 那么表示这个 Route 和所有的资源地址都匹配 新建 Other.js: import React from 'react'; class Other extends Reac
阅读全文
摘要：什么是路由 路由维护了 URL 地址和组件的映射关系, 通过这个映射关系, 我们就可以根据不同的 URL 地址，去渲染不同的组件。 React 中使用路由 安装 react-router npm install react-router-dom 通过指定监听模式: BrowserRouter his
阅读全文
摘要：TransitionGroup 的作用，博主用通俗易懂的话来讲就是一个一组元素添加动画，在我们的实际开发当中有时可能会有这么一个需求就是，在一个页面上，有添加和删除，在做这些操作的时候需要都带上动画，那么这个时候就可以使用 TransitionGroup 来快速实现。 案例 App.js: impo
阅读全文
摘要：SwitchTransition SwitchTransition 可以完成组件切换的动画 SwitchTransition 组件里面要有 CSSTransition 或者 Transition 组件，不能直接包裹你想要切换的组件 SwitchTransition 里面的 CSSTransition
阅读全文
摘要：React 过渡动画 在 React 中我们可以通过原生的 CSS 来实现过渡动画 但是 React 社区为我们提供了 react-transition-group 帮助我们快速过渡动画 import React from 'react'; import styled from 'styled-co
阅读全文
摘要：动画组件 Transition 该组件是一个和平台无关的组件（不一定要结合 CSS）； 在前端开发中，我们一般是结合 CSS 来完成样式，所以比较常用的是 CSSTransition； CSSTransition 在前端开发中，通常使用 CSSTransition 来完成过渡动画效果； Switch
阅读全文
摘要：React 官方文档：https://reactcommunity.org/react-transition-group/transition 本文主要介绍的就是 Transition 在之前的三种状态会自动触发对应的回调函数，在以后的需求当中可能会有在指定的回调函数当中进行编写对应的业务代码，所以
阅读全文
摘要：styled-components 特性 props 在前面的文章当中介绍了一个 styled-compoents 的一个动态修改状态的特性，这个特性就是借助 props 来实现的，如下, 假如我现在有这么一个需求就是点击一个按钮修改一下 p 标签的颜色： import React from 're
阅读全文
摘要：在 React 中, React 认为结构和逻辑是密不可分的, 所以在 React 中结构代码也是通过 JS 来编写的 正是受到 React 这种思想的影响, 所以就有很多人开发了用 JS 来编写 CSS 的库 比较火热的库有：styled-components / emotion 利用 JS 来编
阅读全文
摘要：在 JS 中除了可以通过 () 来调用函数以外, 其实我们还可以通过 模板字符串 来调用函数: const name = 'BNTang'; const age = 18; const test = (...args) => { console.log(args); } test`1, 2, 3`;
阅读全文
摘要：Css Module (推荐) React 的脚手架已经内置了 css modules 的配置： .css/.less/.scss 等样式文件都修改成 .module.css/.module.less/.module.scss 等； 在以前我们的文件是这样的 index.css 如果使用了 CSS
阅读全文
摘要：外链样式 将 CSS 代码写到一个单独的 CSS 文件中, 在使用的时候导入进来 外链样式的优点： 编写简单, 有代码提示, 支持所有 CSS 语法 外链样式的缺点： 不可以动态获取当前 state 中的状态 属于全局的 css，样式之间会相互影响 新建 Home.js 组件： import Rea
阅读全文
摘要：React 中的样式 React 并没有像 Vue 那样有提供特定的区域给我们编写 CSS 代码 所以你会发现在 React 代码中, CSS 样式的写法千奇百怪 内联样式 内联样式的优点： 内联样式, 样式之间不会有冲突 可以动态获取当前 state 中的状态 内联样式的缺点: 写法上都需要使用驼
阅读全文
摘要：默认情况下, 所有的组件都是渲染到 root 元素中的 Portal 提供了一种将组件渲染到其它元素中的能力 Portals 是根据 ReactDOM 的 createPortal 所得到的，createPortal 接收两个参数： 第一个参数: 需要渲染的内容 第二个参数: 渲染到什么地方 还可以
阅读全文
摘要：由于 React 规定, 组件中只能有一个根元素 所以每次编写组件的时候, 我们都需要在最外层包裹一个冗余的标签 import React from 'react'; class Home extends React.PureComponent { constructor(props) { supe
阅读全文
摘要：StrictMode 概述 作用: 开启 严格模式, 检查后代组件中是否存在潜在问题 注意点: 和 Fragment 一样, 不会渲染出任何 UI 元素 仅在 开发模式 下有效 StrictMode 检查什么 检查过时或废弃的属性 / 方法 / ... 检查意外的副作用: 检查被包裹的组件当中写的一
阅读全文
摘要：代码复用 import React from 'react'; const UserContext = React.createContext({}); const {Provider, Consumer} = UserContext; class Son1 extends React.PureCo
阅读全文
摘要：受控组件 值受到 react 控制的表单元素 import React from "react"; class App extends React.PureComponent { constructor(props) { super(props); this.state = { name: 'BNT
阅读全文
摘要：非受控组件也就是值，不受到 React 控制的表单元素就是非受控组件 废话不多说直接上代码： import React from 'react'; class App extends React.PureComponent { constructor(props) { super(props); t
阅读全文
摘要：高阶组件(Higher-Order Components，简称为 HOC) 参数为组件，返回值为新组件的函数就可以称之为高阶组件 import React from 'react'; class Home extends React.PureComponent { render() { return
阅读全文
摘要：React 中获取元素的方式 字符串 对象 回调函数 官方文档：https://zh-hans.reactjs.org/docs/refs-and-the-dom.html#gatsby-focus-wrapper 第一种 传统方式(在 React 中及其不推荐) import React from
阅读全文
摘要：获取函数式组件中的元素 如果要获取的不是函数式组件本身, 而是想获取函数式组件中的某个元素，那么我们可以使用 Ref 转发 来获取。 在之前的文章当中演示了通过 Ref 获取函数式组件，但是在控制台报了一个警告，警告的内容如下： Function components cannot be given
阅读全文
摘要：嵌套组件的 render 调用 默认情况下, 只要父组件 render 被调用, 那么所有的后代组件的 render 也会被调用 当前存在的问题 如果我们只修改了父组件的数据, 并没有修改子组件的数据, 并且子组件中也没有用到父组件中的数据 那么子组件还是会重新渲染, 子组件的 render 方法还
阅读全文
