zoukankan      html  css  js  c++  java
  • 【DAY-01】React

    React

    • 一个用于创建可复用,可聚合的web组件的js库
    • 只提供MVC中的V层

    WHY

    1. 组件化,不是写一堆HTML模板
    2. JS逻辑与HTML标签紧密相连且容易理解
    3. 单项数据流   数据一旦更新,则直接重新渲染整个APP
    4. 管理UI状态并不简单
      • 修改DOM树
      • 修改数据
      • 接收用户输入
      • 异步API数据请求

      和传统的服务器端渲染相似

    传统方式

    React的渲染方式

    浏览器请求页面

    用户输入

    服务器请求数据库

    从API获取数据

    将数据传给模板

    将数据传给顶层组件

    模板渲染页面

    React将每个组件渲染出来

      将不再有如下缺点:

    1. 双向数据绑定
    2. 数据模型的肮脏检查dirtychecking
    3. 确切的DOM操作

      好处:

    1. 每个组件是干啥的,很直观
    2. 结果可以预测
    3. 组件间的关系更清晰

      一个react组件可以理解为一个独立的函数

    1. 接受参数props
    2. 可复用
    3. 可以传递
    4. 返回结果(渲染组件)

    4.虚拟DOM树

    在每一次更新时,

    • React重建DOM树
    • 找到与上个版本的DOM的差异
    • 计算出最新的DOM更新操作
    • 从操作队列中批量的执行DOM更新操作

    可以在Node.js中运行【服务器端】

    • 服务器与客户端公用逻辑Isomorphic javascript
    • SEO友好,便于生成缓存的单页应用
    • 直接渲染特定的页面而不用渲染整个App

    JSX

    Javascript的XML的语法扩展

    采用易于理解的语法来定义DOM树

     

  • 相关阅读:
    HTML编辑器(1)
    HTML轮播(2)
    HTML轮播(1)
    MVC联想查询绑定下拉框
    Flex布局
    css垂直水平居中问题
    rem,em,px的区别
    css中的定位、清除浮动
    css3的盒模型
    HTML的语义化
  • 原文地址:https://www.cnblogs.com/codepen2010/p/6832194.html
Copyright © 2011-2022 走看看