React
React
追影的React开发者
注重用户,专注于产品、界面和用户体验
联系邮箱:liuyafeis@outlook.com
展开
-
React函数组件和类组件的区别
区别函数组件的性能比类组件的性能要高,因为类组件使用的时候要实例化,而函数组件直接执行函数取返回结果即可。为了提高性能,尽量使用函数组件。区别 函数组件 类组件 是否有this 没有 有 是否有生命周期 没有 有 是否有状态state 没有 有 定义组件的要求组件名称必须以大写字母开头 组件的返回值只能有一个根元素函数组件function Welcome (props) { return <h1>Wel..原创 2021-03-23 11:34:07 · 584 阅读 · 0 评论 -
React 使用 Effect Hook
Hooks是一项新功能提案,可让您在不编写类的情况下使用 state(状态) 和其他 React 功能。它们目前处于 React v16.7.0-alpha 中,并在一个开放RFC中进行讨论。愚人码头注:首先了解什么是副作用(Side Effect):副作用(Side Effect)是指函数或者表达式的行为依赖于外部世界。具体可参照Wiki上的定义,副作用是指: 函数或者表达式修改了它的 scope 之外的状态 函数或者表达式除了返回语句外还与外部世界或者它所调用的函数有明显的...原创 2021-03-19 11:31:33 · 669 阅读 · 0 评论 -
React 使用 State(状态) Hook
Hooks是一项新功能提案,可让您在不编写类的情况下使用 state(状态) 和其他 React 功能。import { useState } from 'react';function Example() { // 声明一个新的状态变量,我们将其称为 "count" const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times<.原创 2021-03-19 11:04:13 · 752 阅读 · 0 评论 -
React 入门实例教程
现在最热门的前端框架,毫无疑问是React。上周,基于 React 的React Native发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑。React 起源于 Facebook 的内部项目,因为该公司对市场上所有JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设Instagram的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。所以,越来...转载 2021-01-06 14:30:09 · 471 阅读 · 0 评论 -
React 编程规范
一、命名规范1、通用命名方法命名方法 举例 Camel命名法 thisIsAnApple Pascal命名法 ThisIsAnApple 注意:在命名时尽量简洁明了,用英文表达(绝对不能用拼音或者首字母拼写)2、各类型命名规范名称 命名方法 词汇种类 说明 举例 局部变量名 Camel命名法 名词 fristName 全局变量名 Camel命名法 名词 前缀:g gFristNa.转载 2020-11-23 14:28:51 · 2046 阅读 · 0 评论 -
React 拖拽功能
import React, { PureComponent } from "react";import Dragm from "dragm";export default class dragm extends PureComponent { render() { const { children } = this.props return ( <Dragm> <div>{children}</div> &.原创 2020-08-12 11:54:45 · 476 阅读 · 0 评论 -
React 触发render的方法
1、通过setStatethis.setState({});2、this.forceUpdate()this.forceUpdate();3、通过状态管理,如mobx,redux等原创 2020-07-10 15:29:31 · 1646 阅读 · 0 评论 -
Warning: React version not specified in eslint-plugin-react settings.
问题Warning: React version not specified in eslint-plugin-react settings.方法找到 .eslintrc 文件{ "extends": "umi", "settings": { "react": { "version": "999.999.999" } }}即可解决原创 2020-06-19 14:48:58 · 5036 阅读 · 0 评论 -
React 新手入门篇
react众所周知的前端3大主流框架之一,由于出色的性能,完善的周边设施风头一时无两。本文就带大家一起掌握react。jsx语法前端MVVM主流框架都有一套自己的模板处理方法,react则使用它独特的jsx语法。在组件中插入html类似的语法,简化创建view的流程。下面让我们来认识一下构建的两种元素原生元素ReactDOM.render(( <div> ...原创 2018-09-11 17:55:00 · 786 阅读 · 0 评论 -
React componentDidUpdate 和 componentWillReceiveProps 的区别
参数 触发时机 更新 state 的方式 componentWillReceiveProps componentWillReceiveProps(nextProps) 只有一个参数nextProps,下一次的props 在组件接受新的props之前触发 仅在props变化时会触发 更新状态是同步的 不触发重新render componentDidUpdate compo...原创 2020-07-09 10:10:13 · 1156 阅读 · 0 评论 -
React 组件生命周期
1、组件的生命周期可分成三个状态:Mounting:已插入真实 DOM Updating:正在被重新渲染 Unmounting:已移出真实 DOM2、生命周期的方法有: componentWillMount在渲染前调用,在客户端也在服务端。 componentDidMount: 在第一次渲染后调用,只在客户端。之后组件已经生成了对应的DOM结构,可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用,可以在这个方法中调用setTi..原创 2020-07-09 09:55:20 · 1341 阅读 · 0 评论 -
React 随机生成验证码
效果代码import React, { PureComponent } from "react";import { createForm } from "rc-form";import { Form, Icon, Input } from "antd";@createForm()export default class VerificationCode extends PureComponent { constructor(props) { super(props).转载 2020-06-08 09:40:52 · 1229 阅读 · 1 评论 -
React 组件之侧边抽屉
import React, { PureComponent } from "react";export default class Query extends PureComponent { render() { const { show, children } = this.props; return ( <div style={{ ...原创 2019-10-12 15:10:47 · 2326 阅读 · 2 评论 -
React 照片预览,可放大缩小拖动
import React, { PureComponent } from "react";let params = { zoomVal: 1, left: 0, top: 0, currentX: 0, currentY: 0, flag: false};export default class PhotoPreview extends PureComponen...原创 2020-03-11 16:47:00 · 5817 阅读 · 1 评论 -
React 保存文件到本地 file-saver
var FileSaver = require('file-saver');let data = { name:"hanmeimei", age:88 }let content = JSON.stringify(data);let blob = new Blob([content], {type: "text/plain;charset...原创 2019-10-15 09:41:43 · 9085 阅读 · 4 评论 -
React 获取style样式
1、html标注dom<div ref={e => (this.test = e)}></div>2、js获取const top = this.test.style.top;原创 2019-09-26 16:06:20 · 3309 阅读 · 0 评论 -
React 组件之多选Checkbox
import React, { PureComponent } from "react";import { List, NavBar, Checkbox } from "antd-mobile";import { Icon } from "antd";import TouchFeedback from "rmc-feedback";import NavContentContainer f...原创 2019-09-26 15:14:28 · 8089 阅读 · 0 评论 -
React router中设置默认路由
需求,设置Product为默认路由<Route path="/area" component={Area} /><Route path="/product" component={Product} />方法1<Route path="/" component={Product} exact /><Route path="/area" c...原创 2019-05-18 15:54:52 · 20388 阅读 · 2 评论 -
React 使用 Antd 样式
通过 npm 安装antd和babel-plugin-import。babel-plugin-import是用来按需加载 antd 的脚本和样式的。npm install antd babel-plugin-import --save编辑.webpackrc,使babel-plugin-import插件生效。{ "extraBabelPlugins": [...原创 2019-05-17 15:56:48 · 1128 阅读 · 0 评论 -
React 一侧固定导航栏、另一侧内容
index.jsimport React, { PureComponent } from "react";import { BrowserRouter as Router, Route, Link } from "react-router-dom";import Home1 from "./Home/Home1";import Home2 from "./Home/Home2";e...原创 2019-05-17 11:20:09 · 5511 阅读 · 0 评论 -
React dva 新建项目报错:Modal not found: Can‘t resolve ‘@babel/runtime/helpers/esm/extends‘
项目用的dva1、dva new project2、cd project3、npm install出现报错./node_modules/history/esm/history.jsModule not found: Can't resolve '@babel/runtime/helpers/esm/extends' in ......解决方法package.js...原创 2019-05-17 09:53:06 · 1992 阅读 · 0 评论 -
React 任意组件之间通信
1、新建event.js文件import { EventEmitter } from "events";export default new EventEmitter();2、组件需引入import emitter from "../../../utils/event";//路径需修改为自己的路径3、组件通信发起者html<div onClick={() =&...原创 2019-03-25 17:18:15 · 542 阅读 · 0 评论 -
React 父子组件通信
1、子组件调用父组件方法父组件html<div> <Chlid link={this.fn()} /></div>父组件js fn= e => { console.log(e) //123 };子组件html<div onClick={() => { this.props.link(1...原创 2019-03-25 17:10:18 · 139 阅读 · 0 评论 -
React 判断滚动到底部
html <div ref={e => (this.scroll = e)}></div>js componentDidMount() { if (this.scroll) { this.scroll.addEventListener("scroll", e => { const { clientHeigh...原创 2019-05-05 16:44:57 · 10228 阅读 · 0 评论 -
React 鼠标滚轮事件
jshandleScroll(e) { const ele = rdom.findDOMNode(this); if (e.nativeEvent.deltaY <= 0) { if (ele.scrollTop <= 0) { e.preventDefault(); console.log("up"); }...原创 2019-03-25 15:56:21 · 6037 阅读 · 4 评论 -
React 路由跳转
1、html跳转<Link to="/home">home</Link>2、js跳转this.props.history.push('/home');3、组件js跳转import { createHashHistory } from 'history'; // 如果是hash路由import { createBrowserHistory } fr...原创 2019-08-02 17:57:22 · 632 阅读 · 0 评论 -
React-signature-phone 移动端电子签名
1、安装npm install react-signature-phone --save2、引入import SignaturePhone from 'react-signature-phone';3、使用<SignaturePhone ref="mySignature" height={150} />4、方法//定义变量控制domlet sign...原创 2019-08-07 11:01:49 · 942 阅读 · 0 评论 -
React 滚动到顶部
html<div ref={el => (this.ListView = el)}>测试</div>js1、第一种方法scrollToif (this.ListView) this.ListView.scrollTo(0, 0);2、第二种方法scrollTopif (this.ListView) this.ListView.scroll...原创 2019-08-30 09:00:57 · 3339 阅读 · 0 评论 -
React 滑动事件
handleTouchStart = e => { this.startY = e.touches[0].clientY; }; handleTouchMove = e => { this.endY = e.touches[0].clientY; console.log( this.startY > this.endY ? "上滑...原创 2019-09-17 20:13:13 · 2989 阅读 · 0 评论 -
React 组件之必填项提示MustFill
import React, { PureComponent } from "react";import { Icon } from "antd";export default class Loading extends PureComponent { render() { return ( <Icon type="star" t...原创 2019-09-26 11:32:08 · 1843 阅读 · 0 评论 -
React 组件之加载图Loading
import React, { PureComponent } from "react";import { ActivityIndicator } from "antd-mobile";export default class Loading extends PureComponent { static defaultProps = { show: false }; ...原创 2019-09-26 11:33:15 · 1995 阅读 · 0 评论 -
React+Cordova+Android环境配置
0、版本说明node v8.11.1npm 5.6.0cordova 8.0.0cordova platform android 7.0.01、nvm-windows安装https://github.com/coreybutler/nvm-windows2、配置nvm-windows镜像打开文件C:\Users\Administrator\AppData\Roaming\...原创 2018-12-25 11:32:44 · 1232 阅读 · 0 评论