react1
来源:互联网 发布:青岛海尔软件怎么样 编辑:程序博客网 时间:2024/06/07 08:16
1、React 是什么
一个用于创建 可复用、可聚合 Web组件的js库;
只提供了前端 MVC 框架中的 "v",一个并不是一个完整的MVC框架;
2、为什么用React
a、 组件化的,而不是写一大堆HTML模板;将JS逻辑与HTML标签紧密的连接,并且容易理解;
angular组件定义 和 React 组件定义大致相似,但template处不同:1)、angular中template 后写html标签要转换成字符串且换行处加\, 或者常将template 换成templateUrl ->指向一个一个HTML文件; 2)、 而在reactr中,则可直接把html文件写在js里面,看起来更直观;
b、 单向数据流;
1)、 angular是双向数据绑定的; 2)、而react是单向数据流,react的单向数据特性导致:数据一旦更新,就直接重新渲染整个APP;
看到 "重新渲染整个APP",我们的第一反应是这样会浪费资源,会变的很慢,其实不是的:我们在创建一个复杂的APP,要管理UI的状态其实很复杂,如果不是一次性将整个页面渲染好的话,我们要做很多操作(接收用户的输入 \ 修改数据 \ 异步API数据请求(服务器端请求json数据) \ 修改DOM树等);
react的渲染方式和传统的服务器端渲染相似:
这种渲染方式将不会再有:1)魔法般的双向数据绑定; 2)数据模型的肮脏检查(dirty checking--检查数据或对象有没有更新) 3) 确切的DOM操作(不会再有很精确的DOM操作了);
这种单向数据一次性将整个页面都渲染出来的好处:1)每个组件是做什么的,很直观; 2)结果更可预测; 3)组件之间的关系更清晰(不再会有复杂的关系,现在是将数据传给顶层组件,最后一次性渲染);
我们可以将一个React组件理解成一个独立的函数:可以接受参数(props)、可复用、可传递、可以返回一个结果(渲染组件);
c、虚拟的DOM 树
之前说过 "如果数据更新,react会将整个APP一次性渲染出来",因为有了虚拟DOM树才可以渲染的这么快;
我们用javascript虽然很快,但我们进行DOM操作的时候却运行的很慢;那react是怎么处理这个问题的:1)react会重建一个DOM树(虚拟DOM); 2)然后和上个版本的DOM进行差异的对比,找到他们的差异; 3)然后计算出如何用最小的操作区更新差异; 4)最后在操作队列里批量的执行DOM更新操作;
React也可以在Node.js中运行(服务器端): 1)可以在服务器端 和 客户端 共用一些组件的逻辑(这个概念叫做Isomorphic javascript,这样我们可以少写一些代码); 2)SEO友好,便于生成缓存的单页面应用; 3)可以直接渲染特定的页面,而不需要渲染整个APP;
3、React简单示例
1)、JSX是什么?
JSX是avaScript的XML的语法扩展,并不完全是HTML,采用了我们熟悉的 且 易于理解的语法来定义DOM树;
一个用于创建 可复用、可聚合 Web组件的js库;
只提供了前端 MVC 框架中的 "v",一个并不是一个完整的MVC框架;
2、为什么用React
a、 组件化的,而不是写一大堆HTML模板;将JS逻辑与HTML标签紧密的连接,并且容易理解;
angular组件定义 和 React 组件定义大致相似,但template处不同:1)、angular中template 后写html标签要转换成字符串且换行处加\, 或者常将template 换成templateUrl ->指向一个一个HTML文件; 2)、 而在reactr中,则可直接把html文件写在js里面,看起来更直观;
b、 单向数据流;
1)、 angular是双向数据绑定的; 2)、而react是单向数据流,react的单向数据特性导致:数据一旦更新,就直接重新渲染整个APP;
看到 "重新渲染整个APP",我们的第一反应是这样会浪费资源,会变的很慢,其实不是的:我们在创建一个复杂的APP,要管理UI的状态其实很复杂,如果不是一次性将整个页面渲染好的话,我们要做很多操作(接收用户的输入 \ 修改数据 \ 异步API数据请求(服务器端请求json数据) \ 修改DOM树等);
react的渲染方式和传统的服务器端渲染相似:
这种渲染方式将不会再有:1)
这种单向数据一次性将整个页面都渲染出来的好处:1)每个组件是做什么的,很直观; 2)结果更可预测; 3)组件之间的关系更清晰(不再会有复杂的关系,现在是将数据传给顶层组件,最后一次性渲染);
我们可以将一个React组件理解成一个独立的函数:可以接受参数(props)、可复用、可传递、可以返回一个结果(渲染组件);
c、虚拟的DOM 树
之前说过 "如果数据更新,react会将整个APP一次性渲染出来",因为有了虚拟DOM树才可以渲染的这么快;
我们用javascript虽然很快,但我们进行DOM操作的时候却运行的很慢;那react是怎么处理这个问题的:1)react会重建一个DOM树(虚拟DOM); 2)然后和上个版本的DOM进行差异的对比,找到他们的差异; 3)然后计算出如何用最小的操作区更新差异; 4)最后在操作队列里批量的执行DOM更新操作;
React也可以在Node.js中运行(服务器端): 1)可以在服务器端 和 客户端 共用一些组件的逻辑(这个概念叫做Isomorphic javascript,这样我们可以少写一些代码); 2)SEO友好,便于生成缓存的单页面应用; 3)可以直接渲染特定的页面,而不需要渲染整个APP;
3、React简单示例
1)、JSX是什么?
JSX是avaScript的XML的语法扩展,并不完全是HTML,采用了我们熟悉的 且 易于理解的语法来定义DOM树;
2)React是如何使用JSX的
ReactDOM.render( <h1>你好,中国!</h1>, document.getElementById('demo'));//如上是将h1标签插入到 id为demo的元素中
阅读全文
0 0
- react1
- React1
- react1
- React1 创建React组件、组件的属性
- Linux下定时任务浅用
- mybatis和hibernate的区别---Mybatis的学习笔记(四)
- 第四十四篇:iOS使用 runtime 与 响应式编程 KVO 原理
- 使用javascriptcore实现供h5调用的native接口
- 使用 Clipper 库的一些问题记录
- react1
- 遇到的防爬虫问题的解决方案
- 剑指offer——按之字形顺序打印二叉树
- 移动或复制虚拟机到其他真机后,Xshell CRT WinSCP 等客户端连不上虚拟机的解决办法
- hdu 3706 Second My Problem First(单调队列)
- php处理redis的例子
- Application的应用和生命周期
- Andrew Ng机器学习课程笔记--week11(图像识别&总结划重点)
- 大数阶乘的位数