zoukankan      html  css  js  c++  java
  • 对React的理解

    随着Facebook开源了React Native for Android,React的前景似乎更加光明。它从最早的UI框架慢慢演变成了一套web应用的解决方案,并且它衍生出来的React Native更是承载着宏伟的目标:learn once, write anywhere。这对前端来说似乎是种不可抗拒的吸引力。 

    React有三个关键词:

    - Just the ui
    - virtual dom
    - data flow

    要理解React,我从它的这三个关键词入手。

    2.1 Just the ui

    React 负责UI层面的展现,尽管很多人用React作[MVC]架构中的View层,但这并不是React的本意。

    一般的情况下,我们在开发过程中,通常会使用模板或者直接使用HTML来构建UI,而HTML是静态的,使用模板在大多数情况下是可以满足需求的,但是在复杂的逻辑情境中就显得有些吃力了,过多的if else或者逻辑控制在模板里,都会让代码变得难以维护,当然这还是说整个项目中使用统一的模板的情况下。

    React换了一种思路解决问题,它把UI拆分成组件,而不是通过模板引擎和展示逻辑,使得它可以易于拓展和维护。因此它引入了JSX这种语法规则,可以让我们使用类似HTML的语法去写js的函数调用。

    2.2 virtual dom

    浏览器渲染页面的一般过程通常是这样的:

    1 加载html->生成DOM树->解析css生成Render树->生成页面

     那么React的virtual dom是怎么做的呢?

    1 生成virtual dom->diff->必要的DOM更新

    在这里面大部分的操作放在js中去完成,因为我们都知道dom操作是很昂贵的。所以在一般的情况下React的性能还是很不错的。

    2.3 data flow

    React中的数据流是沿着组件树从上到下单向流动的。

    这里的data flow指的是一种应用架构的实现方式,比如说,数据存放在哪里,在哪里触发事件,如何响应用户操作。它不是React提供的什么新功能,应该是React构建应用的实践。我们理解了之后的Flux或许就更加容易理解data flow这个概念了。

    2.4 Flux overview

    Flux是facebook配套React强推的一种应用架构思想。它利用数据的单向流动为React的可复用的视图组件提供了补充。

    与React的数据流动方式相同,在Flux架构中,数据也是单向流动的:

    简单的说,所有的数据流动都会经过Dispatcher。Action可以通过action creator产生并被提供给dispatcher,但多数情况下action是通过用户与views的交互产生。

    在View层捕获用户的交互,产生一个Action,通过触发注册在Dispatcher上面的事件回调,使得相关的Store响应Action,然后会触发到Store上面的onChange事件,进一步的更新View。

    数据流动也始终是如上图所示的单向流动的。

    实践了这个例子:[thinking in react]会对理解React的基本工作原理有很好地帮助。

  • 相关阅读:
    Kafka 探险
    Semaphore 源码分析
    ReentrantLock 与 AQS 源码分析
    synchronized 原理分析
    ConcurrentHashMap 源码分析
    LinkedHashMap 源码分析
    HashMap 源码分析
    ArrayList 源码分析
    TCP 详解
    proxifier配合ss,实现全局代理
  • 原文地址:https://www.cnblogs.com/pms01/p/7057247.html
Copyright © 2011-2022 走看看