vue+riot+react 试用报告

前言

本报告不是针对哪个框架，单独说哪个框架好，撕逼的出门右拐微博谢谢

最近迷上了组件化开发，感觉这是一种非常高效率的开发模式（说模式有点不对）。于是我第一时间找到了这仨库来做比较，下面请听我细细道来。

本报告拢共扯了这些蛋

测试结果

关于项目

工具

1.分别使用三个库创建一个模拟 native 的无线滚动列表
2.体验一下三个库的开发效率、文件大小、学习曲线以及最终性能

由于时间问题，这几个项目都没有使用 fekit 开发，并且都用了 ES6 的一部分功能

组件

三个项目都有基于组件化的思想，所以架构设计相同

用的 ES2015 功能

文件大小

性能分析

  1. 渲染一个富文本列表，项目数 n
var t1 = performance.now();
self.items = res;

setTimeout(() => {
  var t2 = performance.now();
  console.log("[1]渲染节点数：" + res.length + "::lastTime:" + (t2 - t1));
}, 1);
  1. 列表添加内容，项目数 n
var t3 = performance.now();
self.items = self.items.concat(res);
setTimeout(() => {
  var t4 = performance.now();
  console.log("[2]增加节点数：" + res.length + "::lastTime:" + (t4 - t3));
}, 1);
  1. 删除部分内容，项目数 n
var t5 = performance.now();
self.items = self.items.slice(0, res.length);
setTimeout(() => {
  var t6 = performance.now();
  console.log("[3]部分删除：" + res.length + "::lastTime:" + (t6 - t5));
}, 1);
  1. 列表倒置
var t7 = performance.now();
self.items = self.items.reverse();
setTimeout(() => {
  var t8 = performance.now();
  console.log("[4]数组回转：" + res.length + "::lastTime:" + (t8 - t7));
}, 1);

n===400

n===800

n===1600

n===3200

学习曲线（在组件化方面，自己体会）

riot

<parent-component class="parent">
  <child-component class="child" onclick="{click}"></child-component>
  <h1>{title}</h1>
  <script>
    this.on('mount',()=>{
        ...
    });
    this.click = e=>{
        this.update({ title: "clicked" });
    };
  </script>
  <style scoped>
    :scope {
    }
  </style>
</parent-component>

react

React.createClass({
    getInitialState(){
        return { title: "" };
    },
    click(){
        this.setState({title: "clicked"});
    },
    componentDidMount(){
        ...
    },
    render(){
        return (
        <div className="parent">
            <div className="child" onClick={this.click}></div>
            <h1>{title}</h1>
        </div>
        );
    }
})

vue

<template>
  <div class="parent">
    <child class="child" @click="click"></child>
    <h1>{{title}}</h1>
  </div>
</template>
<script>
  export default {
      components: { child },
      data() { return { title: "" } },
      ready() {
          ...
      },
      methods: {
          click() {
              this.title = "clicked";
          }
      }
  }
</script>

三个库静态页面动态渲染行为的方式

模板渲染(Vue,riot)

两者都是模板渲染，所以你的 html 如果按照它们模板语法来写，渲染起来很简单

数据元渲染(react，咦？html 不算数据元)

react 相当于把渲染的内容转成类似于 json 的数据元，到客户端渲染的时候还需要解析一遍数据元。。。 说白了，你得用 redux 或者 flux 或者 relay

rollup、postcss 还是 webpack

实际上都是些工具上的事，汗啊，还是哪天说吧

es2015 该用啥

es2015 编译主要体现在

语法糖编译

pollyfill

modules

个人感觉