ReactJs 初涉

organiclion 发布于3年前
 
ReactJs 初涉  

React 是”一个用于构建用户界面的JavaScript类库”。

起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架都不满意,所以就自己写了一套,并且在13年 开源 了。 官网 描述其出发点为:用于开发数据不断变化的大型应用程序(Building large applications with data that changes over time)。

核心概念

  • Just the view
    React仅仅是UI, 所以它可以作为一个小特征,轻易地在已有项目中使用。
    ReactJs 初涉 传统的前端MVC(模型-视图-控制器)一般是将数据作为Model层,逻辑处理作为Controller层,页面渲染作为View层。核心问题就会变成如何将来自于服务器端或者用户输入的数据,动态并且高效的反应到用户界面上。
    React可作为MVC框架中的View层,通过一个 render() 方法,接受输入的参数并返回展示的对象。以下这个例子使用了JSX,它类似于XML的语法输入的参数通过 render() 传入组件后,将存储在this.props。
    注:this.props 表示那些一旦定义,就不再改变的特性,而 this.state 是会随着用户互动而产生变化的特性。

    class Greeting extends React.Component{
      render(){//the heart of React.js
        //pass in any typeof js objects, methods...
        return<div>{this.props}</div>;
      }
    }

  • Virtual 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操作就是极大的浪费)。
    ReactJs 初涉

  • Components
    组件,即封装起来的具有独立功能的UI部件。React推荐以组件的方式去重新思考UI构成,将UI上每一个功能相对独立的模块定义成组件,然后将小的组件通过组合或者嵌套的方式构成大的组件,最终完成整体UI的构建。例如,Facebook的 instagram 整站都采用了React来开发,整个页面就是一个大的组件。
    对于React而言,完全是一个新的思路,从功能的角度出发,将UI分成不同的组件,每个组件都独立封装。
    通过这种方式,每个组件的UI和逻辑都定义在组件内部,和外部完全通过API来交互,通过组合的方式来实现复杂的功能。React认为一个组件应该具有如下特征:
    (1)可组合(Composeable):一个组件易于和其它组件一起使用,或者嵌套在另一个组件内部。如果一个组件内部创建了另一个组件,那么说父组件拥有(own)它创建的子组件,通过这个特性,一个复杂的UI可以拆分成多个简单的UI组件;
    (2)可重用(Reusable):每个组件都是具有独立功能的,它可以被使用在多个UI场景;
    (3)可维护(Maintainable):每个小的组件仅仅包含自身的逻辑,更容易被理解和维护;
    (4)可测试(Testable):因为每个组件都是独立的,那么对于各个组件分别测试显然要比对于整个UI进行测试容易的多。

  • Top down data flow
    数据绑定在小的例子里会工作的很好。然而,当你的app不断地迭代时,声明依赖会快速地引入循环。循环。循环。。。
    ReactJs 初涉 在这种情况下,你能预测一个Model发生变化时会发生什么吗?推理是非常非常困难的,因为它的执行次序可能是非常随意的。
    在React里面,数据流是一个方向的:从拥有者到子节点。数据仅向一个方向传递,可以认为它是单向数据绑定。
    然而,有很多应用需要你读取一些数据,然后传回给你的程序。会频繁地想更新某些React state。
    React也支持双向数据绑定,级隐式地强制在DOM里面的数据总是和某些React state保持一致
    可以使用提供的 ReactLink 实现双向绑定,其仅仅是一个onChange/setState()模式的简单包装和约定。它不会从根本上改变数据在React应用中如何流动。(即本质还是top-down data flow)