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的元素中