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. 最小生成树 --- 求最小权值、MST

    Agri-Net Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 37109   Accepted: 14982 Descri ...

  2. TP5接口开发之异常处理接管

    前几天在开发的时候用到了第三方的扩展包,使用过程中第三方扩展包抛出了异常 因为这边是接口开发,需要返回错误代码以及提示信息等,所以就需要接管异常处理. 此文章只做笔记,有不对或不详细的地方欢迎大家留言 ...

  3. markdown入门基础------程序员必备技能

    本人博客:https://blog.csdn.net/qq_39576571/article/details/97256521 ·首先:什么是markdown markdown是一种轻量级的标记语言, ...

  4. 爬虫框架之selenium

    Selenium 一.概述 Web自动化测试工具,可以运行在浏览器,根据指令操作浏览器 只是工具,必须与第三方浏览器结合使用 安装: Linux:sudo pip3 install selenium ...

  5. zabbix4.0 本地安装详解及步骤

    安装前说明下,下面安装过程中涉及selinux部分仅供参考,可能会导致启动服务时产生各种报错,作者也是在折腾了无数日夜后报错不断而放弃治疗,直接永久关闭了selinux(啊,没有selinux的日子真 ...

  6. ad域的那些事儿

    先附上参考链接,有空再来整理 基础知识:https://www.cnblogs.com/cnjavahome/p/9029665.html ad域的操作:https://www.cnblogs.com ...

  7. 解决 win10 家庭版环境下 MySQL 的ODBC驱动下载及安装

    目录 写在前面 下载安装 1.首先,我们需要去官网下载ODBC驱动. 配置 1.打开控制面板.查看方式:选择大图标. 2.选择管理工具的ODBC 数据源(64 位). 3.在驱动程序目录下.我们可以看 ...

  8. WebAPI 身份认证解决方案——Phenix.NET企业应用软件快速开发平台.使用指南.21.WebAPI服务(一)

    21   WebAPI服务 ASP.NET Web API,是微软在.NET Framework 4.5上推出的轻量级网络服务框架,虽然作为ASP.NET MVC 4的一部分,但却是一套全新的.独立的 ...

  9. C#读写设置修改调整UVC摄像头画面-光圈

    有时,我们需要在C#代码中对摄像头的光圈进行读和写,并立即生效.如何实现呢? 建立基于SharpCamera的项目 首先,请根据之前的一篇博文 点击这里 中的说明,建立基于SharpCamera的摄像 ...

  10. 43、css实现镂空半圆环

    <style> .circle { position: relative; box-sizing: border-box; } .big { width: 140px; height: 1 ...