Angular 和 React 背后的秘密(上)

这是我参与更文挑战的第 11 天，活动详情查看: 更文挑战

今天我们不会讨论 Angular 和 React 谁是老大问题，而是讨论在 React 和 Angular 框架中使用到共同点。

这些 Angular 和 React 都有共同点分别是

• Monomorphism
• Bit fields
• Bloom filters

分三次分享我们把他们一一给您解释清楚。

Monomorphism

调试代码时，偶尔会查看一下框架中实现原理，在 Angular 和 React 源码看到了他们框架技术负责人的注释。这些注释中不约而同谈到隐藏类(hidden class)，这种框架内部的数据结构在 Angular 和 React 分别叫做 Fiber node 和 View nodes。确保这些内部的数据结构共享同一个隐藏类，也就是说使属性访问成为单态的(monomorphic)。他们为什么要这么做，这么做有什么好处是今天我们要讨论的内容。

在 Angular 中 View nodes 和数据结构来表示模板。定义了呈现 DOM 所需的元数据，还指定了 DOM 的哪个部分需要更新。

同样在 React 中定义了组件，定义了模板时， React 也使用了 fibre nodes。这是新的React fibre 16 架构。

@Component({
    template:`
    <h1>{{title}} tuts </h1>
    <h2>author {{name}} </h2>
    `
})

export class AppComponent {
    title = 'optimized code in js';
    name='zidea'
}

bindings:{
    text:'optimized code in js'
}

bindings:{
    text:"zidea"
}

class App extends Component{
    state = {
        title = 'optimized code in js',
        name='zidea'
    };

    render(){
        return(
            [
                <h1>{{title}} tuts </h1>
                <h2>author {{name}} </h2>
            ]
        )
    }
}

props:{
    children:"optimized code in js"
}

props:{
    children:"zidea"
}

function updateNode(node,...){
    let value = node.property;
}

Fibre nodes 和 view nodes 分别在 Angular 和 React 都是用来表示框架中模板，都是用于介于 DOM 元素和模板组件之间。接下来看看这两种数据结构有什么共同点，他们都在框架处理更新时，会被经常使用。

如此做的原因何在，也就是为什么做的这么复杂的，答案是因为一些叫做shape(形状)或 hidden class （隐藏类）的东西。这正是 Sebastian 在注释中提到的隐藏类。每天在写 javascript 时，javascript 对象(object) 在虚拟机内部表现为 shape 对象,因此 shape 定义了用于描述对象的属性，如何分配内存(layout).例如 用于在内存中查找的 offset(偏移)值。可能你会问为什么我们需要 shape，为什么不直接将这些属性定义对象上 。其实这样做是有好处的，可以节省内存空间，我们可能有两对象(object),甚至更多，成千上万的对象。

let a  = {x:5,y:6};
let b  = {x:7,y:8};

因为这些对象都具有相同结构(布局）我们就可以把这些共性东西抽取出来用 shape 来表示。这也就是说明即使我们有很多对象，我们也只是描述一次即可。

let a  = {x:5,y:6};
let b  = {x:7,y:8};
b.w = 9

如果需要对象 b 进行扩展属性 w 赋值 9，我们就需要引入新的 shape 。我们无法将 w 引入到原有 shape，因为 a 对象还依赖于 shape 而 a 并没有新增属性。所以需要引入新的 shape 并且更新他们之间关系。

let a  = {x:5,y:6};
let b  = {x:7,y:8};
b.w = 9
b.z = 10

可以想象不断为对象添加许属性，并修改对象 shape (形状)，则可能会有一个具有数百个中间过渡的 shape(形状)。这样每次访问对象某个属性时，虚拟机都必须经历所有这些过程，以找出描述该属性的布局和内存的形状来检索该信息。所以 V8 使用的一种技术是使这个过程更快。.

每个 JavaScript 函数在内部都表示为名为 closure 的对象。这是虚拟机缓存有关函数的一些信息的地方，这些对象用于向该函数添加参数，以及其他信息。。这是虚拟机将缓存某些信息的位置。

function getX(o){
    return o.x
}

下面通过以例子来介绍其如何运行的。假设调用 getX 函数，并传入一个具有 x 属性的对象。虚拟机将计算出这个对象的 shape (形状)，虚拟机可以缓存对象的 shape (形状)，随后当访问这个对象的 x 属性，可以记录下 offset (偏移量)，当下次接受相同 shape 的对象来执行函数时，虚拟机只需比较 shape(形状)，如果匹配，就不再需要计算出对象 shape(形状)。

可以从缓存中获取 offset (偏移量)值，来解析内存中的值。还定义了函数的状态，状态可以有三种类型：单态、单态属性访问和多态。在这种情况下，是单态的，是单态的表示只具有一种形状。多态性是指一个函数被调用对象类型每一次并不相同，而 megamorphic 是指当输入不同 shape (形状)的对象作为参数时，通常操作四种类型的 shape 形状。

对象输入给一个函数，以使 state (状态)保持单态是很重要的。单态属性访问的速度可以比megamorphic 快 100 倍。

如果考虑到在每一个更新检测周期中，每秒可能发生几百次的10000 次访问，可以想象访问单态属性对速度的影响会有多大。所以要求对象使用相同的 shape (形状)，对 fibre和view nodes 使用相同的隐藏类，为了是确保属性访问是单态的。你可以有 HTML 元素，子对象，如果遵循面向对象的编程原则，会为不同的元素创建不同的类。这些框架实际上将所有内容合并为一个数据结构、一个类好处可想而知。

最后希望大家关注我们微信公众号