react 沉思录

react = Virtual DOM + component + data flow + jsx

核心是Virtual DOM结构的状态维护、渲染机制及UI系统的DOM组织功能

?

一、虚拟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