React介绍

最新推荐文章于 2023-06-09 07:00:00 发布

行走的柯南

最新推荐文章于 2023-06-09 07:00:00 发布

阅读量303

点赞数

分类专栏： react 文章标签： React

本文链接：https://blog.csdn.net/qq_31123547/article/details/49495911

版权

react 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

React是Facebook内部的一个JavaScript类库中，可用于创建Web用户交互界面。

React是MVC中薄薄的一层V，它只关注表现层，对组件化开发有很大的裨益。

React的特点

1 virtual dom 虚拟DOM
React中的组件跟页面真实dom之间会有一层virtual dom(虚拟dom)，virtual dom是内存中的javascript对象，它具有与真实dom一致的树状结构。开发者每次试图更新view，react都会重新构建virtual dom树，然后将其与上一次virtual dom树作对比，依靠react强劲的核心算法dom diff找出真正发生变更的节点，最后映射到真实dom上，这也是react号称性能高效的秘密所在。依赖于virtual dom，对React而言，每一次界面的更新都是整体更新，而不是层叠式更新(即一个复杂的，各个UI之间可能存在互相依赖的时候，每一次独立的更新可能会引发其他UI的变化，假如我们的目的是更新C的数据，逻辑流很可能是这样的 A –>B–>C–>A–>B–>C，这种情况下中间状态的DOM操作就是极大的浪费)。
React以一个虚拟的DOM实现了一个强大的渲染系统，React对DOM的处理方式是只更新不读取。这种处理方式有效的解决了DOM改变时，JavaScript读取和更新DOM带来的性能问题。

React使用了非常高效的渲染算法，它会计算虚拟页面当前版本和新版本之间的差异，基于这些差异对DOM进行最小化重绘。

最小化重绘避免了不必要的DOM更新，还简化了应用的维护成本。当用户页面的状态改变时，我们只需要通知React状态改变，React就会自动处理这些改变并重新绘制页面。

2 每个组件都是状态机
react认为组件的数据模型是不可变的，组件的属性不应该被修改。组件关注的只应该是状态，不同的状态呈现不同的表现形式。每个状态下的组件都是一个virtual dom对象，这样react就能直接通过等号对比对象地址判断组件是否被修改从而是否需要更新dom，这也是其能提高性能的原因之一(空间换时间)。

React 生命周期

React中一个组件就是一个状态机，在组件的生命周期中，随着组件props或state的改变，其DOM表现形式也会有所变化。React组件的生命周期分为：创建期、存在期、销毁&清理期

var App = React.createClass({
  displayName: 'App',
  componentWillMount: function(){
    // 初始化期，组件加载前调用
  },
  componentWillUpdate: function(){
    // 存在期，组件状态改变后重新渲染前调用
  },
  render: function () {
    // 初始化期或存在期调用
    return (
      <h1>itbilu.com</h1>
    )
  },
  componentWillUnmount: function (){
    // 销毁&清理期调用
  }
});