前端框架react研究
摘要:
最近公司要做一个嵌套在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)更加简单。
注意点:
- 加载组件的首字母大写,比如:<HeaderComponent />
- 每一个组件的render最外层都要有一个包裹元素
- this.props不能修改,this.state可以修改
- 页面oclick事件在ios中的Safari不起效果,onClick={this.detail.bind(this, item)} 需要使用其他方式,比如jQuery的绑定事件
- string转换成html,dangerouslySetInnerHTML={{__html: ''}}
- 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 Js入门教程【精】
现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领 ...
- 2015年最热门前端框架React 入门实例教程
现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...
- 高性能前端框架React详解
前 言 React 是一个用于构建[用户界面]的 JAVASCRIPT 库. React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图). React 起源于 Facebo ...
- 前端框架React入门课程【视频】
视频教程列表: http://v1.mukewang.com/1a8228ac-5f7f-48de-b1c5-7d1b8bce9c77/L.mp4 1-1 React入门课程介绍 http://v1. ...
- vue 前端框架
什么是vue.js 1.vue是目前最火的一个前端框架,react 是最流行的前端框架(react除了开发网站,还可以开发手机APP,vue语法也是可以进行手机app开发的,需要借助于weex) 2. ...
- 如何选择前端框架:ANGULAR VS EMBER VS REACT
最近一段时间是令前端工程师们非常兴奋的时期,因为三大Web框架陆续发布新版本,让我们见识到了更强大的Web框架.Ember2.0在2个月之前已经发布,从1.0升级到2.0非常简单.几周之前React发 ...
- 【转】前端框架天下三分:Angular React 和 Vue的比较
前端框架天下三分:Angular React 和 Vue的比较 原文链接:http://blog.csdn.net/haoshidai/article/details/52346865 前端这几年的技 ...
- React 还是 Vue: 你应该选择哪一个Web前端框架?
学还是要学的,用的多了,也就有更多的认识了,开发中遇到选择的时候也就简单起来了. 本文作者也做了总结: 如果你喜欢用(或希望能够用)模板搭建应用,请使用Vue 如果你喜欢简单和“能用就行”的东西 ...
- React Native移动框架功能研究
React Native移动框架功能研究 此篇只研究React Native框架的功能. 一.React Natvie是什么 React Native是使用React(或者说JS)来开发原生APP的框 ...
随机推荐
- Linux第二次报告20135221
学习计时:共xxx小时 读书: 代码: 作业: 博客: 一.学习目标 1. 熟悉Linux系统下的开发环境 2. 熟悉vi的基本操作 3. 熟悉gcc编译器的基本原理 4. 熟练使用gcc ...
- 报这个错 unrecognized selector sent to instance
1.给一个对象赋空值: 2.调不存在的方法:3.数据类型不对.
- Linux c实现服务端与客户端聊天
主要利用socket通信实现,具体代码如下 客户端: #include <stdio.h> #include <stdlib.h> #include <string.h& ...
- Scala学习笔记(五):类和对象
对象实例的变量组成了对象的内存映射 public是Scala的默认访问级别 Scala里方法参数的一个重要特征是它们都是val,不是var Scala不能定义静态成员 单例对象(singleton o ...
- 分布式人工智能标记语言(DAIML)示例
DAIML(Distributed Artificial Intelligence Markup Language)是用于分布式人工智能系统中智能语言的标记库.DAIML主要分为Patte ...
- node设置cookie
// 获得客户端的Cookie var Cookies = {}; req.headers.cookie && req.headers.cookie.split(';' ...
- express的session函数
key:这个表示session返回来的cookie的键值, 我们整理一下哈: 这个是我们没有清缓存然后刷新了一下哈,对比的结果,发现session保存的数据中,只是expires这个改变了 { &qu ...
- 标准IDispose模式浅析
DoNet资源 众所周知,.Net内存管理分托管资源和非托管资源,把内存中的对象按照这两种资源划分,然后由GC负责回收托管资源(Managed Resource),而对于非托管资源来讲,就需要程序员手 ...
- 使用DOM动态创建标签
本文是参考<javascript Dom 编程艺术>第八章的内容所写,用到的知识点,就是关于创建平稳的web页面. 使用DOM方法: getElementById() getElement ...
- ansible 小试身手
我们安装好了ansible之后 配置了免密码登陆 现在我们可以检查一下管理主机和被管理主机的连通性 ansible all -m ping 在我们的实际生产中我们倾向于使用普通用户用sud ...