引言
亢龙有悔(乾卦上九)《彖》曰:“‘亢龙,有悔’,盈不可久也。”
- 丐帮绝技之一,威力寻常。快速出招攻击单个目标,可造成大量伤害。亢龙有悔虽然是一个瞬发技能,但却会做出释放技能的引导作用,耗费一定的时间。
- 我们初步认识React时,就像学习第一式一下,做到瞬发致人,因人、因地、因景,绝不可拘泥于此,学好第一式之后,接下来便可亢龙,持久。
1-React的基本认识
1.是Facebook开源的一个js库
2. 一个用来动态构建用户界面的js库
3. React的特点
- Declarative(声明式编码)
- Component-Based(组件化编码)
- Learn Once, Write Anywhere(支持客户端与服务器渲染)
- 高效
- 单向数据流
- React高效的原因
- 虚拟(virtual)DOM, 不总是直接操作DOM(批量更新, 减少更新的次数)
- 高效的DOM Diff算法, 最小化页面重绘(减小页面更新的区域)
2-为什么要学习React
- 看到网上有好多的人说React比Vue难说,学好了Vue不用学习React了,其实,关于前端框架来说,当然是在这个竞争日益激烈的社会上,多一门手艺,就多一门混迹江湖,仗剑天涯的保证对吧。
- 其实简单的说就是赚钱,学好了React可以多赚钱,简单粗暴
- 那么到底什么React呢,上面的基本认识已经说了,其实React本质上只关心两件事:
- 更新DOM
- 响应事件
- React自身是不处理Ajax、路由和数据存储,也不规定数据管理的方式,它既不是MVC框架,也不是MVVM框架,如果你非要问它是什么,它真的就是那种…那种少见的那种,它很想MVC里的V,但是又不全是,它的精简直接允许你可以集成到各种各样的系统中,总之,它真的很好用。
- 状态数据每次改变时,需要重新渲染整个页面,这样就会导致页面加载非常慢,这个其实就是DOM的读取和更新的性能的问题,但是React使用虚拟DOM,实现了一个独立强大的渲染系统,这就导致了React在对于DOM的操作上只更新不读取。
React工作状态:
- React以渲染函数为基础。这些函数读入当前的状态,将其转换为目标页面上的一个虚拟表现。只要React被告知状态有变化,他就会重新运行这些函数,计算出页面的一个新的虚拟表现,接着自动把结果转换成必要的DOM更新来反映新的表现。
- 这种方式看上去应该比通常的JavaScript方案——按需要更新每一个元素——要慢,但是React确实是这么做的:它使用了非常高效的算法,计算出虚拟页面当前版本和新版间的差异,基于这些差异对DOM进行必要的最少更新。React赢就赢在了最小化了重绘,并且避免了不必要的DOM操作,这两点都是公认的性能瓶颈。
3-React的基本使用
- 导入相关js库文件(react.js, react-dom.js, babel.min.js)
- 编码:
<div id="container"></div> <script type="text/babel"> var aa = 123# # var bb = 'test' ReactDOM.render(<h1 id={bb}>{aa}</h1>, containerDOM) </script>
4-JSX的理解和使用
- 理解
- 全称: JavaScript XML
- react定义的一种类似于XML的JS扩展语法: XML+JS
- 作用: 用来创建react虚拟DOM(元素)对象
- 编码相关
- js中直接可以套标签, 但标签要套js需要放在{}中
- 在解析显示js数组时, 会自动遍历显示
- 把数据的数组转换为标签的数组:
var liArr = dataArr.map(function(item, index){ return <li key={index}>{item}</li> })
- 注意:
- 标签必须有结束
- 标签的class属性必须改为className属性
- 标签的style属性值必须为: {{color:‘red’, width:12}}
5-几个重要概念理解
模块与组件
- 模块:
- 理解: 向外提供特定功能的js程序, 一般就是一个js文件
- 为什么: js代码更多更复杂
- 作用: 复用js, 简化js的编写, 提高js运行效率
- 组件:
- 理解: 用来实现特定界面功能效果的代码集合(html/css/js/img)
- 为什么: 一个界面的功能太复杂了
- 作用: 复用编码, 简化项目界面编码, 提高运行效率
模块化与组件化
- 模块化:
当应用的js都以模块来编写的, 这个应用就是一个模块化的应用 - 组件化:
当应用是以多组件的方式实现功能, 这上应用就是一个组件化的应用
总结
要么庸俗,要么孤独——叔本华
好好学React、多赚钱…(未完待续)