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.
  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

 

posted @ 2019-06-26 11:20  zzfx  阅读(149)  评论(0编辑  收藏  举报