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. docker compose 编排

    Compose是Docker的服务编排工具,主要用来构建基于Docker的复杂应用,Compose 通过一个配置文件来管理多个Docker容器,非常适合组合使用多个容器进行开发的场景. 说明:Comp ...

  2. VBA对象模型

    https://www.processon.com/view/link/5d974da6e4b07a0a4d4a098a

  3. linux下僵尸进程的发现与处理

    一.概述 僵尸进程是怎么产生的 当子进程退出时,父进程没有调用wait函数或者waitpid()函数等待子进程结束,又没有显式忽略SIGCHLD信号,那么它将一直保持在僵尸状态,如果这时父进程结束了, ...

  4. css元素水平垂直居中

    温习一下元素水平垂直居中的几种方法 元素有具体宽度 1.absolute+负边距 .LV_center{ border: 1px solid red; position: absolute; widt ...

  5. HDU2577 How to Type

    题目链接 一道DP问题 定义dp[i][j]为敲完第i个字母的最小花费,j=1代表Caps Lock打开,j=0代表Caps Lock关闭,则有: 如果第i个字母为大写: dp[i][1]=min(d ...

  6. IntelliJ Cannot find declaration to goto----解决方案

    系统中已经有了该类库,还是找不到类提示 close the project in intellij. close intellij. go to the project folder and dele ...

  7. 解决Ubuntu18.10 网络图标经常消失连不上网问题

    我不知道是什么原因,Ubuntu虚拟机经常会出现无法上网的问题? 此时右上角没有网络标志,Settings->NetWork也只有VPN一项,不知道咋用. 在网上终于找到了方法,亲测有效:htt ...

  8. xenserver 备份和还原

    1. 备份和还原xenserver host系统 //备份 # xe host-backup file-name=[name.xbk] -s [ip] -u [username] -pw [passw ...

  9. Servlet 入门

    静态web页面:html+css+js,页面是静态的.不变的,显示给每个用户的页面都一样. 动态web页面:php.jsp.asp,根据用户.实时数据(数据库)来动态显示页面,不同的用户,显示的页面可 ...

  10. 13 ARM指令集与Thumb指令集

    指令格式 ARM基本格式 <opcode>{<cond>}{S}{.W|.N}<Rd>,<Rn>{,<operand2>} opecode: ...