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.
  1. 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 沉思录的更多相关文章

  1. 【C++沉思录】句柄2

    1.[C++沉思录]句柄1 存在问题: 句柄为了绑定到Point的对象上,必须定义一个辅助类UPoint,如果要求句柄绑定到Point的子类上,那就存在问题了.2.有没有更简单的办法呢? 句柄使用Po ...

  2. 【C++沉思录】句柄1

    1.在[C++沉思录]代理类中,使用了代理类,存在问题: a.代理复制,每次创建一个副本,这个开销有可能很大 b.有些对象不能轻易创建副本,比如文件2.怎么解决这个问题? 使用引用计数句柄,对动态资源 ...

  3. 生活沉思录 via 哲理小故事(四)

    1.围墙里的墓碑 第一次世界大战期间,驻守意大利某小镇的年轻军官结识了镇上的牧师.虽然军官信仰信教,而牧师是天主教牧师,但两人一见如故. 军官在一次执行任务中身负重伤,弥留之际嘱托牧师无论如何要把自己 ...

  4. 生活沉思录 via 哲理小故事

    本文转载:http://www.cnblogs.com/willick/p/3174803.html 1.小托蒂的悲剧 意大利小男孩托蒂,有一只十分奇怪的眼睛,因为从生理上看,这是一只完全正常的眼睛, ...

  5. 生活沉思录 via 哲理小故事(一)

    1.小托蒂的悲剧 意大利小男孩托蒂,有一只十分奇怪的眼睛,因为从生理上看,这是一只完全正常的眼睛,但却是失明的. 原来,托蒂刚出生时,这只眼睛轻度感染,曾用绷带缠了两个星期.这对常人来说几乎没有人任何 ...

  6. Atitit。 沉思录 与it软件开发管理中的总结 读后感

    Atitit. 沉思录 与it软件开发管理中的总结 读后感 1. <沉思录>,古罗马唯一一位哲学家皇帝马可·奥勒留所著 2 2. 沉思录与it软件开发管理中的总结 2 2.1. 要有自己的 ...

  7. react hooks沉思录

    将UI组件抽象为状态处理机.分为普通状态和副作用状态. 一.综述 useState:处理函数只改变引用的状态本身:副作用状态:会对引用状态以外的状态和变量进行修改:useReducer:用解藕化的机制 ...

  8. redux沉思录

    要素:store.reducer.dispatch/subscribe connect:将业务逻辑剥离到容器类,数据的双向绑定: 数据.操作.UI分离.命令封装 核心思想:对共享状态的维护: 核心代码 ...

  9. flux沉思录:面向store和通信机制的前端框架

    一.综述 Flux 被用来描述“单向”的数据流,且包含某些特殊的事件和监听器. 响应式编程是一种面向数据流和变化传播的编程范式 flux是响应式编程的一种? Flux 在本质上采用了模型-视图-控制器 ...

随机推荐

  1. spring.profiles.active=@profiles.active@的含义

    spring.profiles.active=@profiles.active@ ,其实是配合 maven profile进行选择不同配置文件进行启动. 当执行 mvn clean package - ...

  2. Akka-CQRS(13)- SSL/TLS for gRPC and HTTPS:自签名证书产生和使用

    到现在,我们已经完成了POS平台和前端的网络集成.不过,还是那句话:平台系统的网络安全是至关重要的.前一篇博客里我们尝试实现了gRPC ssl/tls网络连接,但测试时用的证书如何产生始终没有搞清楚. ...

  3. SQL系列(三)—— 注释(comment)

    SQL语句是由DBMS处理的指令.如果你希望包括不进行处理和执行的文本,该怎么办呢?为什么你想要这么做呢?原因有以下几 点. 我们这里使用的SQL语句都很短,也很简单.然而,随着你的SQL语句变长,复 ...

  4. Java链表操作代码

    /** * */ package com.cherish.SwordRefersToOffer; /** * @author acer * */ public class test_22链表中倒数第k ...

  5. Asp.Net Core中使用GDI+绘图提示gdiplus库找不到的问题

    参考  https://www.cnblogs.com/VirtualMJ/p/9917916.html 文章中   1 2 3 yum install -y epel-release yum mak ...

  6. kubernetes网络之Flannel

    简介 Flannel是CoreOS团队针对Kubernetes设计的一个网络规划服务,简单来说,它的功能是让集群中的不同节点主机创建的Docker容器都具有全集群唯一的虚拟IP地址. 在默认的Dock ...

  7. Golang报错:Cannot convert expression of type interface{} to type []byte

    在使用golang实现后端登录逻辑的时候,碰到下面的问题:Cannot convert expression of type interface{} to type []byte 首先介绍下问题出现的 ...

  8. java中的强引用、软引用、弱引用、虚引用

    1.强引用(Strong Reference):指程序代码中普遍存在的,类似“Object obj = new Object()”这类的引用,只要对象存在强引用关联,JVM必定不会回收这个对象: 2. ...

  9. python 读写excel(xls格式)

    import xlrd #导入模块 from xlutils.copy import copy #导入copy模块 rb = xlrd.open_workbook(r"e:\额度导入表.xl ...

  10. IIS配置伪静态 集成模式 样式丢失

    最近将一个老网站迁移到新服务器,因为需要做伪静态配置,在网上找了一些教程跟着配置.结果却出现:按照网上教程配置完后将应用程序池模式改为经典模式,然后验证规则就匹配不了.改成集成模式验证规则能匹配但是网 ...