zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    iOS 新建xib文件时,最外层view的约束问题
    React native 无法弹出调试控件的问题
    从GitHub下载demo时遇到的依赖问题
    Mac 解决 Sourcetree 同步代码总需要密码的问题
    Mac 安装JRE 1.8
    正则表达式-- (.*?) 或 (.*+)
    字符串内有多个#号,每俩#号为一组,JavaScript 截取每组#号之间的字符
    Js/jQuery实时监听input输入框值变化
    Redis设置密码
    redis本机能访问 远程不能访问的问题
  • 原文地址:https://www.cnblogs.com/feng9exe/p/11088831.html
Copyright © 2011-2022 走看看