![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
文章平均质量分 73
roamingcode
学而时习之
展开
-
5 个强大的模式,让 React 代码更干净、更易维护
React组件设计模式翻译 2023-05-08 17:15:28 · 169 阅读 · 0 评论 -
前端组件设计
如何设计前端组件转载 2023-04-20 17:54:31 · 281 阅读 · 0 评论 -
React App 配置单元测试环境
React App 配置单元测试环境为什么选择 React Testing Library 而不是 EnzymeCreate-React-App 创建的应用开箱即用Jest 一款 JavaScript 测试框架 创建 Jest 配置文件安装 jest 和 babel-jestnpm i -D jest @types/jest babel-jest 创建 Jest 配置文件 jest.config.js// 根据问答创建配置文件jest --init配置 Jest 测试环境其原创 2021-08-07 22:56:11 · 448 阅读 · 0 评论 -
封装Form表单组件极简版
确定要实现的功能import React, { useRef } from 'react'import Form from './Form'import FormItem from './FormItem'import Input from './Input'const FormContext = () => { const formRef = useRef(null) // 功能1:提交时获取所有表单数据 const submit = () => { form原创 2021-07-25 14:12:59 · 819 阅读 · 0 评论 -
React架构的演变-从同步到异步
React架构的演变-从同步到异步为了加深对 React 更新机制的理解,本文转载于:作者:Shenfq链接:https://juejin.im/post/6875681311500025869React 16 之所以要进行一次大的重构,是因为之前的版本中有一些不可避免的缺陷,一些更新操作需要由同步改为异步。React 15 是如何进行一次 setState 更新的import React from 'react'class App extends React.Component {转载 2020-11-01 20:09:42 · 280 阅读 · 0 评论 -
React16常用自定义Hooks封装
/* eslint-disable import/prefer-default-export */import { useState, useRef, useEffect, useReducer } from 'react';type noop = () => void;/** * @description 强制重渲染 */export const useForceUpda...原创 2020-04-18 12:53:55 · 3343 阅读 · 0 评论 -
Ant Design 组件small、default、large自定义
Ant Design 组件small、default、large自定义定制主题项目中常见于Ant Design 的样式变量覆盖下面是一些常用的通用变量@ant-prefix: ant; // ant design 类名前缀@primary-color: #1890ff; // 全局主色@link-color: #1890ff; // 链接色@success-color: #52c41...原创 2020-03-20 09:44:34 · 2060 阅读 · 0 评论 -
TypeScript useRef 使用问题
TypeScript useRef 使用问题interface IModalReturn { destroy: () => void; update: (newConfig: ModalFuncProps) => void;}let confirmModalRef = useRef<IModalReturn>(null);confirmModalRef...原创 2020-01-13 10:13:59 · 16737 阅读 · 0 评论 -
mobx-react-lite + Context 使用不完全指南
mobx-react-lite + Context 使用不完全指南mobx-react-lite 是 mobx-react 的轻量版,增加了对函数式组件 hooks 的支持随着 React Hooks 的推出,让我们在不编写 class 的情况下使用 state 以及其他的 React 特性,现在项目中使用Hooks的函数式组件日益增多,而多个组件之间的状态管理变得日益复杂。那么在多层级...原创 2019-12-17 16:01:48 · 5441 阅读 · 6 评论 -
create-react-app@2.x 配置 less 与 antd
create-react-app@1.x在1.x版本中配置less见 1.x版本配置lesscreate-react-app@2.x升级2.x的版本后,有两种配置less的方式react-app-rewired (一个对 create-react-app 进行自定义配置的社区解决方案)。 react-app-rewire-less 来帮助加载 less 样式直接修改webpack配置文...原创 2018-12-27 23:31:38 · 1914 阅读 · 6 评论 -
React专题:不可变属性
转载于 Github 作者博客 博客入口React是用来解决状态同步的,但它却有一个与this.state并驾齐驱的概念。这就是this.props。this.props是组件之间沟通的一个接口。原则上来讲,它只能从父组件流向子组件,但是开发者有各种hack技巧,基本上近亲之间沟通是不成问题的。this.propsthis.props是一个极其简单的...转载 2018-09-03 11:10:01 · 1004 阅读 · 0 评论 -
React专题:组件
React专题:组件 本文是『horseshoe·React专题』系列文章之一,后续会有更多专题推出 作者 GitHub repo 阅读完整 的专题文章 作者 个人博客 获得无与伦比的阅读体验刀耕火种时期的前端,HTML描述页面结构,CSS描述样式,JavaScript描述功能。它们彼此是分离的。然而这种方式却满足不了开发者对代码复用的需求。近几年各大前...转载 2018-08-30 15:28:34 · 198 阅读 · 0 评论 -
React专题:事件
事件用户需要与UI产生交互,所以UI需要一个反应机制,用户执行特定操作,就触发特定的回调函数,开发者再把这个机制挂载到DOM元素上。DOM事件开发者再熟悉不过了,没了它页面就是死的。那么React的事件机制有什么特殊吗?不夸张的说,React是一个UI虚拟机一样的存在,在被挂载到页面上之前,UI在React的全权掌控下。React会干出什么来谁也说不准。让我们来看看React对...转载 2018-08-31 18:40:46 · 206 阅读 · 0 评论 -
React Router Config(React 集中配置式路由)
React Router Config 简介React Router Config 是 React Router 的一个辅助工具,主要帮你做集中配置式路由什么是配置式路由呢,如下import App from '../App';import Child from '../components/route-static/Child';import GrandChild from '../c...原创 2019-07-09 20:36:20 · 18853 阅读 · 1 评论 -
React专题:可变状态
可变状态React使用一个特殊的对象this.state来管理组件内部的状态。然后开发者就可以通过描述状态来控制UI的表达。如何描述状态呢?一般我们会在constructor生命周期钩子初始化状态。import React, { Component } from 'react';class App extends Component { constructor(...转载 2018-08-31 15:19:40 · 147 阅读 · 2 评论 -
使用 React.Suspense 替换 react-loadable
引言当前大部分 React 应用需要使用 code splitting 的时候,都选择使用优秀的 react-loadable 来处理检测代码段是否已加载。然而,随着React v16.6 的发布,我们有一个非常难得的机会 ,可以删除我们的第三方依赖!React.Suspense是一个新添加到核心React库中的功能,t他的功能基本和 react-loadable 一致,所以不用多说,...转载 2019-01-06 20:00:48 · 6271 阅读 · 0 评论 -
创建React16.6,Mobx5 和 Typescript3 初始工程
Getting started with MOBX 5 and TypeScript 3, React 16.6原文为一篇英文文章,整篇几乎不用翻译即可看懂,这里只做简要注解,转载信息见文末。When looking around for example applications that use Mobx 5.x combined with Mobx-react 5.xand Type...转载 2019-01-31 12:52:47 · 753 阅读 · 0 评论 -
Egg项目做请求字段验证-egg-validate-plus
开篇近期在倒腾Github上一个已经开源的项目,其技术栈为egg+sequelize+mysql+react,最重要的是还有配套视频,是一个很好的全栈练习,下面也给大家分享一下。Instagram 开源项目 ts版作者:zhoushaw项目介绍:地址开源代码:代码Instagram 开源项目 js版作者:旅梦开发团项目介绍内附视频地址:地址开源代码:代码好吧还没有进入今...原创 2019-02-20 19:10:23 · 7161 阅读 · 3 评论 -
Create React App文档说明(二)
绝对路径导入可以对工程做一些配置使其支持 绝对路径 导入,其结果跟在 webpack 中配置路径别名效果相同具体配置如下:在工程下创建 jsconfig.json 文件(若是基于 TypeScript 开发,则是 tsconfig.json)在 jsconfig.json 中添加基路径配置{ "compilerOptions": { "baseUrl": "src"...翻译 2019-05-16 17:32:34 · 341 阅读 · 0 评论 -
mobx-react-lite 基于 React Hook API 轻量级状态管理
Hook 简介官方原话:Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。随着 Hook API 的发布,使得函数式组件生态也逐渐丰富起来,Github 上基于 Hook 封装的组件库也不断增多。今天就来说说 [mobx-react-lite](https://github.com/mobxjs/mob...原创 2019-07-08 16:31:59 · 19603 阅读 · 2 评论 -
React Hooks简易实现redux状态管理
React Hook中提供的 useContext 、 useReducer 以及 context API可以实现类redux的状态管理功能,具体API的使用方法见官方文档,这里结合 TypeScript 演示如何进行组件的状态管理首先创建共享数据的Store组件 BgStore.tsximport * as React from 'react';interface IState { //...原创 2019-09-15 22:59:34 · 808 阅读 · 0 评论 -
webpack Dll(预编译) 进阶优化
1. 基础概念:dll(预编译) 其实就是缓存说实话我刚看见这个 dll 动态链接库的时候,我真被镇住了:这是什么玩意?怎么根本没听说过?好学的我赶紧 Google 一下,在维基百科里找到了标准定义:所谓动态链接,就是把一些经常会共享的代码制作成 DLL 档,当可执行文件调用到 DLL 档内的函数时,Windows 操作系统才会把 DLL 档加载存储器内,DLL 档本身的结构就是可执行档,...转载 2019-09-25 20:33:41 · 784 阅读 · 0 评论 -
React应用中使用装饰器
使用create-react-app创建项目后执行npm run eject //把project的相关配置信息以及依赖信息弹射出来安装babel插件npm install --save-dev babel-plugin-transform-decorators-legacy修改package.json文件的babel配置项"babel": { "pl...原创 2018-08-16 10:45:09 · 3751 阅读 · 1 评论 -
React专题:生命周期
生命周期生命周期,顾名思义,就是从生到死的过程。而生命周期钩子,就是从生到死过程中的关键节点。普通人的一生有哪些生命周期钩子呢?出生考上大学第一份工作买房结婚生子孩子的生命周期钩子退休临终遗言 每到关键节点,我们总希望有一些沉思时刻,因为这时候做出的决策会改变人生的走向。React组件也一样,它会给开发者一些沉思时刻,在这里,开发者可以改变组件的走向。...转载 2018-08-31 12:24:37 · 140 阅读 · 0 评论 -
React专题:操作DOM
React存在的意义就是状态与UI分离,使开发者不知有DOM,无论魏晋。不过有些状态是无法与UI分离的,比如说表单的聚焦,复杂的动画等等。怎么办?在React完全控制DOM之前,它还是给开发者留了后门。this.refs [emoji:alien]这是React不再推荐使用的API。每一个class组件实例化的时候都会挂载一个refs属性,它就是用来存储DOM引用的。...转载 2018-08-30 17:40:50 · 191 阅读 · 0 评论 -
Redux之combineReducers(reducers)详解
这篇文章针对有一定Redux开发基础的人员,所以今天我讲的重点是Redux里面很重要的一个方法-combineReducers(reducers)。(一)官网介绍首先,按照惯例,这个方法是什么,干什么用,输入是什么,输出是什么,这些都是我们要了解的,所以我们先来看看官网是如何介绍它的,在后面的内容中我会给大家分析一下这个方法内部是如何实现的以及它的实现原理,慢慢来,不要慌~comb...转载 2018-08-20 10:16:55 · 624 阅读 · 0 评论 -
React配合Immutable.js实现动态增减表单项
import React from 'react';import {withStyles} from '@material-ui/core/styles';import {List} from 'immutable';import { Button, Icon, FormControl, InputLabel, Input, FormHelp...原创 2018-08-22 10:33:45 · 740 阅读 · 0 评论 -
React中使用Material UI的相关注意事项
material ui是一个支持PC端、移动端的UI框架,使用的过程中也踩了很多坑,下面针对如何使用以及注意事项简要总结一下(当前使用版本为最新版1.0) 1. 使用字体图标 在index.html下添加如下内容,即可使用字体图标<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Mate...原创 2018-08-16 10:56:46 · 6424 阅读 · 0 评论 -
React中使用async-validator进行表单验证
react中进行表单验证毫无疑问是繁琐的,尤其对于动态添加或删除的表单,其验证逻辑更为复杂, 目前UI框架使用material ui ,但其表单处理不太理想,而后研究了一下另一个UI 框架 ant design, 其对表单的处理大大方便了逻辑的编写, 它使用async-validator处理验证逻辑目前更换框架毫无疑问是不现实的,于是就想直接引入async-validator,下面描述一个简单...原创 2018-08-16 10:52:01 · 8647 阅读 · 0 评论 -
Material UI CheckboxGroup封装
Material Ui 中只有单个的Checkbox组件,如果需要用到一组checkbox的话,处理起来就会相对麻烦,下面就封装一个CheckboxGroup组件方便使用import React from 'react';import Checkbox from 'material-ui/Checkbox';class CheckboxGroup extends React.Comp...原创 2018-08-16 10:49:57 · 599 阅读 · 0 评论 -
Ant Design中使用带搜索和异步数据加载Tree组件
ant design提供的可搜索树的案例(此案例不要被里面的x,y,z所迷惑,仔细看看,他们只是造假数据的),以及异步数据加载树的案例,下面对这两个案例合二为一留作参考import React from 'react';import {Tree, Input} from 'antd';const TreeNode = Tree.TreeNode;const Search = Inpu...原创 2018-08-16 10:48:19 · 3603 阅读 · 0 评论 -
React中使用Ant Design 以Menu导航菜单形式展示Tree树形结构
引言最近要做一个组织机构树的树级菜单展示,UI框架使用的是Ant Design,这不正好可以使用Tree组件,如图示 奈何领导说太丑,指明要换成类似Menu形式的树形菜单,如图示 于是乎,有两种修改方案先考虑改造Tree控件,这其中不仅需要修改css,还要修改Tree的内部结构 不使用Tree控件直接使用Menu导航菜单,在其上添加所需要的功能这里采用第二种方案,首先...原创 2018-08-15 08:26:00 · 21992 阅读 · 7 评论 -
React中结合flyio与fetch-jsonp处理跨域登录传递Token问题
这里仅以flyio与fetch-jsonp结合作为示例(token存放在cookie中),具体代码逻辑视项目而定要点 - flyio拦截器中执行异步任务 - 发送jsonp请求现在有两个不同域网站 a网站 & b网站 1. 当访问a网站时检测有无token,无token则向b网站发送jsonp请求换取token,在token请求回来之前暂不受理其他任何请求(防止重复发...原创 2018-08-15 08:18:46 · 2092 阅读 · 0 评论 -
ReactV16.3,即将更改的生命周期
注释:本文是根据React的官方博客翻译而成(文章地址:Update on Async Rendering) 主要讲述了React之后的更新方向,以及对之前生命周期所出现的问题的总结,之后的React将逐步弃用一些生命周期和增加一些更实用更符合实际情况的生命周期。其中也为从传统的生命周期迁移到新版本的React提出了一些解决方法。一年多来,React团队一直致力于实现异步渲染。上个月,他在J...转载 2018-08-15 08:17:30 · 1520 阅读 · 5 评论 -
React v16.3.0:新的生命周期和上下文API
官方提供:在React 16.3.0中, 我们正在添加一些新的生命周期方法来辅助迁移。我们还为长期被要求的功能引入了新的API: 一个官方的context API,一个转发的ref API和一个更符合人类使用的ref API.原文链接: reactjs.org官方 Context API多年来,React仅提供了一个实验性的context API。尽管它是一个非常强大的AP...转载 2018-08-15 08:16:19 · 570 阅读 · 0 评论 -
React 16 加载性能优化指南
转载自掘金腾讯IVWEB团队 原文地址一篇写的非常好的关于react性能优化的文章,其中涉及到了webpack打包,缓存,polyfill,懒加载,骨架屏等拿来即用的代码转载 2018-08-15 08:06:17 · 558 阅读 · 0 评论 -
react与redux的简单结合
javascript 代码import React, {Component} from 'react';import {createStore, bindActionCreators} from 'redux';function reducer(state, action) { if (typeof state === 'undefined') return {name: '...原创 2018-08-19 18:11:18 · 129 阅读 · 0 评论 -
Redux中reducer的二级拆分
javascript 代码'use strict';const Redux = require('redux');const createStore = Redux.createStore;const combineReducers = Redux.combineReducers;/*reducers为一个对象,键值与store中state的键值相对应*//*合并reducer...原创 2018-08-19 18:12:09 · 385 阅读 · 0 评论 -
React知识地图--Redux
先来看一下Redux,以及react-redux工作流程图 通过这张流程图,我们可以更好的理解Redux和React直接数据如何流通,关系如何映射。让我们一步步来了解图中的各个概念。action & actionCreatoraction creator 就是函数而已,负责构建一个 action (是的,action creator 这个名字已经很明显了)并返回它。通过几...转载 2018-08-20 10:16:06 · 278 阅读 · 0 评论 -
create-react-app项目添加less配置
使用create-react-app 创建的项目默认不支持less,以下增加less配置的步骤暴露配置文件create-react-app生成的项目文,看不到webpack相关的配置文件,需要先暴露出来,使用如下命令即可: javascript 代码npm run eject安装less-loader 和 lessjavascript 代码npm inst...转载 2018-08-20 10:11:35 · 1100 阅读 · 0 评论