React
蜗牛速度额
这个作者很懒,什么都没留下…
展开
-
React.js 轮播图 react-swipe
我下载的版本是5.1.1 因为最新的版本 用的时候发现了问题 没有用npm install [email protected] --saveimport React from 'react';import ReactSwipe from 'react-swipe';import './style.less';class Category extends React.Compo...原创 2018-12-26 19:59:43 · 7888 阅读 · 0 评论 -
React.Component与React.PureComponent的区别
React.PureComponent 与 React.Component 几乎完全相同,但 React.PureComponent 通过prop和state的浅对比来实现 shouldComponentUpate()。如果React组件的 render() 函数在给定相同的props和state下渲染为相同的结果,在某些场景下你可以使用 React.PureComponent 来提升性能。...原创 2019-04-06 21:01:00 · 3081 阅读 · 0 评论 -
[email protected] 配置 less 与 antd
配置lessnpm run eject弹出webpack配置文件npm i less less-loader -D安装 less 以及 less-loader在webpack中进行配置,与1.x相比较,2.x对css loader这一块做了提取,抽出了一个方法,如下// common function to get style loaders// 第一个参数代表配...原创 2019-03-13 09:56:45 · 436 阅读 · 0 评论 -
React prop-types 数据检测
npm install --save prop-typesimport React from 'react';import PropTypes from 'prop-types'; // ES6lass MyComponent extends React.Component { render() { // ... do things with the props }}...原创 2019-03-02 17:51:08 · 181 阅读 · 0 评论 -
react项目的组件库antd-mobile
1.antd-mobile是由蚂蚁金融团队推出的一个开源的react组件库,这个组件库拥有很多使用的组件,下面我来介绍一下他的用法:2.按照官网http://beta.mobile.ant.design/docs/react/introduce-cn上的操作步骤:npm install antd-mobile@next --save 3.在你的项目中的package.json文件里会...原创 2019-02-16 19:21:24 · 6735 阅读 · 0 评论 -
React react-redux 使用装饰器优化 connect代码
1.使用的是React官方提供的脚手架,要先执行 npm run eject 弹出个性化配置;2.安装插件 npm install babel-plugin-transform-decorators-legacy --save-dev;3.Package.json 里 babel 加上 plugins 配置;"babel": { "presets": [ "react-app...原创 2019-01-17 17:27:40 · 190 阅读 · 0 评论 -
React 高级组件 import() 按需异步加载 asyncComponent
import()方法返回的是一个Promise,Promise的返回值只能通过then()来读取,所以你会发现官方的3种使用场景全都是在then()里面操作。asyncComponent.jsximport React, { Component } from 'react';const asyncComponent = (importComponent) => { retu...原创 2019-01-12 10:52:04 · 8099 阅读 · 0 评论 -
React react-router 4.0 路径添加可选参数、获取history信息实现JS跳转
4.0 中参数后面加问号,表示可选参数: import { HashRouter, Route, Switch } from 'react-router-dom';class App extends Component { constructor() { super(); } render() { return ( <HashRouter&g...原创 2019-01-01 11:34:49 · 2330 阅读 · 0 评论 -
React.js create-react-app 实现热更新效果 !! 状态值保存
这是开始使用单页React应用程序的一种快速而简单的方法,我希望它会受欢迎,因为它已经在不到一天的时间内在GitHub上获得了超过2000颗星!重点是零配置,让您专注于编写应用程序。作为一个喜欢整个Babel / Webpack配置舞蹈的人来建立一个新项目,我仍然认为这很神奇,因为在开始一个新项目时我很容易陷入“分析瘫痪”。这允许您刚刚开始,当分支出来并添加更多配置时,您可以运行npm run...原创 2018-12-24 21:45:12 · 4316 阅读 · 1 评论 -
React 最简单的安装React Devtools调试工具
在运行一个react项目的时候浏览器控制台会提醒你去安装react devtools调试工具Download the React DevTools for a better development experience: https://fb.me/react-devtools记录下我安装React Devtools调试工具的步骤: 1、去git上下载react-devtools文件到...原创 2018-12-21 20:45:53 · 2961 阅读 · 1 评论 -
React.js 实现页面代码分割、按需加载 —— react-loadable 实现路由代码分割
最近在学习react,之前做的一个项目首屏加载速度很慢,便搜集了一些优化方法,react-loadable这个库是我在研究路由组件按需加载的过程中发现的。 import() 是es6的一种异步加载的方法。npm i react-loadable --saverouteMap.jsx import React from 'react';import {Router, Route, ...原创 2018-12-21 14:44:31 · 1068 阅读 · 0 评论 -
antd from验证input框只能输入数字
antd from验证input框只能输入数字问题:Input框中如果只能需要输入Id,也就是数字型字符串,需要进行验证。解决办法对其进行实时正则验证<Form.Item label='ID' > { getFieldDecorator('id', { rules:[{ requir...原创 2019-03-28 14:42:46 · 6922 阅读 · 1 评论