react
蜗牛不会跑~
生命虽然无趣,但总要留下点什么!!
展开
-
React中的属性校验和默认属性
一,在react中props是组件对外暴露的接口,但通常组件并不会明显的申明他会暴露那些接口及类型,这不太利于组件的复用,但比较好的是React提供了PropTypes这个对象用于校验属性的类型,PropTypes包含组件属性的所有可能类型,以下我们通过一个示列来说明(对象的key是组件的属性名,value是对应属性类型)组件属性的校验. import propTypes from '...原创 2018-07-01 12:30:44 · 1639 阅读 · 0 评论 -
react.js 教程之 create-react-app 命令行工具系统讲解
快速开始js npm install -g create-react-app create-react-app my-app cd my-app/ npm start 通过http://localhost:3000/查看你的app 使用 npm run build 编译打包程序 npm test 文件修改后测试,这部分内容后面讲 更新到最新版本js 创建react app的主要分为两个包,...转载 2018-08-15 13:26:49 · 356 阅读 · 0 评论 -
Webpack 3.X - 4.X 升级记录
Webpack 3.X - 4.X 升级记录先升级 webpack-cli首先:执行命令npm install webpack-cli -D或者npm install -g yarnyarn add webpack-cli -D启动服务出现的问题问题1:compilation.mainTemplate.applyPluginsWaterfall is not a fun...转载 2018-08-15 14:08:00 · 435 阅读 · 0 评论 -
Webpack 4 和单页应用入门
写在开头先说说为什么要写这篇文章,最初的原因是组里的小朋友们看了 webpack 文档后,表情都是这样的:摘自 webpack 一篇文档的评论区)和这样的:是的,即使是外国佬也在吐槽这文档不是人能看的。回想起当年自己啃 webpack 文档的血与泪的往事,觉得有必要整一个教程,可以让大家看完后愉悦地搭建起一个 webpack 打包方案的项目。官网新的 webpack 文档现...转载 2018-08-16 18:59:02 · 1086 阅读 · 0 评论 -
Ant Design Pro 上手备忘录
Ant Design Pro 是蚂蚁金服团队在 Ant Design 的设计规范与组件库基础上推出的一套 React 实现的企业级中后台前端/设计解决方案。上手使用方法是直接 clone 其 GitHub 仓库然后执行 npm install,或是安装官方提供的 cli 工具创建项目(但在这过程中也会涉及到 clone 其 GitHub 仓库)。新项目创建后,自带模板页面和工具链,可以快速...原创 2018-09-07 15:15:36 · 427 阅读 · 0 评论 -
探索Redux的最佳实践
一、 前言广发证券金钥匙是一个连接用户和投资顾问、为用户提供专业投资咨询服务的的产品。基于Angular 1.x和Ionic,我们为用户和投顾分别提供了覆盖PC Web、Mobile Web和Android/iOS客户端的系列产品。前端的发展日新月异,React Native/Weex/微信小程序等技术方案进一步扩展了前端技术的应用范围。在金钥匙项目中,我们相继推出了小程序版金钥匙有问必答...转载 2018-10-15 17:44:53 · 220 阅读 · 0 评论 -
React模块开发redux-devtools-extension调试工具
用法注意,从v2.7开始, window.devToolsExtension 被重命名为 window.__REDUX_DEVTOOLS_EXTENSION__ / window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__.1. With Redux1.1 Basic store对于基本的Redux store存储,只需添加即可 const ...原创 2018-10-31 11:33:09 · 5264 阅读 · 0 评论 -
Redux的全家桶与最佳实践
edux 的第一次代码提交是在 2015 年 5 月底(也就是一年多前的样子),那个时候 React 的最佳实践还不是明晰,作为一个 View 层,有人会用 backbone 甚至是 angular 和它搭配,也有人觉得这层 View 功能已经足够强大,简单地搭配一些 utils 就直接上。后来便有了 FLUX 的演讲,React 社区开始注意到这种新的类似函数式编程的理念,Redux 也作为 F...原创 2018-10-31 13:56:58 · 113 阅读 · 0 评论 -
Redux的中间件-Reselect(缓存)
本文是翻译Redux的一个中间件文档.Redux是React的一个数据层,React组件的state有关逻辑处理都被单独放到Redux中来进行,在state的操作流程中衍生了很多中间件,Reselect这个中间件要解决的问题是:`在组件交互操作的时候,state发生变化的时候如何减少渲染的压力.在Reselect中间中使用了缓存机制,这个机制可以在javascript的模式设计中刚看到介绍,这里...转载 2018-10-31 16:47:08 · 2121 阅读 · 0 评论 -
React性能优化总结
from:http://www.tuicool.com/articles/VNFZBbj初学者对React可能满怀期待,觉得React可能完爆其它一切框架,甚至不切实际地认为React可能连原生的渲染都能完爆——对框架的狂热确实会出现这样的不切实际的期待。让我们来看看React的官方是怎么说的。React官方文档在Advanced Performanec这一节,这样写道:One of th...转载 2018-10-30 17:42:39 · 284 阅读 · 0 评论 -
初步学习React Router 4.0
React Router 4.0 是react官方推荐的路由库。4是已经正式发布的最新版本。初始化项目启动之后: npm run eject 弹出配置文件。自定义配置webpack查看下package.json中是不是有react-router-dom,没有安装即可注意:安装最新版本的react 命令行:npm install --save react@next rea...原创 2018-10-30 18:27:39 · 191 阅读 · 0 评论 -
redux-devtools攻略
Walkthrough(攻略)原文包含代码在: https://github.com/94dreamer/Note/tree/master/redux-devtoolsBrowser Extension(浏览器扩展)如果你不想安装redux devtools集成到我们的项目代码中,我们可以使用Redux DevTools Extension扩展工具在chrome浏览或者是火狐浏览器上安...转载 2018-11-01 14:12:54 · 1394 阅读 · 0 评论 -
Redux的调试工具Redux DevTools
Redux DevTools是一款用于调试的浏览器插件,它用来时时显示当前应用的state信息,action触发记录以及state的变化,在开发过程中非要有用,目前这个插件支持chrome和FireFox浏览器,我们以chrome为列,在chrome的应用商店中下载安装Redux DevTools插件,然后在configStore.js中,使用Redux DevToold创建"加强版"的store...原创 2018-08-04 15:13:36 · 3253 阅读 · 0 评论 -
redux的bindActionCreators
bindActionCreators是Redux提供的一个工具函数,它使用store的dispatch方法把参数对象中包含的每一个action creator包裹起来,这样就不需要显示的使用dispatch方法发送action了,而是直接调用action creator,列如,不使用bindActionCreators时,有一个下面的mapDispatchToProps: co...原创 2018-08-04 12:12:54 · 662 阅读 · 0 评论 -
React:正确设计State
注:本文比较适用于有一定React+Redux项目经验的人员 当我们在使用Redux结合React使用的时候,Redux执行的过程中本质上任何一个时刻都是State的反应,State是Redux运行的枢纽,因此对于React+Redux结合运行的项目,设计好的State是非常重要的。接下来看,我们在设计state过程中常犯的两个错误: 错误一:以AP...原创 2018-07-29 13:16:36 · 1184 阅读 · 2 评论 -
React事件处理的三种方式及this问题
一,在React元素绑定事件要注意的两点 1,在React中事件的命名采用驼峰命名法,而不是原生dom中的小写,如:onclick要写成onClick,onchange要写成onChange 2,响应事件的函数要以对象的形式赋值,而不是以dom字符串的形式,如: 在dom中: <button onclick=“clickMe()”>不服点我...原创 2018-07-01 13:34:44 · 5614 阅读 · 1 评论 -
CSS如何实现内凹角效果
记得@Lea Verou的《CSS Secrets》一书和前几天@Chris Coyier刚发的帖子都介绍了CSS怎么实现元素斜切口的效果。我也尝试着借助Vue的能力,把这种效果构建成一个Vue组件。我把这种效果定义为外切口。而今天将要聊的是与其刚好相反的一个效果:CSS如何实现内凹角的效果。上图展示的效果就是接下来所要聊的内凹角的效果。也就是说,通过下文的介绍,我们可以知道这种效果是如何做的,而...转载 2018-06-26 16:14:58 · 10891 阅读 · 1 评论 -
React16新特性
React16是Facebook在2017年9月发布的React最新版本。他是基于代号为“Fiber”的新架构实现,几乎对React的底层代码进行了重写,但是原本对外的api保持不变,所以基本可以无缝的迁移到React16,但是对于React16基于以前版本的React实现了许多比较新的特性。 一,React的render方法返回的新类型:支持两种类型数组(由React元...原创 2018-07-01 16:36:13 · 2377 阅读 · 0 评论 -
在react中正确修改state
一,在react中可以通过this.state.{属性}的方式直接获取state,但是当我们修改state的时候,往往有许多的坑需要注意。以下 为三种常见的陷阱:1,不能直接修改state。 组件修改state,并不会重新触发render。列如://错误this.state.title='React';正确修改方式是使用setState();//正确this.setStat...原创 2018-07-01 19:17:54 · 30320 阅读 · 4 评论 -
React三种经典项目架构(大神路过.....)
有关于React+redux的项目架构一直存在多种声音,目前主流的主要有三种:按照类型,按照页面功能,Ducks。一,按照类型 这里的类型指的是文件在项目中充当的角色类型,比如这个文件是一个component(展示组件),container(容器组件),在redux状态管理当中有,action,reducer等,这些不同角色的文件都放在一个单独的文件夹里面,这样样式的结构也是react官方...原创 2018-07-08 21:34:31 · 28065 阅读 · 5 评论 -
React Router页面传值的三种方法及Link的小坑
一.props.params官方例子使用React router定义路由时,我们可以给<Route>指定一个path,然后指定通配符可以携带参数到指定的path: 首先定义路由到UserPage页面:import { Router,Route,hashHistory} from 'react-router';1class App extends React.Component { ...原创 2018-06-27 17:42:11 · 8344 阅读 · 1 评论 -
reactjs 复制url到剪切板 copy-to-clipboard
首先npm install copy-to-clipboard --save使用方法:package.json内"dependencies": { "copy-to-clipboard": "^3.0.5"}123控制台:npm installwebpackwebpack-dev-server使用方法://引入import copy from 'copy-to-clipboard';...原创 2018-06-27 17:44:51 · 869 阅读 · 0 评论 -
GSAP,专业的Web动画库
说到在网页里创建动画,你可能很快会想到jQuery的animate()方法,或者css3的animation和transition。现在,本文将介绍另一个web动画的可选方案,GSAP。GSAP的全名是GreenSock Animation Platform,这个名字是有些怪异(官网还在各种安利你加入它的Club),但它的确是一个从flash时代一直发展到今天的专业动画库。组成简介在官网选择Dow...转载 2018-06-27 18:01:58 · 15368 阅读 · 0 评论 -
React Native植入原生Android应用的流程解析
引言React Native是现在移动开发新的可选方案,也带来了原属于Web领域的React的优秀开发特性。另一方面,React Native的技术栈一经掌握,可以用于iOS、Android及Windows(见此)多个平台,即所说的“learn once, write anywhere”。开始使用React Native的问题如何使用React Native?参照官方指南,你会发现官方告诉你的是:...转载 2018-06-28 09:50:58 · 234 阅读 · 0 评论 -
React项目介绍及按需加载
做React需要会什么?react的功能其实很单一,主要负责渲染的功能,现有的框架,比如angular是一个大而全的框架,用了angular几乎就不需要用其他工具辅助配合,但是react不一样,他只负责ui渲染,想要做好一个项目,往往需要其他库和工具的配合,比如用redux来管理数据,react-router管理路由,react已经全面拥抱es6,所以es6也得掌握,webpack就算是不会配置也...转载 2018-07-05 14:11:13 · 3745 阅读 · 0 评论 -
React Context和高阶组件HOC用法
前言本文将通过官方实例,组合运用Context和高阶组件,并给出实例代码的方式详细介绍Context、高阶组件的概念和用法。Context在典型的React应用中,数据是通过props属性一层层的由上向下传递。但是对于应用中很多组件都需要使用的值(比如说:页面的主题,页面语言选择),如果还是通过props属性一层层的传递下来,会非常繁琐。Context通过组件树提供了一种传递数据的...原创 2018-11-07 13:36:47 · 398 阅读 · 0 评论