深入探讨前端框架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脚本实现Web页面信息交互
Dec 21 Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
Jul 01 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
Mar 12 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
Dec 16 Javascript
javascript连续赋值问题
Jul 08 Javascript
浅谈AngularJs指令之scope属性详解
Oct 24 Javascript
jquery dataview数据视图插件使用方法
Dec 23 Javascript
javascript将json格式数组下载为excel表格的方法
Dec 22 Javascript
angularjs 动态从后台获取下拉框的值方法
Aug 13 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
Jan 29 Javascript
JS将时间秒转换成天小时分钟秒的字符串
Jul 10 Javascript
VUEX 数据持久化,刷新后重新获取的例子
Nov 12 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传输数据的代码
2007/11/13 PHP
PHP 批量删除 sql语句
2009/06/05 PHP
PHP+MySQL实现模糊查询员工信息功能示例
2018/06/01 PHP
php设计模式之观察者模式定义与用法经典示例
2019/09/19 PHP
iis6+javascript Add an Extension File
2007/06/13 Javascript
DIV菜单层实现代码
2010/11/19 Javascript
改进UCHOME的记录发布,增强可访问性用户体验
2011/01/17 Javascript
Javascript倒计时页面跳转实例小结
2013/09/11 Javascript
js实现幻灯片播放图片示例代码
2013/11/07 Javascript
iframe如何动态创建及释放其所占内存
2014/09/03 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
2014/10/16 Javascript
JavaScript常用小技巧小结
2014/12/29 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
2015/12/14 Javascript
详解JS几种变量交换方式以及性能分析对比
2016/11/25 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
2017/03/13 Javascript
CSS3+JavaScript实现翻页幻灯片效果
2017/06/28 Javascript
javascript代码实现简易计算器
2021/01/25 Javascript
python模拟登录百度贴吧(百度贴吧登录)实例
2013/12/18 Python
Python中的os.path路径模块中的操作方法总结
2016/07/07 Python
Python3 执行Linux Bash命令的方法
2019/07/12 Python
简单易懂Pytorch实战实例VGG深度网络
2019/08/27 Python
多个python文件调用logging模块报错误
2020/02/12 Python
PyCharm2019.3永久激活破解详细图文教程,亲测可用(不定期更新)
2020/10/29 Python
Pytorch模型迁移和迁移学习,导入部分模型参数的操作
2021/03/03 Python
5分钟弄清楚html5的drag and drop(小结)
2019/04/10 HTML / CSS
俄罗斯马克西多姆家居用品网上商店:Максидом
2020/02/06 全球购物
酒店管理专业学生求职信
2013/09/27 职场文书
证婚人搞笑证婚词
2014/01/10 职场文书
企业申诉管理制度
2014/01/30 职场文书
低碳生活倡议书
2014/04/14 职场文书
供货协议书范本
2014/04/22 职场文书
努力学习演讲稿
2014/05/10 职场文书
购房委托书
2014/10/15 职场文书
2015年爱牙日活动总结
2015/03/23 职场文书
品牌形象定位,全面分析
2019/07/23 职场文书
python 中yaml文件用法大全
2021/07/04 Python