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 在本质上采用了模型-视图-控制器 ...
随机推荐
- spring.profiles.active=@profiles.active@的含义
spring.profiles.active=@profiles.active@ ,其实是配合 maven profile进行选择不同配置文件进行启动. 当执行 mvn clean package - ...
- Akka-CQRS(13)- SSL/TLS for gRPC and HTTPS:自签名证书产生和使用
到现在,我们已经完成了POS平台和前端的网络集成.不过,还是那句话:平台系统的网络安全是至关重要的.前一篇博客里我们尝试实现了gRPC ssl/tls网络连接,但测试时用的证书如何产生始终没有搞清楚. ...
- SQL系列(三)—— 注释(comment)
SQL语句是由DBMS处理的指令.如果你希望包括不进行处理和执行的文本,该怎么办呢?为什么你想要这么做呢?原因有以下几 点. 我们这里使用的SQL语句都很短,也很简单.然而,随着你的SQL语句变长,复 ...
- Java链表操作代码
/** * */ package com.cherish.SwordRefersToOffer; /** * @author acer * */ public class test_22链表中倒数第k ...
- Asp.Net Core中使用GDI+绘图提示gdiplus库找不到的问题
参考 https://www.cnblogs.com/VirtualMJ/p/9917916.html 文章中 1 2 3 yum install -y epel-release yum mak ...
- kubernetes网络之Flannel
简介 Flannel是CoreOS团队针对Kubernetes设计的一个网络规划服务,简单来说,它的功能是让集群中的不同节点主机创建的Docker容器都具有全集群唯一的虚拟IP地址. 在默认的Dock ...
- Golang报错:Cannot convert expression of type interface{} to type []byte
在使用golang实现后端登录逻辑的时候,碰到下面的问题:Cannot convert expression of type interface{} to type []byte 首先介绍下问题出现的 ...
- java中的强引用、软引用、弱引用、虚引用
1.强引用(Strong Reference):指程序代码中普遍存在的,类似“Object obj = new Object()”这类的引用,只要对象存在强引用关联,JVM必定不会回收这个对象: 2. ...
- python 读写excel(xls格式)
import xlrd #导入模块 from xlutils.copy import copy #导入copy模块 rb = xlrd.open_workbook(r"e:\额度导入表.xl ...
- IIS配置伪静态 集成模式 样式丢失
最近将一个老网站迁移到新服务器,因为需要做伪静态配置,在网上找了一些教程跟着配置.结果却出现:按照网上教程配置完后将应用程序池模式改为经典模式,然后验证规则就匹配不了.改成集成模式验证规则能匹配但是网 ...