react 沉思录
react = Virtual DOM + component + data flow + jsx
核心是Virtual DOM结构的状态维护、渲染机制及UI系统的DOM组织功能;
基于Virtual DOM的视图构建和渲染方式。
入口为index.html;
一、虚拟DOM
基于状态管理的UI组件化技术
at its core it’s made up of functional components, with clear direction on how to manage state properly.
- Frequent DOM manipulations are expensive and performance heavy.
- Virtual DOM is a virtual representation of the real DOM.
- When state changes occur, the virtual DOM is updated and the previous and current version of virtual DOM is compared. This is called “diffing”.
- The virtual DOM then sends a batch update to the real DOM to update the UI.
- React uses virtual DOM to enhance its performance.
- It uses the observable to detect state and prop changes.
- React uses an efficient diff algorithm to compare the versions of virtual DOM.
- It then makes sure that batched updates are sent to the real DOM for repainting or re-rendering of the UI.
https://www.cnblogs.com/feng9exe/p/11084600.html
二、component
status/propts
生命周期管理;
状态管理;
渲染:
const element = <h1>Hello, world</h1>;
.(,.());
事件;
三、jsx
React发明了JSX,利用HTML语法来创建虚拟DOM。
当遇到<,JSX就当HTML解析,遇到{就当JavaScript解析。
render() {
return React.createElement(
"div",
null,
"Hello ",
this.props.name
);
}
render() {
return (
<div>
Hello {this.props.name}
</div>
);
}
四、架构模式—MVC模式
While React is the ‘V’ in the MVC structure, Flux fills in the ‘M’ and ‘C’ components.
ReactJS In the simple and popular term, React is the V (View) in MVC (Model/View/Controller).
五、数据流
- When state changes occur, the virtual DOM is updated and the previous and current version of virtual DOM is compared. This is called “diffing”.
- The virtual DOM then sends a batch update to the real DOM to update the UI.
- Last but not the least, React utilizes unidirectional data flow, ensuring a clean data flow architecture throughout your application. This focused flow allows developers to have a better control over the functions.
六、依赖库管理
package
node install x
react 沉思录的更多相关文章
- 【C++沉思录】句柄2
1.[C++沉思录]句柄1 存在问题: 句柄为了绑定到Point的对象上,必须定义一个辅助类UPoint,如果要求句柄绑定到Point的子类上,那就存在问题了.2.有没有更简单的办法呢? 句柄使用Po ...
- 【C++沉思录】句柄1
1.在[C++沉思录]代理类中,使用了代理类,存在问题: a.代理复制,每次创建一个副本,这个开销有可能很大 b.有些对象不能轻易创建副本,比如文件2.怎么解决这个问题? 使用引用计数句柄,对动态资源 ...
- 生活沉思录 via 哲理小故事(四)
1.围墙里的墓碑 第一次世界大战期间,驻守意大利某小镇的年轻军官结识了镇上的牧师.虽然军官信仰信教,而牧师是天主教牧师,但两人一见如故. 军官在一次执行任务中身负重伤,弥留之际嘱托牧师无论如何要把自己 ...
- 生活沉思录 via 哲理小故事
本文转载:http://www.cnblogs.com/willick/p/3174803.html 1.小托蒂的悲剧 意大利小男孩托蒂,有一只十分奇怪的眼睛,因为从生理上看,这是一只完全正常的眼睛, ...
- 生活沉思录 via 哲理小故事(一)
1.小托蒂的悲剧 意大利小男孩托蒂,有一只十分奇怪的眼睛,因为从生理上看,这是一只完全正常的眼睛,但却是失明的. 原来,托蒂刚出生时,这只眼睛轻度感染,曾用绷带缠了两个星期.这对常人来说几乎没有人任何 ...
- Atitit。 沉思录 与it软件开发管理中的总结 读后感
Atitit. 沉思录 与it软件开发管理中的总结 读后感 1. <沉思录>,古罗马唯一一位哲学家皇帝马可·奥勒留所著 2 2. 沉思录与it软件开发管理中的总结 2 2.1. 要有自己的 ...
- react hooks沉思录
将UI组件抽象为状态处理机.分为普通状态和副作用状态. 一.综述 useState:处理函数只改变引用的状态本身:副作用状态:会对引用状态以外的状态和变量进行修改:useReducer:用解藕化的机制 ...
- redux沉思录
要素:store.reducer.dispatch/subscribe connect:将业务逻辑剥离到容器类,数据的双向绑定: 数据.操作.UI分离.命令封装 核心思想:对共享状态的维护: 核心代码 ...
- flux沉思录:面向store和通信机制的前端框架
一.综述 Flux 被用来描述“单向”的数据流,且包含某些特殊的事件和监听器. 响应式编程是一种面向数据流和变化传播的编程范式 flux是响应式编程的一种? Flux 在本质上采用了模型-视图-控制器 ...
随机推荐
- pycharm社区办找不到View-->Tool Windows->DataBase的解决办法
File->Settings->Plugins->Database Navigator 安装
- TYPORA语法
原文链接:https://blog.csdn.net/SIMBA1949/article/details/79001226
- Java自学-类和对象 类属性
Java的类属性和对象属性 当一个属性被static修饰的时候,就叫做类属性,又叫做静态属性 当一个属性被声明成类属性,那么所有的对象,都共享一个值 与对象属性对比: 不同对象的 对象属性 的值都可能 ...
- - Gradle 翻译 Analyzer APK文件分析 MD
目录 目录 APK文件分析 使用 APK 分析器分析您的编译版本 查看文件和大小信息 查看 AndroidManifest.xml 查看 DEX 文件 过滤DEX文件树视图 加载 Proguard 映 ...
- .NET Core解析DNS域名或主机名的方法
在.NET Core中我们可以用System.Net.Dns类来解析域名或主机名的IP地址,我们新建一个.NET Core控制台项目,写入下面代码: using System; using Syste ...
- C# 创建json传输格式的http请求
public static string PostRequestTest(string content, string url, string contentType = "applicat ...
- 服务器收不到支付宝notify_url异步回调请求的问题 支付宝notify 异步通知与https的问题
需确认页面是http还是https,如果是https,那么需要安装ssl证书,证书要求有如下:要求“正规的证书机构签发,不支持自签名”. 然后赶快,按照支付宝,宝爷的要求,去自检了一下自家的证书,下面 ...
- javaScript 对象的hasOwnProperty方法打印window自定义属性
for (var name in window) { if (window.hasOwnProperty(name)) { window.console.log ( name + " : & ...
- prometheus被OOM杀死
参考https://www-01.ibm.com/support/docview.wss?uid=ibm10882172 提升内存配置 2.5版本后新增--query.max-samples 这个参数 ...
- CodeForces 536D Tavas in Kansas
洛谷题目页面传送门 & CodeForces题目页面传送门 A和B在一张无向连通图\(G=(V,E),|V|=n,|E|=m\)上玩一个游戏,节点\(i\)有一个权值\(v_i\).A.B分别 ...