React.js 常用技术要点
最近在公司的一个移动端WEB产品中使用了React这个框架(并不是React-Native),记录一下在开发过程中遇到的各种问题以及对应的解决方法,希望能对读者有所帮助。
React原则
React不多做介绍,就是Facebook的一个开源JS框架,专注的层面为View层,不包括数据访问层或者那种Hash路由(不过React有插件支持),与Angularjs,Emberjs等大而全的框架不同,React专注的中心是Component,即组件,React认为一切页面元素都可以抽象成组件,比如一个表单,或者表单中的某一项。
常用技术要点
props
每一个组件都有可变与不可变的属性,props就是不可变的属性,当props改变时,组件的绘制方法不会被调用。
states
states就是组件的可变属性,states的改变会触发组件的render函数,react与其他mvvm框架的最大的不同点就是,react组件可以想象成一个状态机,状态的改变会重绘UI,然后根据 dom diff 算法来绘制UI,而其他的mvvm框架则是对js对象的dirty check(Angularjs)或者defineProperty时指定的回调函数(Emberjs),因此,状态机制与dom diff的存在声称React更快。
我们在设计React组件时如何灵活的运用props与state是一个非常关键的要点。
refs
refs这个点主要用在上级组件调用下级组件的场景,这个场景非常多见。
componentDidMount
组件UI渲染完毕后调用,常用在这种业务场景:调用ajax获得数据后,渲染UI。
state的改变会触发render
正如上文中所说,React组件是一个一个状态机,state的改变会改变状态,会触发重绘,对于state的设计是对React组件设计的关键。
各种坑
触摸事件
React中的触摸事件仅用三种,touchstart, touchend, touchend,可是这种会有问题,有时候我需要滚动页面的时候,很容易触发某一个元素的touchend事件,为此笔者找了一个React第三方组件,React-tappable。
还无意中发现一个Android与iOS的不同之处
input在disable且readonly之后,onClick会在iOS上触发不起来,onTouchEnd又会在Android上把键盘弹出来,这边笔者做了个Hack,iOS下用onTouchEnd,Android下用onClick,就正常了。
高级技术要点
mixin
曾经跟一个朋友讨论,封装utils模块为纯js模块好还是React式的模块好的问题,他给我了一个概念,React mixin,本来自己在开发中确实写了很多可复用的小组件,但由于没有过多的了解React周边的相关知识,因此忽略了React mixin,笔者认为以后可以探究一下这个技术点。
React.js 常用技术要点的更多相关文章
- React之常用技术栈
· react-redux:https://www.cnblogs.com/jingxuan-li/p/12439181.html · react-router-dom:https://www.c ...
- 前端迷思与React.js
前端迷思与React.js 前端技术这几年蓬勃发展, 这是当时某几个项目需要做前端技术选型时, 相关资料整理, 部分评论引用自社区. 开始吧: 目前, Web 开发技术框架选型为两种的占 80% .这 ...
- 移动web端的react.js组件化方案
背景: 随着互联网世界的兴起,web前端开发的方式越来越多,出现了很多种场景开发的前端架构体系,也对前端的要求日益增高,早已经不是靠一个JQuery.js来做前端页面的时代了,而今移动端变化最大,近 ...
- React Native开发技术周报1
(一).资讯 1.React Native 0.21版本发布,最新版本功能特点,修复的Bug可以看一下已翻译 重要:如果升级 Android 项目到这个版本一定要读! 我们简化了 Android 应用 ...
- 谈谈 React.js 的核心入门知识
近来React.js变得越来越流行,本文就来谈一谈React.js的入门实践,通过分析一些常用的概念,以及提供一些入门 的最佳编程编程方式,仅供参考. 首先需要搞懂的是,React并不是一个框架,Re ...
- [转] Web前端开发工程师常用技术网站整理
1.常用工具相关 有道云笔记 http://note.youdao.com/signIn/index.html 36镇-最好用的共享收藏夹 http://www.36zhen.com/ 浏览器同步测试 ...
- React.js 入门与实战之开发适配PC端及移动端新闻头条平台课程上线了
原文发表于我的技术博客 我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,文章中是目前整个课程的大纲,以后此课程还会保持持续更新,此大纲文档也会保持更新, ...
- Web前端开发工程师常用技术网站整理
1.常用工具相关 有道云笔记 http://note.youdao.com/signIn/index.html 36镇-最好用的共享收藏夹 http://www.36zhen.com/ 浏览器同步测试 ...
- MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录
注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...
随机推荐
- Unity依赖注入使用
构造器注入(Constructor Injection):IoC容器会智能地选择选择和调用适合的构造函数以创建依赖的对象.如果被选择的构造函数具有相应的参数,IoC容器在调用构造函数之前会自定义创建相 ...
- 蛋疼的Fedora17
在公司给同事要安装ASM oracle 11g,说要在forder17上安装,于是乎我先在自己的虚拟机上安装了一个forder17,遇到了几个很蛋疼的问题: 1. 安装的时候没有创建普通用户 ...
- proxifier 代理bluestack
proxycap 可以很方便的代理bluestack, 但是proxycap 的破解版现在越来越不好用了,而且不小心还会中个病毒,这个时候免费的proxifier就显得更加的可爱了. 但是有个问题,就 ...
- Java Hour 66 Spring 相关
这章简单的来了解下Spring 和 Hibernate 是如何勾搭在一起的. <bean id="sessionFactory" class="org.spring ...
- bbed的使用--查看数据文件信息 & sid信息
1.得到文件的块大小和数据块个数 在Linux和Unix上,oracle提供了一个小工具dbfsize用于查看文件块大小 (可以参看[ID:360032.1]How to detect and fix ...
- 第二十一篇:SOUI中的控件注册机制
Win32编程中,用户需要一个新控件时,需要向系统注册一个新的控件类型.注册以后,调用::CreateWindow时才能根据标识控件类型的字符串创建出一个新的控件窗口对象. 为了能够从XML描述的字符 ...
- Vue入门笔记#数据绑定语法
#数据绑定语法# #文本: 数据绑定的基础表型形式,使用“Mustache”语法(双大括号)(特意查了一下Mustache同“moustache”释义为:髭:上唇的胡子,小胡子,最起码我觉得挺形象的) ...
- 为什么要使用 Node.js
这是一个移动端工程师涉足前端和后端开发的学习笔记,如有错误或理解不到位的地方,万望指正. Node.js 是什么 传统意义上的 JavaScript 运行在浏览器上,这是因为浏览器内核实际上分为两个部 ...
- CentOS7安装PHP简易步骤
安装前准备 yum update yum install -y vim yum install -y wget yum install -y bzip2 yum install -y gcc gcc+ ...
- Windows服务定时执行任务
1.创建多线程类 /// <summary> /// 多线程 /// </summary> public abstract class MuliThread<T> ...