React & Vue

2016/8/5 posted in  React comments

前言

花了两周时间使用 React 对百一测评的后台管理系统进行了重构,效果还不错。第一版使用 Google 的 Polymer,很酷的 Shadow DOM,很酷的 Web Component 以及 Data binding System;以至于后来第一眼看到 Vue 时就觉得特别亲切,Vue 是一个更酷的框架,本身小而美,而其强大的扩展性也让它能胜任复杂的项目。React 是目前最火的前端框架,配合 React-Native 让你 Learn Once, Write Anywhere

入门

第一次打开 React 的官网:“什么鬼?”,一旦接受了 JSX 语法后,React 很简单,入门会比你想象中的要快,跟着官方文档走一遍,然后便可以开始 Coding 了,不需要学习新的模板语言,只有一些简单的概念加上原生的 JavaScript。

第一次打开 Vue 的官网: "Wo~~ Simple and beautiful.",首页的 10 Second Example 真的只要 10 秒就能看懂。官方指南 写的很好,一读就停不下来。

语法

jsx 乍一看傻傻的-_-...其实用起来还真方便,视图层与逻辑层紧密结合,阅读代码也很轻松。

Vue 的模板语言借鉴了 Web Component 规范,但又不被规范的兼容性所限制(Web Component 即使使用 polyfill 也会有兼容性问题,而 Vue 使用 vue-loader*.vue 转化成 js,可以支持 IE9以上以及其他主流浏览器)。

jsx & template

jsx 不需要模板语言,利用 js 的强大特性即可完成对 UI 的构建。
例如:

import React,{Component} from 'react'
import {render} from 'react-render
class Todo extends Component {
    constructor(props) {
        super(props)
        this.state = {
            todos: ['吃饭', '睡觉', '写代码']
        }
    }
    render() {
        return(
            <ul>
                {this.state.todos.map((todo) => <li>{todo}</li>)}
            </ul>
        )
    }
}
render(<Todo/>, '#app')

Vue 虽然有一套自己的模板语言,但使用起来简单快捷。
例如:

<template>
    <ul>
        <li v-for="todo in todos">
            {{todo}}
        </li>
    </ul>
</template>
<script>
    export default {
        data() {
            return {
                todos: ['吃饭', '睡觉', '写代码']
            }
        }
    }
</script>

css

React 写 css 的舒适度稍微差一点:要么用行内样式;要么独立一个 css 文件,在 js 中引用。或许是我还没有找到在 React 中写 css 最佳方式。
Vue 的 css 可以写在 *.vue 文件的 style 标签中,写起 css 来不要太爽,配合 Scoped 属性 可以实现组件内 css。

State & Reactive System

React 很纯粹:状态驱动、单向数据流,每一次状态(state 和 props)变更,直接触发 virtual DOMrerender,再与真实 DOM 进行 diff,最后更新必要的 DOMvirtual DOM 中的 rerender 其实是一次 dirty checking

Vue 的 Reactive System 更精细化:每个状态只关注它依赖的状态和 DOM,当依赖的状态变化时它会自动重新计算并更新 DOM,配合异步更新 DOM,迷之优雅...

生态

ReactFacebook 团队开发,其号召力可想而知,React-Native 开源第一天就获得 5000 个星。相关的开源软件数量多且质量高。

Vue 官方的配套资源是很齐全的,如 vue-router, vue-devtools, vue-cli, vue-loader ,并且!每一个官方库都有其对应的 GitBook ,简直不可思议。但:Vue 的第三方库比较少,且质量较低,从 Vue-awesome 就能看出来,但随着 Vue 越来越火,其开源定会越来越丰富。

总结

Vue 和 React 都是现阶段的 Progressive Framework,但是用好 React 需要更深厚的功力,需要不断摸索出最佳实践,而 Vue 的学习、使用、优化的曲线会更平滑。