react
关注
分享
扫一扫
若～～～
爱自己才是终身浪漫的开始。❤️
展开
-
一键复制功能（兼容pc端和移动端）2种方式以及附带案例
react-copy-to-clipboardnpm install --save react react-copy-to-clipboardimport React from 'react';import {CopyToClipboard} from 'react-copy-to-clipboard'; const languageList =() => [ { ...原创 2020-03-23 11:10:54 · 1183 阅读 · 0 评论 -
react中监听页面滚动的高度以及横向滚动的位置
//首先在componentDidMount，进行scroll事件的注册，绑定一个函数，让这个函数进行监听处理componentDidMount() { window.addEventListener('scroll', this.bindHandleScroll)}bindHandleScroll=(e)=>{ // 滚动的高度(兼容多种浏览器)const scro...原创 2020-03-07 18:52:17 · 9070 阅读 · 0 评论 -
create-react-app + mobx 小demo
新的一周又开始了，一如既往的家里办公～～～～昨天开周会了，其他同事手里多少都有点工作，不像我，bug解决完了，新的需要还没出来，这就尴尬了？？？????????????不能告诉领导我是真的没事干吧？？？哈哈，其实组长也知道自己手里到底有没有工作，不妨趁着闲暇之际，来学点儿东西吧～～～我们公司对项目使用框架一般都是react+redux+saga，趁着工作不忙，来学习一下 “mobx” 吧！但是没想到一上午...原创 2020-02-25 14:53:49 · 492 阅读 · 0 评论 -
redux和mobx对比
Reduxaction:一个javascript对象，描述动作相关信息，主要包含type和payload属性；type:action类型；payload：负载数据；reducer：定义应用状态如何响应不同动作（action），如何更新状态；store：管理action和reducer及其关系等对象，主要提供以下功能：维护应用状态并支持访问状态（getstate()）;支持监...转载 2020-02-24 18:24:33 · 724 阅读 · 0 评论 -
react 项目支持 装饰器写法 Support for the experimental syntax ‘decorators-legacy‘ isn‘t currently enabled
Support for the experimental syntax ‘decorators-legacy’ isn’t currently enabled有道云翻译过来意思为：目前还不支持实验性语法“decorator -legacy”其实大概意思就是装饰器语法不支持呗！报错如下图：遇到问题，肯定第一时间百度，看大家有没有遇到类似情况，如何解决的，参考答案几乎都是：npm ins...原创 2020-02-24 12:47:58 · 2155 阅读 · 0 评论 -
React Hooks
之前的文章中总结过 React Hooks常用的钩子useState、useContext、useReducer、useEffect的用法，今日趁着工作不忙，再次详细了解下 Hooks简介什么是HooksHooks是一个新的React特性提案，组件尽量写成纯函数，如果需要外部React特性（比如状态管理，生命周期），就用钩子把外部特性"钩"进来，通常函数名字都是以use开头。首次在v16.7...原创 2020-02-20 12:11:21 · 345 阅读 · 0 评论 -
路由的实现原理---完整的demo
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...原创 2019-06-13 09:31:59 · 807 阅读 · 0 评论 -
简单谈下 Component和PureComponent的区别
在PureComponent中，如果包含比较复杂的数据结构，可能会因深层的数据不一致而产生错误的否定判断，导致界面得不到更新。转载 2019-12-06 18:48:41 · 599 阅读 · 0 评论 -
Vue、React同一个dom元素绑定多个点击事件
Vue:<button type="button" @click="vueA();vueB()">vue</button> React:<button type="button" onClick={(event) => { ReactA(); ReactB();}}>react按钮</button>js(vue)methods:{ ...原创 2019-11-15 18:40:50 · 1156 阅读 · 0 评论 -
react 使用antd的form表单， 使用getFieldDecorator中的rules进行格式限制以及认证
需求： 对输入框中的内容进行校验，不能输入特殊字符，输入内容，必须大于2，小于10位直接撸代码： <Item> {getFieldDecorator('ApiName', { //设置默认value ...原创 2019-08-07 17:48:51 · 8406 阅读 · 10 评论 -
react实现一键复制功能
实现功能如上图：input 和 button 按钮是在一个元素里面，需要点击复制的时候，复制到input 中的value值，可以在任何地方粘贴代码：//message 用于提示是否复制成功，是antd 自带的组件，可以直接引用import { message } from 'antd' <div className='inputBox' style={{position: ...原创 2019-08-06 17:11:04 · 11459 阅读 · 0 评论 -
React结合 antd 实现手机或者邮箱获取验证码60秒倒计时
我这边是使用了antd button 和input 组件，若大家需要 提前下载import { Input, Button } from ‘antd’ <div> <p className={`littleTitle`}>手机号</p> <Input className={`apiMobileI...原创 2019-08-08 14:26:51 · 7582 阅读 · 6 评论 -
react结合antd日期组件使用方法（结束时间不能小于开始时间）
需求：实现开始和结束时间的选择，并且选择开始时间之后，结束时间不能小于开始时间，或者说先选择了结束时间，开始时间选择的时候只能小于结束时间，不能选择的日期禁用import { Button, DatePicker } from 'antd'class DatePickers extends React.Component { constructor() { super(...原创 2019-07-25 14:42:50 · 5538 阅读 · 0 评论 -
React中无状态组件和有状态组件的写法以及区别
React中的组件主要分为无状态组件和有状态组件两类。1，无状态组件主要用来定义模板，接收来自父组件props传递过来的数据，使用{props.xxx}的表达式把props塞到模板里面。无状态组件应该保持模板的纯粹性，以便于组件复用。创建无状态组件如下：var Header = (props) = ( <div>{props.xxx}</div>);expo...原创 2019-07-24 20:54:16 · 2282 阅读 · 0 评论 -
使用从create-react-app创建项目后，运行npm run eject报错解决方法
使用create-react-app命令创建一个react项目，运行npm run eject生成配置文件，报了下面的错：Remove untracked files, stash or commit any changes, and try again.npm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! test@0.1.0 eject: `...原创 2019-09-20 15:22:06 · 716 阅读 · 0 评论 -
react中使用了antd的input，如何修改精度和设置输入数据类型为Number，只能输入小数点后4位，并且不能输入'e E + - '这些特殊字符
需求：有一个input框，要求只能输入数字，并且小数点后面输入4位，多余的部分就输入不进去，自己使用了antd的input组件，至于小数点后四位，直接正则搞定，输入数据类型的话，设置type类型为number，但是发现还能输入’-’, ‘+’, ‘e’, ‘E’ 这些字符，于是通过以下方法实现了效果 type="number" //设置为number类型 ...原创 2019-07-23 19:14:54 · 8488 阅读 · 0 评论 -
React 知识大全，生命周期，组件，状态，组件通信，redux，路由（react-router）以及React生态总结
原创 2019-08-22 09:49:26 · 230 阅读 · 0 评论 -
react中 store action reducer 的关系
store存储着状态, 要想改变store必须使用action,store进行更新时使用reducer. 那么store, action, reducer是啥呢?store和action都是对象, action中必须有一个type字段对进行的操作进行说明, 可能会有数据. store会赋值给组件中的state reducer是一个纯函数, 接收两个参数, 第一个参数是累积对象(即state),...原创 2019-08-17 11:34:46 · 1631 阅读 · 0 评论 -
单页面与多页面应用开发对比以及单页面路由实现原理
MPA与SPA简介MPAMPA (Multi-page Application) 多页面应用指的就是最传统的 HTML 网页设计，早期的网站都是这样的设计，所之称为「网页设计」。使用 MPA 在使用者浏览 Web 时会依据点击需求切换页面，浏览器会不停的重载页面 (Reload)，整个操作也常感觉卡卡。如果使用这样的设计在 Web App 中，使用者体验比较差，整体流畅度扣分。但进入门槛低，简...原创 2019-06-16 18:47:19 · 1232 阅读 · 0 评论 -
redux-saga
一、什么是redux-sagaredux-saga是一个用于管理redux应用异步操作的中间件，redux-saga通过创建sagas将所有异步操作逻辑收集在一个地方集中处理，可以用来代替redux-thunk中间件。流程图整个流程：ui组件触发action创建函数 —> action创建函数返回一个action ------> action被传入redux中间件(被 saga...原创 2019-09-12 15:56:47 · 173 阅读 · 0 评论 -
从零搭建一个react + react-router + webpack框架
导语：学习搭建react +webpack工程时，看了很多资料，学习点真的很多，几乎每一项都可以单独写一个篇幅，该文章只在怎么搭建出开发框架，很多东西没有深入，只做了一些简单的介绍，但基本会把官方文档列出来，想要深入了解的可以先自己把工程跑起来，然后认真看官方文档。我们想要的框架需要什么样的功能：1、使用webpack打包3、入口JS文件可以自动注入到HTML模板中2、使用ES6 reac...转载 2019-09-20 15:43:04 · 2697 阅读 · 0 评论 -
React Hooks常用的钩子useState、useContext、useReducer、useEffect的用法
React 是主流的前端框架，v16.8 版本引入了全新的 API，叫做 React Hooks，颠覆了以前的用法。一、class 组件的缺点class 组件写发import React, { Component } from "react";export default class Button extends Component { constructor() { supe...转载 2019-09-23 18:19:54 · 1932 阅读 · 0 评论 -
Vue（MVVM）、React(MVVM)、Angular(MVC)对比
React与Vue对比相似点：1.使用 Virtual DOM2.提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。3.将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。区别：1.在 React 应用中，当某个组件的状态发生变化时，它会以该组件为根，重新渲染整个组件子树。如要避免不必要的子组件的重渲染，你需要手动实现；在 Vue ...转载 2019-05-28 09:43:56 · 417 阅读 · 0 评论 -
redux-actions和redux区别
介绍redux-actions的产生，是为了简化redux的使用。Redux传统用法在使用redux-actions之前，我们先用传统的redux用法写一个例子。actionTypes.jsconst BOOK_LIST_GET = 'BOOK_LIST_GET';export default { /** * 获取书籍列表 */ BOOK_LIST_GET,}...转载 2019-07-12 17:40:10 · 346 阅读 · 0 评论 -
前后端涉及到的常用知识点
前后端是如何交互的iOS，H5，安卓等前端开发的如何跟后台进行交互?应该怎么去规避一些不该属于自己的任务而被后台强加于自己?1.前端请求数据URL由谁来写?在开发中,URL主要是由后台来写的,写好了给前端开发者.如果后台在查询数据,需要借助查询条件才能查询到前端需要的数据时,这时后台会要求前端提供相关的查询参数，这里的查询参数也就是URL请求的参数。2.接口文档主要由谁来写?接口文档...原创 2019-06-13 22:44:15 · 1002 阅读 · 0 评论 -
react的高阶组件
高阶组件1、什么是高阶组件？高阶组件就是一个 React 组件包裹着另外一个 React 组件因为要访问它的内部状态，所以要用到继承高阶组件就是一个函数，它接受另一个组件作为参数，并返回一个新的组件。当 React 组件被包裹时（warped），高阶组件会返回一个增强的 React 组件。高阶组件让代码更具有复用性、逻辑性和抽象特性。2、侵入式利用super传递下去imp...原创 2019-06-13 22:44:36 · 389 阅读 · 0 评论 -
如何正确的做技术选型
概述技术选型是项目的根基，如果选择了不适合自己业务场景的技术。初期由于业务复杂程度和业务量都比较小，所以可能感受不是十分明显，但是到了后期这将会是一个噩梦。会导致系统问题频发，极不稳定，甚至导致项目迭代举步维艰，甚至有的团队会停止新功能的开发，专门修复bug。严重时可能造成重大的经济损失。如何正确的做技术选型，也可参考以下几点：1、实现当前的需求，主要用到哪种技术；2、该技术的成熟度如何，...转载 2019-06-13 09:41:22 · 2331 阅读 · 0 评论 -
react合成事件和DOM原生事件的区别
事件流在了解事件之前先来看一下什么是事件流。'流’这个名词在JS中随处可见。像DOM事件流、React中的数据流等等。其实，流就是一种有方向的数据；事件流，是页面接受事件的顺序。一、DOM事件流的三个阶段1、事件捕获阶段当某个事件触发时，文档根节点最先接受到事件，然后根据DOM树结构向具体绑定事件的元素传递。该阶段为父元素截获事件提供了机会。事件传递路径为：window —>...转载 2019-06-01 09:58:18 · 1688 阅读 · 0 评论 -
React中在生命周期中的哪一步你应该发起 AJAX 请求?
在生命周期中的哪一步你应该发起 AJAX 请求?对于同步的状态改变，是可以放在componentWillMount，对于异步的，最好好放在componentDidMount。但如果此时有若干细节需要处理，比如你的组件需要渲染子组件，而且子组件取决于父组件的某个属性，那么在子组件的componentDidMount中进行处理会有问题：因为此时父组件中对应的属性可能还没有完整获取，因此就让其在子组件...转载 2019-06-01 08:21:28 · 6012 阅读 · 1 评论 -
react 中jsx 转化成js
安装转换packagenpm install --save-dev babel-cli babel-preset-react转换指令node_modules/.bin/babel jsx --presets react --out-dir staticjsx：为jsx文件夹static：为生成的js文件夹npm run compile对jsx做一些临时性改动，重新编译它，确保...原创 2019-05-31 17:11:33 · 2102 阅读 · 0 评论 -
Mobx总结以及mobx和redux区别
Mobx解决的问题传统React使用的数据管理库为Redux。Redux要解决的问题是统一数据流，数据流完全可控并可追踪。要实现该目标，便需要进行相关的约束。Redux由此引出了dispatch action reducer等概念，对state的概念进行强约束。然而对于一些项目来说，太过强，便失去了灵活性。Mobx便是来填补此空缺的。这里对Redux和Mobx进行简单的对比：1. Redux...原创 2019-05-31 12:00:02 · 27502 阅读 · 2 评论 -
react和vue有哪些不同，说说你对这两个框架的看法
react和vue有哪些不同，说说你对这两个框架的看法相同点· 都支持服务器端渲染· 都有Virtual DOM,组件化开发,通过props参数进行父子组件数据的传递,都实现webComponent规范· 数据驱动视图· 都有支持native的方案,React的React native,Vue的weex不同点· React严格上只针对MVC的view层,Vue则是MVVM模式· v...原创 2019-05-27 21:15:50 · 1067 阅读 · 0 评论 -
发布、订阅者模式（发布、订阅、取消监听）附带demo
class Watch{ constructor(props){ this.events={} } on(type,listener){ if(!Array.isArray(this.events[type])){ this.events[type]=[] } this.events[type].push(listener) } emit(type,...reset...原创 2019-05-27 21:02:35 · 516 阅读 · 0 评论 -
关于报错Support for the experimental syntax 'decorators-legacy' isn't currently enabled
报错原因装饰器写法不被支持解决办法bable转码npm install @babel/plugin-proposal-decorators配置package.json“babel”: {“plugins”: [[“@babel/plugin-proposal-decorators”,{“legacy”: true}]],“presets”: [“react-app”...原创 2019-05-16 19:28:46 · 8941 阅读 · 6 评论 -
关于react-redux中connect的解析
connect的作用connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])(MyComponent)参数说明第一个参数：mapStateToProps这是一个function，返回一个object；(state, [ownProps]) => ({ }) // 通常省略第二个参数作用 把指...原创 2019-05-24 15:30:58 · 415 阅读 · 0 评论 -
做项目到底该用Vue和还是react？
2016年React巩固了它作为前端框架之王的地位，这一年中可以看到它在Web端和移动端的快速成长，同时稳稳领先于它的主要竞争对手Angular。但是2016对Vue来说也是同样令人印象深刻的一年，它发布了Vue 2.0版本并且在JavaScript社区引起了巨大反响，GitHub上多出的25000颗star就是最好的证明。React和Vue的适用范围无疑是很相似的：同样是基于组件的轻量级框架...转载 2019-05-04 18:55:25 · 15674 阅读 · 0 评论 -
前端项目优化点（vue和react优化点）
为什么需要项目优化在互联网快速发展的今天，在实现完功能之后，项目优化是一个被经常提到的话题。很多项目会在开发排期中留大量时间去做一轮又一轮的性能优化，就是为了让页面尽可能早的到达用户，提高交互的流畅程度。在系统可利用系统资源有限的大背景下，3秒呈现内容的原则下，项目优化显得格外重要。每减少0.1秒加载速度可能会给你带来几百甚至几千的用户活跃；每减少100K的内容请求可能会给你带来几千甚至几万...原创 2019-06-13 10:47:13 · 1235 阅读 · 0 评论 -
前后端是如何交互的
iOS，H5，安卓等前端开发的如何跟后台进行交互?应该怎么去规避一些不该属于自己的任务而被后台强加于自己?1.前端请求数据URL由谁来写?在开发中,URL主要是由后台来写的,写好了给前端开发者.如果后台在查询数据,需要借助查询条件才能查询到前端需要的数据时,这时后台会要求前端提供相关的查询参数，这里的查询参数也就是URL请求的参数。2.接口文档主要由谁来写?接口文档也是主要由后台开发者...原创 2019-06-13 10:49:02 · 35348 阅读 · 12 评论 -
虚拟DOM和真实DOM的关系
虚拟DOM和真实DOM的关系首先，Virtual DOM并没有完全实现DOM，即虚拟DOM和真正地DOM是不一样的，Virtual DOM最主要的还是保留了Element之间的层次关系和一些基本属性。因为真实DOM实在是太复杂，一个空的Element都复杂得能让你崩溃，并且几乎所有内容我根本不关心好吗。所以Virtual DOM里每一个Element实际上只有几个属性，即最重要的，最为有用的，并...原创 2019-06-13 09:33:51 · 4076 阅读 · 0 评论 -
react的组件通信
组件通信需要组件之进行通信的几种情况父组件向子组件通信子组件向父组件通信跨级组件通信没有嵌套关系组件之间的通信1、父组件向子组件通信通过props2、子组件向父组件通信利用回调函数利用自定义事件机制3、 跨级组件通信层层组件传递props使用context4、没有嵌套关系组件之间的通信使用自定义事件机制...原创 2019-06-13 22:42:27 · 299 阅读 · 0 评论