深入探讨前端框架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操作cookie_获取与修改代码
May 21 Javascript
模拟select的代码
Oct 19 Javascript
DOM2非标准但却支持很好的几个属性小结
Jan 21 Javascript
javaScript 页面自动加载事件详解
Feb 10 Javascript
JavaScript中数组继承的简单示例
Jul 29 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
Nov 06 Javascript
jQuery实现文档树效果
Feb 20 Javascript
web前端vue之vuex单独一文件使用方式实例详解
Jan 11 Javascript
对angularJs中自定义指令replace的属性详解
Oct 09 Javascript
vue回到顶部监听滚动事件详解
Aug 02 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
Jul 27 Javascript
vue如何使用rem适配
Feb 06 Vue.js
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
smarty模板引擎之分配数据类型
2015/03/30 PHP
Laravel重写用户登录简单示例
2016/10/08 PHP
PHP用户验证和标签推荐的简单使用
2016/10/31 PHP
PHP中的use关键字及文件的加载详解
2016/11/28 PHP
jQuery 隔行换色 支持键盘上下键,按Enter选定值
2009/08/02 Javascript
javascript 二维数组的实现与应用
2010/03/16 Javascript
jQuery技巧总结
2011/01/01 Javascript
JavaScript闭包函数访问外部变量的方法
2014/08/27 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
2014/10/29 Javascript
JS实现同时搜索百度和必应的方法
2015/01/27 Javascript
JavaScript实现随机替换图片的方法
2015/04/16 Javascript
详解Bootstrap各式各样的按钮(推荐)
2016/12/13 Javascript
一个炫酷的Bootstrap导航菜单
2016/12/28 Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
2017/07/10 Javascript
微信小程序使用modal组件弹出对话框功能示例
2017/11/29 Javascript
Angular ElementRef简介及其使用
2018/10/01 Javascript
Vue 样式绑定的实现方法
2019/01/15 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
2019/04/02 Javascript
[03:40]2014DOTA2国际邀请赛 B神专访:躲箭真的很难
2014/07/13 DOTA
wxPython中文教程入门实例
2014/06/09 Python
Python实现的大数据分析操作系统日志功能示例
2019/02/11 Python
opencv调整图像亮度对比度的示例代码
2019/09/27 Python
Python unittest单元测试框架及断言方法
2020/04/15 Python
python从PDF中提取数据的示例
2020/10/30 Python
美国首屈一指的高品质珠宝设计师和零售商:Allurez
2018/01/23 全球购物
女子锻炼服装和瑜伽服装:Splits59
2019/03/04 全球购物
澳大利亚最超值的自行车之家:Reid Cycles
2019/03/24 全球购物
业务主管岗位职责
2013/11/20 职场文书
红色故事演讲稿
2014/05/22 职场文书
党员个人批评与自我批评
2014/10/14 职场文书
公司员工管理制度
2015/08/04 职场文书
病假条格式范文
2015/08/17 职场文书
践行三严三实心得体会(2016推荐篇)
2016/01/06 职场文书
升职感谢领导的话语及升职感谢信
2019/06/24 职场文书
提升Nginx性能的一些建议
2021/03/31 Servers
如何用JavaScript实现一个数组惰性求值库
2021/05/05 Javascript