react 入门
一:virtual DOM 虚拟DOM树
在React中,render执行的结果得到的并不是真正的DOM节点,结果仅仅是轻量级的JavaScript对象,我们称之为virtual DOM。
虚拟DOM是React的一大亮点,具有batching(批处理)和高效的Diff算法。这让我们可以无需担心性能问题而”毫无顾忌”的随时“刷新”整个页面,由虚拟 DOM来确保只对界面上真正变化的部分进行实际的DOM操作。
二:组件化开发
1.自定义标签
2.高内聚的资源
3.独立的作用域
4.规范化的接口
组件化开发的特点
1.可组合
2.可重用
3.可维护
4.可测试
三:jsx 语法
允许HTML 和 javaScript 混写。
语法规则:遇到 < 括号,就用 html 语法解析,遇到 { 就用 javaScript 语法解析。
四:单项数据流
- 首先要有 action,通过定义一些 action creator 方法根据需要创建 Action 提供给 dispatcher
- View 层通过用户交互(比如 onClick)会触发 Action
- Dispatcher 会分发触发的 Action 给所有注册的 Store 的回调函数
- Store 回调函数根据接收的 Action 更新自身数据之后会触发一个 change 事件通知 View 数据更改了
- View 会监听这个 change 事件,拿到对应的新数据并调用 setState 更新组件 UI
单项数据流框架 1. Flux
网址: https://hulufei.gitbooks.io/react-tutorial/content/flux.html
2.Redux
中文文档: http://camsong.github.io/redux-in-chinese/index.html
react 入门的更多相关文章
- react入门(3)
在第一篇文章里我们介绍了jsx.组件.css写法 点击查看react入门(1) 第二篇文章里我们介绍了事件.this.props.children.props....other.map循环 点击查 ...
- react入门(1)
这篇文章也不能算教程咯,就算是自己学习整理的笔记把. 关于react一些相关的简介.优势之类的,随便百度一下一大堆,我就不多说了,可以去官网(http://reactjs.cn/)看一下. 这片主要讲 ...
- react入门(2)
接着上一次的讲,如果没有看过上一篇文章的小伙伴可以先看一下http://www.cnblogs.com/sakurayeah/p/5807821.html React事件 可以先看一下官网讲解的内容h ...
- react入门(4)
首先还是来回顾一下前三篇讲的内容 react入门(1): jsx,组件,css写法 react入门(2):事件,this.props.children,props,...other react入门(3 ...
- React 入门实例教程(转载)
本人转载自: React 入门实例教程
- React 入门实例教程
现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...
- React入门 (1)—使用指南(包括ES5和ES6对比)
前言 本篇会简明扼要的介绍一下React的使用方法.代码会用JSX+ES5和JSX+ES6两种方式实现. React简介 React来自Facebook,于2013年开源.至今不断修改完善,现在已经到 ...
- React入门简单实践
参考文献: 1.React入门示例教程——阮一峰 2.React仅仅只是你的界限 React主要的优点就是增量更新(虚拟DOM)和组件化(状态机). <!DOCTYPE html> < ...
- 2015年最热门前端框架React 入门实例教程
现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...
- React入门资源整理
另外,附上我搜集的一些比较实用的学习资料,建议先看这些撸起来,再看什么乱七八糟的awsome系列. React入门资源整理 React项目新手指南 http://www.w3ctech.com/top ...
随机推荐
- AVR开发 Arduino方法(一) 端口子系统
Arduino UNO R3使用的主处理器ATMega328P上有3个8位的输入/输出端口,它们分别是PB,PC和PD.Arduino IDE提供的Blink示例可以帮助我们了解端口的数字输出功能: ...
- ORA-01031:insufficient privileges解决方法
今天刚创建的数据库,用sys身份登录的时候提示 ORA-01031:insufficient privileges !郁闷了,肯定是先百度一波···然后设置当前用户权限.用Administator用户 ...
- unity 单指双指事件(单指点击移动,双指滑动拖放)
using System.Collections; using System.Collections.Generic; using UnityEngine; public class TouchCon ...
- ECMAScript6-let与const命令详解
前言 <ECMAScript入门>是一本开源的JavaScript语言教程,全面介绍ECMAScript6新引入的语法特性. let和const命令,是第一章开始介绍,也是比较基础的知识. ...
- vs2013下载地址以及安装方法
1.下载vs2013 http://download.microsoft.com/download/0/7/5/0755898A-ED1B-4E11-BC04-6B9B7D82B1E4/VS2013_ ...
- ThinkSNS积分商城系统功能详解!
积分商城含PC端.Android APP.iOS APP:在ThinkSNS PC端首页导航栏点击"拓展功能",然后选择"积分商城"进行体验:APP端则是在&q ...
- 移动端表层div滑动,导致底层body滑动(touchmove的阻止)
body很长,可以滑动,body头部有一个模拟下拉的选择框,下拉选择有滚动轴 我给body一个overflow:hidden和高度是没有用的.手机网站上背景还是可以滑动,然后我给body一个touch ...
- python---------函数练习题
2.写函数,,用户传入修改的文件名,与要修改的内容,执行函数,完成整个文件的批量修改操作 # 方法一 # import os # def fun(): #y为要修改的内容,z为修改的结果 # y=in ...
- Velocity.js的使用
前面的话 Velocity是一款优秀的JS动画库,完全可以作为jQuery的animate的替代品.需要动画功能时,使用Velocity是一个好选择.本文将详细介绍Velocity.js的使用 概述 ...
- 关于Filter
[1].关于Filter Filter简介: Filter翻译为中文是过滤器的意思. Filter是JavaWeb的三大web组件之一Servlet.Filter.Listener Filter的作用 ...