react
胜天一子半
Teach Yourself Programming in Ten Years。
展开
-
react hook理解
React 中是通过类似单链表的形式来代替数组的。通过 next 按顺序串联所有的 hook。memoizedState,cursor 是存在哪里的?如何和每个函数组件一一对应的?我们知道,react 会生成一棵组件树(或Fiber 单链表),树中每个节点对应了一个组件,hooks 的数据就作为组件的一个信息,存储在这些节点上,伴随组件一起出生,一起死亡。hooks挂载的时候就会绑定在当前组件上useState跟useEffect的数据都是以链表的形式挂载在hook的变量上...原创 2020-09-10 15:56:10 · 567 阅读 · 0 评论 -
umi3 useRequest 配置
1,在app.ts中写入:import { RequestConfig } from 'umi';import config from "@/config"import errorHandler from "@/util/errorHandle" export const request: RequestConfig = { prefix: process.env.NODE_ENV === "production" ? config.baseurl :'api/', credenti转载 2020-07-23 15:45:55 · 3479 阅读 · 0 评论 -
create-react-app + Typescript脚手架搭建
1、使用create-react-app 创建ts项目yarn create react-app my-test-app --template typescrip2、配置tsconfig.json(1)在根目录下新建文件tsconfig.extend.json{ "compilerOptions": { "baseUrl": "src", "paths": { "@/*": ["./*"] } }}(2)在tsconfig.json中新增原创 2020-07-20 17:54:34 · 2231 阅读 · 1 评论 -
react中优雅的使用typescript
在 react 中使用 ts 的几点原则和变化所有用到jsx语法的文件都需要以tsx后缀命名 使用组件声明时的Component<P, S>泛型参数声明,来代替PropTypes! 全局变量或者自定义的window对象属性,统一在项目根下的global.d.ts中进行声明定义 对于项目中常用到的接口数据对象,在types/目录下定义好其结构化类型声明React组件申明分为:类组件和函数式组件类组件:class App extends Component<IPro.转载 2020-07-20 10:59:17 · 943 阅读 · 0 评论 -
dvajs数据持久化存储dva-model-persist
之前写用dva写页面,发现没有什么好用的数据持久化处理,索性就自己撸一个:index.js:// 1. Initializelet allState = {}let unloadListener = !1const initialState = window.localStorage.getItem('store')if (initialState && initialState !== '{}') { // get store window.localStorag原创 2020-06-15 17:45:24 · 4027 阅读 · 0 评论 -
用hooks封装一个跟antd-pro效果一样的侧边导航栏
说明:antd-pro的侧边导航栏带有自动缩放、移动端适配的功能,去看了antd-pro的文档,发现是用了一个layou pro组件,算了自己写一个。效果图:使用antd4.x侧边栏组件:import React, { Fragment } from 'react'import { Menu, Drawer, Layout } from 'antd'import { UserOutlined, VideoCameraOutlined, Up...原创 2020-06-12 16:08:59 · 954 阅读 · 0 评论 -
Antd V4 使用iconType创建Icon,可动态设置iconType
后台数据库存的icon type是antd v4的iconimage.png前端页面应该如何使用显示icon呢解决办法如下import React from "react";import * as Icon from '@ant-design/icons';var iconType = 'MessageOutlined';export default function App() { return ( <div > { ...原创 2020-05-09 10:44:56 · 4101 阅读 · 1 评论 -
next.js 引入antd
yarn add @zeit/next-css antd babel-plugin-import根目录新建.babelrc{ "presets": [ "next/babel" ], "plugins": [ [ "import", { "libra...原创 2020-05-08 15:10:59 · 2195 阅读 · 1 评论 -
redux、react-redux、redux-thunk、redux调试工具
一、redux安装:npm install --save redux1. 什么是redux?redux是一个独立专门用于做状态管理的JS库(不是react插件库)它可以用在react, angular, vue等项目中, 但基本与react配合使用作用: 集中式管理react应用中多个组件共享的状态2. redux的工作流程图...原创 2020-04-29 17:28:22 · 193 阅读 · 0 评论 -
react-thunk中间件
react-thunk作用:使我们可以在action中返回函数,而不是只能返回一个对象。然后我们可以在函数中做很多事情,比如发送异步的ajax请求。(vue中action不需要在引入插件)这就是react-thunk的使用方法。接受一个dispatch参数,返回一个函数。store发现action是一个函数,就会自动执行这个函数。...原创 2020-04-29 17:06:00 · 720 阅读 · 0 评论 -
react vscode 工具
Simple React Snippets原创 2020-04-29 11:58:14 · 194 阅读 · 0 评论 -
react-transition-group动画库
这次用react-transition-group做一个togglebutton控制div显示和隐藏的例子,首先我们需要安装react-transition-group,输入:npm install react-transition-group --save ,使用yarn的同学输入 yarn add react-transition-group组件中引入CSSTransition模块...转载 2020-04-29 09:34:53 · 215 阅读 · 0 评论 -
React.memo()
目录包装函数 PureComponent React.memo() React.memo() 与Redux 其他 参考包装函数React v16.6.0出了一些新的包装函数(wrapped functions),一种用于函数组件PureComponent / shouldComponentUpdate形式的React.memo()本篇将介绍React.memo()的使用场景...原创 2020-04-28 18:32:31 · 1072 阅读 · 0 评论 -
react Fragment
React 中常见模式是为一个组件返回多个元素。为了包裹多个元素你肯定写过很多的 div 和 span,进行不必要的嵌套,无形中增加了浏览器的渲染压力。版本1515以前,render 函数的返回必须有一个根节点,否则报错,为满足这一原则我会使用一个没有任何样式的 div 包裹一下。import React from 'react';export default function ...转载 2020-04-28 15:51:10 · 1671 阅读 · 0 评论 -
应用react-keeper
在vue中有个很好用的组件<keep-alive>,但是在react中官方却没有提供,可以使用react-keeper插件来实现项目实践使用React-Keeper还是要慎重,react-keeper加上会出现两个问题:1.状态缓存了,如果很多页面都是列表,这代表每个页面都有缓存数据,下次进入页面的时候会展示离开时的状态,那么缓存的数据量也不少,会占用浏览器内存,性能肯定会有影...原创 2020-03-06 14:18:11 · 1063 阅读 · 0 评论 -
使用antd-mobile+less+ts+flexible+px2rem 搭建基础项目,无需暴露配置
1、使用create-react-app 安装ts版本npx create-react-app demo-ts --typescript2、进入项目 打开idecd demo-tscode . // 进入vscode3、安装UI、react-app-rewired(自定义启动配置)和按需加载模块antd-mobilereact-app-rewired customiz...原创 2020-03-04 18:18:37 · 1123 阅读 · 0 评论 -
在react项目中打印e.target显示为null解决方案
react 中提示This synthetic event is reused for performance reasons. If you’re seeing this, you’re accessing the property target on a released/nullified synthetic event. This is set to null. If you must...原创 2020-02-13 12:00:26 · 666 阅读 · 0 评论 -
通过redux-persist持久化数据存储
因为刷新会导致数据的丢失,相比于vue直接监听浏览器的刷新,react中可以通过redux-persist持久化数据存储sudo yarn add redux-persist --savestore/index.js:(里面接入了react-redux调试工具)// 引入 creatStore 创建storeimport { createStore } from 'redux'...原创 2019-12-20 15:55:21 · 957 阅读 · 0 评论 -
react中prop-types的使用
什么是prop-types?prop代表父组件传递过来的值,types代表类型。简单来说就是用来校验父组件传递过来值的类型首先你需要通过在终端npm/yarninstall/add prop-types安装一个叫prop-types的第三方包import PropTypes from 'prop-types';TodoItem.propTypes = { test: Prop...原创 2019-12-19 15:17:10 · 1778 阅读 · 0 评论 -
antd form组件,经过 Form.create 之后,怎么获取ref
获取到的refs其实是调用form.create方法后被重新封装过了,返回的应该是一个新的对象,不是我们想要的初始组件;使用wrappedComponentRef 获取 ref<OpenCityForm wrappedComponentRef={(inst)=>this.cityForm = inst}/>通过this.cityForm.props.form.get...原创 2019-12-06 18:06:24 · 4308 阅读 · 0 评论 -
antd项目应用
在create-react-app下:基础插件安装1、yarn add#安装 react-router 、 axios安装 antd暴露webpack配置文件安装less-loader修改less-loaderyarn add react-router-dom axios less less-loaderyarn eject 暴露webpack配置文件报错是因...原创 2019-11-22 17:24:19 · 431 阅读 · 0 评论 -
React-Redux
React Redux 事实上是两个独立的产品, 应用可以使用 React 而不使用Redux ,也可以使用 Redux 而不使用 React ,但是,如果两者结合使用,没有理由不使用,一个名叫 react-redux 的库这个库能够大大简化代码的书写,省下了监听的麻烦事,多了componentWillReceiveProps周期的事件。React-Redux 将所有组件分成两大类:UI ...原创 2019-09-29 13:52:55 · 163 阅读 · 0 评论 -
chrome安装react-devtools开发工具
1.首先打开官网:https://github.com/facebook/react-devtools2.本地打开git bash 然后复制上面的github下载链接在git中输入:git clone https://github.com/facebook/react-devtools.git3.克隆完成以后cd react-devtools //切换到工程目录cnpm i //安装...原创 2019-05-15 12:08:00 · 1174 阅读 · 0 评论 -
初学react(八)循环
import React from 'react';import './App.css';import Persion from './Persion/Persion';class App extends React.Component { /** * state: 用于改变组件内状态的值(动态) * props: 用于组件通信传值 */ state = { ...原创 2019-05-15 10:55:25 · 115 阅读 · 0 评论 -
初学react(七):if 判断
思路:先定义一个state里的一个状态,因为如果状态改变都会重新执行render,所以在render写上判断动态的赋值,也可以使用三目运算。import React from 'react';import './App.css';import Persion from './Persion/Persion';class App extends React.Component { /...原创 2019-05-15 09:56:47 · 1408 阅读 · 0 评论 -
初学react(六):组件样式的两种方式
1、创建css文件,组件当中引入即可import './Persion.css';2、在render函数里定义一个样式,在jsx里引入render () { const style = { backgroundColor: 'red', border: '1px solid blue' } return ( <div...原创 2019-05-15 09:34:44 · 529 阅读 · 0 评论 -
初学react(五):双向数据绑定
React双向数据绑定input组件双向数据绑定,需要父组件暴露一个数据更新方法传递给子组件,input使用onChange触发,然后获取对应改变的值,重新setstate,用defaultValue 替换value作为默认值//persion.jsimport React from 'react';const person = ( props ) => { retur...原创 2019-05-14 18:33:49 · 222 阅读 · 0 评论 -
初学react(四):组件属性传递(传事件)
React-属性传递(传事件)a. 可以把函数当作属性传递过去,子组件内props接收b.注意普通函数不能直接加括号,会直接执行{/* 函数不能加括号,加括号就直接执行了,使用箭头函数可以实现参数的传递 */}{/* <button onClick={() => this.switchNameHandLer('古天乐')}>更改状态值</button>...原创 2019-05-14 18:32:16 · 544 阅读 · 0 评论 -
初学react(三):state状态使用
React-state状态使用,类似vue里的dataa. state来自于react的Component,所以只能在类里面使用,不能再函数里使用b. 用来改变值的状态import React from 'react';import './App.css';import Persion from './Persion/Persion';class App extends Rea...原创 2019-05-14 18:30:45 · 210 阅读 · 0 评论 -
初学react(二):组件与组件间的参数传递
a. 在src里新建Persion目录,并新建Persion.js 文件Persion.js//必须引入react,来识别JSX语法import React from 'react';//定义一个组件,并用形参接受父组件传过来的参数,可以自己定义const person = ( props ) => { return ( <div> ...原创 2019-05-14 18:29:12 · 209 阅读 · 0 评论 -
React——JSX、render机制、state状态、组件定义、参数传递、生命周期
vscode 安装 Reactjs code snippets 代码提示 输入rcc 自己补全1、for属性 label标签 与js for循环 冲突,需要使用htmlFor2、class属性 与js保留字class 冲突 ,需要使用className3、style属性 与js style={{color:'red'}}在jsx中只能用对象的方式表示css样式4、三元...原创 2019-08-10 15:40:11 · 1092 阅读 · 0 评论 -
React使用 http-proxy-middleware配置Proxy,并用node—express+mock模拟接口
1、问题:react项目需要本地用node模拟接口2、解决:使用express做服务端,mock做假数据,http-proxy-middleware是做代理的,避免出现跨域无法访问的问题。3.、具体实现:npm run eject a.安装http-proxy-middlewarenpm install http-proxy-middleware在s...原创 2019-08-24 10:34:04 · 1162 阅读 · 0 评论 -
react中使用css module
原因:react中的css没有域的概念,是全局的,在Vue的工程中除了Modules之外还可以使用css作用域scoped来做实现组件之间的样式不会互相干扰,实现样式独立,所以需要css modules。有很多方法可以解决这个问题,比如 css-in-js:本文只讨论css modules的实现方式。如果是create-react-app 来创建的项目:1.npm run ej...原创 2019-08-17 14:58:44 · 3828 阅读 · 0 评论 -
Redux 使用
需要知道的是,Redux与React之间没有关系,Redux支持React 、Angular、Vue,Ember、jQuery甚至纯JavaScript安装:cnpm install --save-dev redux新建src/redux/index.js文件基本用法:https://redux.js.org功能点:1、getState()将会拿到整个数据对象与vue的...原创 2019-09-20 14:01:31 · 126 阅读 · 0 评论 -
react 观察者模式
var observer = { // 观察者模式 arr: {}, $on (event, cb) { // 监听与注入函数 if (!this.arr[event]) { this.arr[event] = [cb] } else { this.arr[event].push(cb) } }, $emit (event, ...msg) { // emit函数...原创 2019-08-29 16:13:22 · 1489 阅读 · 0 评论 -
Restful API接口规范
简介REST:英文representational state transfer直译为表现层状态转移,或者表述性状态转移;Rest是web服务的一种架构风格,一种设计风格,是一种思想;同时Rest不是针对某一种编程语言的。以webService为例通俗解释。非Rest设计,以往我们都会这么写:http://localhost:8080/admin/getUser (查询用户)h...转载 2019-08-28 15:41:10 · 206 阅读 · 0 评论 -
React-Router4.x跳转方法
1. 使用 withRouterwithRouter高阶组件,提供了history让你使用~import React from "react";import {withRouter} from "react-router-dom";class MyComponent extends React.Component { ... myFunction() { this....转载 2019-08-22 10:02:10 · 487 阅读 · 0 评论 -
初探 React Router 4.0
RR4 本次采用单代码仓库模型架构(monorepo),这意味者这个仓库里面有若干相互独立的包,分别是:react-router React Router 核心 react-router-dom 用于 DOM 绑定的 React Router react-router-native 用于 React Native 的 React Router react-router-redux Rea...转载 2019-08-22 11:07:36 · 129 阅读 · 0 评论 -
自定义React高阶组件实现组件懒加载
因为import() 与 require 都不能使用动态的参数,所有我们在高阶组件里传一个函数<Route path="/AsyncComponent" component={AsyncComponent(()=> import('../component/lazyComponent'))} />import React, { Component } from 'r...原创 2019-08-27 13:59:24 · 629 阅读 · 0 评论 -
react中用mockjs做本地数据请求
1、下载mockjs推荐mock工具: charles。cnpm install --save-dev mockjs2、下载axioscnpm install --save-dev axios3、新建文件/utils/mockdata.js,更多官网实例import Mock from 'mockjs'Mock.mock('/list', { "objec...原创 2019-08-22 15:41:21 · 1153 阅读 · 0 评论