深入探讨前端框架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 相关文章推荐
jquery属性过滤选择器使用示例
Jun 18 Javascript
利用毫秒减值计算时长的js代码
Sep 22 Javascript
innerText 使用示例
Jan 23 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
Jun 03 Javascript
JavaScript异步回调的Promise模式封装实例
Jun 07 Javascript
浅谈JavaScript中的作用域和闭包问题
Jul 07 Javascript
使用Angular.js实现简单的购物车功能
Nov 21 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
Jul 09 Javascript
BootStrap的双日历时间控件使用
Jul 25 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
Jan 08 Javascript
vue配置多代理服务接口地址操作
Sep 08 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
Oct 30 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 获取本地IP代码
2013/06/23 PHP
采用ThinkPHP中F方法实现快速缓存实例
2014/06/13 PHP
PHP实现的简单分页类及用法示例
2016/05/06 PHP
可以支持多中格式的JS键盘
2007/05/02 Javascript
ImageFlow可鼠标控制图片滚动
2008/01/30 Javascript
Jquery 基础学习笔记
2009/05/29 Javascript
Extjs 几个方法的讨论
2010/01/28 Javascript
javascript 三种编解码方式
2010/02/01 Javascript
按钮JS复制文本框和表格的代码
2011/04/01 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
2013/04/08 Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
2014/07/14 Javascript
js判断checkbox是否选中个数的方法(超简单)
2016/08/19 Javascript
详解vue项目首页加载速度优化
2017/10/18 Javascript
Vue用v-for给src属性赋值的方法
2018/03/03 Javascript
微信小程序自定义对话框弹出和隐藏动画
2018/07/19 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
2019/05/14 Javascript
layui实现数据表格点击搜索功能
2020/03/26 Javascript
封装Vue Element的table表格组件的示例详解
2020/08/19 Javascript
python实现360皮肤按钮控件示例
2014/02/21 Python
python求列表交集的方法汇总
2014/11/10 Python
举例讲解Python中装饰器的用法
2015/04/27 Python
在Linux命令行终端中使用python的简单方法(推荐)
2017/01/23 Python
利用Python写一个爬妹子的爬虫
2018/06/08 Python
在python中实现调用可执行文件.exe的3种方法
2019/07/07 Python
python 怎样将dataframe中的字符串日期转化为日期的方法
2019/09/26 Python
对python中 math模块下 atan 和 atan2的区别详解
2020/01/17 Python
vue学习笔记之动态组件和v-once指令简单示例
2020/02/29 Python
python GUI库图形界面开发之PyQt5布局控件QVBoxLayout详细使用方法与实例
2020/03/06 Python
Python正则表达式如何匹配中文
2020/05/27 Python
青春奉献演讲稿
2014/05/08 职场文书
走群众路线学习心得体会
2014/10/31 职场文书
学校勤俭节约倡议书
2015/04/29 职场文书
2015入党个人自传范文
2015/06/26 职场文书
一文搞懂如何实现Go 超时控制
2021/03/30 Python
如何用python识别滑块验证码中的缺口
2021/04/01 Python
python 爬取豆瓣网页的示例
2021/04/13 Python