深入探讨前端框架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遍历input取得input的name
Apr 27 Javascript
JavaScript中的undefined学习总结
Nov 30 Javascript
jQuery实现平滑滚动到指定锚点的方法
Mar 20 Javascript
javascript 常用验证函数总结
Jun 28 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
Jul 11 Javascript
Vue中在新窗口打开页面及Vue-router的使用
Jun 13 Javascript
Koa日志中间件封装开发详解
Mar 09 Javascript
javascript canvas API内容整理
Feb 16 Javascript
基于js判断浏览器是否支持webGL
Apr 18 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
Sep 17 Javascript
React中的Context应用场景分析
Jun 11 Javascript
二维码条形码生成的JavaScript脚本库
Jul 07 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 编写安全的代码时容易犯的错误小结
2010/05/20 PHP
set_include_path和get_include_path使用及注意事项
2013/02/02 PHP
php存储过程调用实例代码
2013/02/03 PHP
PHP在引号前面添加反斜杠(PHP去除反斜杠)
2013/09/28 PHP
header导出Excel应用示例
2014/01/24 PHP
PHP冒泡算法详解(递归实现)
2014/11/10 PHP
PHP基于文件存储实现缓存的方法
2015/07/20 PHP
JQuery 常用方法基础教程
2009/02/06 Javascript
IE event.srcElement和FF event.target 功能比较
2010/03/01 Javascript
javascript对select标签的控制(option选项/select)
2013/01/31 Javascript
jQuery bxCarousel实现图片滚动切换效果示例代码
2013/05/15 Javascript
Windows 系统下安装和部署Egret的开发环境
2014/07/31 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
2015/06/14 Javascript
jQuery多级手风琴菜单实例讲解
2015/10/22 Javascript
JavaScript简单实现弹出拖拽窗口(二)
2016/06/17 Javascript
微信小程序 MD5加密登录密码详解及实例代码
2017/01/12 Javascript
Vue中添加滚动事件设置的方法详解
2020/09/14 Javascript
python二叉树遍历的实现方法
2013/11/21 Python
Python中处理字符串之endswith()方法的使用简介
2015/05/18 Python
python实现的多线程端口扫描功能示例
2017/01/21 Python
Python lambda函数基本用法实例分析
2018/03/16 Python
Python数据类型之列表和元组的方法实例详解
2019/07/08 Python
Python简单处理坐标排序问题示例
2019/07/11 Python
Django Admin设置应用程序及模型顺序方法详解
2020/04/01 Python
python3中sys.argv的实例用法
2020/04/24 Python
Python新手如何理解循环加载模块
2020/05/29 Python
测试时代收集的软件测试面试题
2013/09/25 面试题
2013年学期结束动员演讲稿
2014/01/07 职场文书
我读书我快乐演讲稿
2014/05/07 职场文书
涉及车辆房产分割的离婚协议书范文
2014/10/12 职场文书
2014年商场工作总结
2014/11/22 职场文书
土地租赁协议书
2015/01/29 职场文书
中学后勤工作总结2015
2015/07/22 职场文书
车辆安全隐患排查制度
2015/08/05 职场文书
python爬虫selenium模块详解
2021/03/30 Python
Go语言grpc和protobuf
2022/04/13 Golang