React.js常识
1.React的特点:
简单.声明式-自动dom操作。
React核心:组件,组件的设计目的:提高代码复用率,降低测试难度和代码复杂度。
提高代码复用率:组建将数据和逻辑进行封装,类似面向对象的类;
降低测试难度:组件高内聚低耦合,很容易对单个组件进行测试;
降低代码复杂度:直观的语法可以极大提高可读性。
2.React概述
和angluar.js一样React核心解决问题是数据绑定,开发者只要将数据绑定好,剩下的开发中只要关注业务就行了。
(1)组件化开发,使用React开发的时候,构建的任何页面都是component;
(2)jsx语法和虚拟dom都基于jsx语法进行创建组件,ReactR用变量形式自定义了一套dom模型;
(3)组件具有生命周期,开发者可以基于生命周期对组件进行管理;
(4)单向数据流
3.React创建组件
(1)下载React lib文件;
(2)导入各个文件;
(3)创建组件;
(4)渲染。
组建就是一个集合体,把html,js,css放在一起形成一个组件。
如图所示创建组件:
html:<script type="text/babel" src="demo.js"></script>
js://注意引用的外部js的type='text/babel'
4.React中引入CSS样式
(1)外部样式
(2)id法(给div添加id或className),在CSS内编写样式
(3)创建对象方法
React.js常识的更多相关文章
- MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录
注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...
- 再谈React.js实现原生js拖拽效果
前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- React.js深入学习详细解析
今天,继续深入学习react.js. 目录: 一.JSX介绍 二.React组件生命周期详解 三.属性.状态的含义和用法 四.React中事件的用法 五.组件的协同使用 六.React中的双向绑定 ...
- React.js入门必须知道的那些事
首先,React.js是facebook在2013年5月开源的一个前端框架,React不是一个MVC框架,它是构建易于可重复调用的web组件,侧重于UI, 也就是view层, React为了更高超的性 ...
- React.js 官网入门教程 分离文件 操作无法正常显示HelloWord
对着React官网的教程练习操作,在做到分离文件练习时,按照官网步骤来却怎么也无法正常显示HelloWord. 经测试,html文件中内容改为: <!DOCTYPE html><ht ...
- React.js入门笔记(再续):评论框的实现
本案例来自React.js中文官网对应内容. 一. 运行环境 <link rel="stylesheet" type="text/css" href=&q ...
- Facebook的Web开发三板斧:React.js、Relay和GraphQL
2015-02-26 孙镜涛 InfoQ Eric Florenzano最近在自己的博客上发表了一篇题为<Facebook教我们如何构建网站>的文章,他认为软件开发有些时候需要比较大的跨 ...
- 移动web端的react.js组件化方案
背景: 随着互联网世界的兴起,web前端开发的方式越来越多,出现了很多种场景开发的前端架构体系,也对前端的要求日益增高,早已经不是靠一个JQuery.js来做前端页面的时代了,而今移动端变化最大,近 ...
随机推荐
- GPU大百科全书索引(有助于理解openGL工作流程)
GPU大百科全书索引 0.GPU大百科全书 前传 看图形与装修的关系 1.GPU大百科全书 第一章:美女 方程与几何 2.GPU大百科全书 第二章 凝固生命的光栅化 3.GPU大百科全书 第三章:像素 ...
- Android 学习心得 TextView 添加垂直滚动条
XMl文件中: 添加android:scrollbars="vertical" 添加android:maxLines="10" //设置一页最多显示10行 a ...
- UITextView 开始编辑时,文字没有左上角对齐解决办法 tableview整体上移
现实情况如上所示 我出现这种情况的原因有两种: 其一:没有给textview对齐方式: 其二:没有将BOOL类型的“ automaticallyAdjustsScrollViewInsets ”属性置 ...
- Fragment配合RadioGroup实现点击切换布局
这里用了 compile 'com.jakewharton:butterknife:7.0.1' compile 'org.greenrobot:eventbus:3.0.0' MainActivit ...
- iOS 学习 - 23 加载本地 txt 文件, NSMutableParagraphStyle 段落格式,缩放动画,字体间距
思路: 1.new 一个 Empty 后缀为 .txt 文件,内容随笔拷贝一段 2.用 NSString 接收本地文件,再用一个标题拼接字符串 3.创建一个 NSMutableParagraphSty ...
- 配置git同时push到两个远端库的简单方法
最近在写一个开源的论坛系统,在发布代码时选择了github和coding这两个平台,我手懒,不想敲两次git push了,所以说突然有了一个很奇怪的需求:用一条git push同时push到两个远端代 ...
- oracle一些基本语句
--添加一个字段alter table 表名 add(列类型);--修改字段数据类型alter table 表名 modify(列类型);--删除一个字段alter table 表名 drop col ...
- android 解决ListView点击与滑动事件冲突
如果你的ListView的Item有滑动功能,但又点击Item跳转到其它activity,这样若是在Adapter里面写点击事件是会导致滑动事件获取不到焦点而失效: 解决方法:不要在adapter里面 ...
- localhost与127.0.0.1的区别
localhost与127.0.0.1的区别是什么 定义 localhost也叫local ,正确的解释是:本地服务 127.0.0.1在windows等系统的正确解释是:本机地址(本机服务器) 不同 ...
- OpenStack 企业私有云的若干需求(1):Nova 虚机支持 GPU
本系列会介绍OpenStack 企业私有云的几个需求: 自动扩展(Auto-scaling)支持 多租户和租户隔离 (multi-tenancy and tenancy isolation) 混合云( ...