深入探讨前端框架react


Posted in Javascript onDecember 09, 2015

摘要:

      最近公司要做一个嵌套在app中的应用,考虑着用Facebook的react来开发view,所以就研究了下。下面是我在开发中遇到的坑,希望能给你帮助。

项目地址:https://github.com/baixuexiyang/react
Issue:https://github.com/baixuexiyang/react/issues

欢迎star和fork!

react优势:

 •仅仅只要表达出你的应用程序在任一个时间点应该长的样子,然后当底层的数据变了,React 会自动处理所有用户界面的更新。

•数据变化后,React 概念上与点击“刷新”按钮类似,但仅会更新变化的部分。

 •React 都是关于构建可复用的组件,使代码复用、测试和关注分离(separation of concerns)更加简单。

注意点:

 1.加载组件的首字母大写,比如:<HeaderComponent />
 2.每一个组件的render最外层都要有一个包裹元素

 3.this.props不能修改,this.state可以修改

 4.页面oclick事件在ios中的Safari不起效果,onClick={this.detail.bind(this, item)} 需要使用其他方式,比如jQuery的绑定事件

 5.string转换成html,dangerouslySetInnerHTML={{__html: ''}}

 6.getInitialState:在组件挂载之前调用一次。返回值将会作为 this.state 的初始值。

getDefaultProps:在组件类创建的时候调用一次,然后返回值被缓存下来。如果父组件没有指定 props 中的某个键,则此处返回的对象中的相应属性将会合并到 this.props (使用 in 检测属性)。

 该方法在任何实例创建之前调用,因此不能依赖于 this.props。另外,getDefaultProps() 返回的任何复杂对象将会在实例间共享,而不是每个实例拥有一份拷贝。

 组件的生命周期:

componentWillMount:

服务器端和客户端都只调用一次,在初始化渲染执行之前立刻调用。

componentDidMount:

在初始化渲染执行之后立刻调用一次,仅客户端有效(服务器端不会调用)。

componentWillReceiveProps:

在组件接收到新的 props 的时候调用。在初始化渲染的时候,该方法不会调用。

shouldComponentUpdate:

在接收到新的 props 或者 state,将要渲染之前调用。该方法在初始化渲染的时候不会调用,在使用 forceUpdate 方法的时候也不会。

如果确定新的 props 和 state 不会导致组件更新,则此处应该 返回 false。

componentWillUpdate:

在接收到新的 props 或者 state 之前立刻调用。在初始化渲染的时候该方法不会被调用。

componentDidUpdate:

在组件的更新已经同步到 DOM 中之后立刻被调用。该方法不会在初始化渲染的时候调用。

componentWillUnmount:

在组件从 DOM 中移除的时候立刻被调用。

小结:

使用react开发,所有html都写在js文件里,所以开发起来不是很顺畅。推荐一个chrome插件:React Developer Tools

对于React,有一些认识误区,在此总结一下:

React不是一个完整的MVC框架,最多可以认为是MVC中的V(View),甚至React并不非常认可MVC开发模式;
React的服务器端Render能力只能算是一个锦上添花的功能,并不是其核心出发点,事实上React官方站点几乎没有提及其在服务器端的应用;

有人拿React和Web Component相提并论,但两者并不是完全的竞争关系,你完全可以用React去开发一个真正的Web Component;

React不是一个新的模板语言,JSX只是一个表象,没有JSX的React也能工作。

以上所述是关于前端框架react相关知识的全部内容,希望大家喜欢。

Javascript 相关文章推荐
javascript向flash swf文件传递参数值注意细节
Dec 11 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
Jun 25 Javascript
Javascript获取HTML静态页面参数传递值示例
Aug 18 Javascript
用Javascript获取页面元素的具体位置
Dec 09 Javascript
通过遮罩层实现浮层DIV登录的js代码
Feb 07 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
Jan 04 Javascript
原生JS实现隐藏显示图片 JS实现点击切换图片效果
Jan 27 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
Oct 26 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
Sep 16 Javascript
Node.js实现简单管理系统
Sep 23 Javascript
VsCode里的Vue模板的实现
Aug 12 Javascript
JavaScript ES6的函数拓展
Jan 18 Javascript
JavaScript中rem布局在react中的应用
Dec 09 #Javascript
js获取鼠标位置实例详解
Dec 09 #Javascript
JavaScript常用基础知识强化学习
Dec 09 #Javascript
AngularJS实现元素显示和隐藏的几个案例
Dec 09 #Javascript
谈谈AngularJs中的隐藏和显示
Dec 09 #Javascript
jquery插件ajaxupload实现文件上传操作
Dec 09 #Javascript
js实现卡片式项目管理界面UI设计效果
Dec 08 #Javascript
You might like
PHP+Tidy-完美的XHTML纠错+过滤
2007/04/10 PHP
php 智能404跳转代码,适合换域名没改变目录的网站
2010/06/04 PHP
PHP中可以自动分割查询字符的Parse_str函数使用示例
2014/07/25 PHP
yii2.0之GridView自定义按钮和链接用法
2014/12/15 PHP
php使用GD创建保持宽高比缩略图的方法
2015/04/17 PHP
JS定时器实例
2013/04/17 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
2013/12/19 Javascript
Jquery 点击按钮自动高亮实现原理及代码
2014/04/25 Javascript
javascript中checkbox使用方法简单实例演示
2015/11/17 Javascript
AngularJs验证重复密码的方法(两种)
2016/11/25 Javascript
遍历json获得数据的几种方法小结
2017/01/21 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
2017/03/14 Javascript
ReactJS实现表单的单选多选和反选的示例
2017/10/13 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
2017/10/19 jQuery
webpack本地开发环境无法用IP访问的解决方法
2018/03/20 Javascript
详解JavaScript 事件流
2020/09/02 Javascript
原生JS运动实现轮播图
2021/01/02 Javascript
[10:18]2018DOTA2国际邀请赛寻真——找回自信的TNCPredator
2018/08/13 DOTA
详解在Python程序中解析并修改XML内容的方法
2015/11/16 Python
Python的Flask框架中配置多个子域名的方法讲解
2016/06/07 Python
对python中GUI,Label和Button的实例详解
2019/06/27 Python
简单介绍django提供的加密算法
2019/12/18 Python
Python爬虫爬取、解析数据操作示例
2020/03/27 Python
Python如何操作office实现自动化及win32com.client的运用
2020/04/01 Python
pymysql模块使用简介与示例
2020/11/17 Python
python制作微博图片爬取工具
2021/01/16 Python
美国顶尖折扣时尚购物网:Bluefly
2016/08/28 全球购物
狗狗玩具、零食和咀嚼物的月度送货服务:Super Chewer
2018/08/22 全球购物
数百万免费的图形资源:Freepik
2020/09/21 全球购物
毕业生找工作推荐信
2013/11/21 职场文书
大学生毕业的自我评价分享
2014/01/02 职场文书
《四季》教学反思
2014/04/08 职场文书
高中生综合素质自我评价
2015/03/06 职场文书
Python机器学习之KNN近邻算法
2021/05/14 Python
十大最强火系宝可梦,喷火龙上榜,第一名有双火属性
2022/03/18 日漫
GoFrame基于性能测试得知grpool使用场景
2022/06/21 Golang