CODE

你喜爱 React 还是 Vue

react-vs-vue.jpg
你更喜欢 Vue 还是 React?
为什么呢?
是因为 Vue 的模板语法的简单粗暴还是 React 的 JSX 的 HTML in JS?

React 和 Vue 是当下比较流行的前端框架,前者由 Fackbook 开发并维护,推出 Virtual DOM 的概念,和全新的语法 —— JSX(允许在 JavaScript 中书写 HTML);
而 Vue 则出自于个人开发者 Evan You,出现与 React 之后,看看它自己这么说 Comparison with Other Frameworks,与 React 不同,它使用的是更简单的模板语法,双向绑定,更平缓的学习曲线。

本文将(仅)从语法层面比对他们的语法,最后再来判断哪个更优雅,直观或者简结。

模版 VS JSX

React 和 Vue 最大的区别就是 模板语法 和 JSX 了,模板语法 使用近乎与 HTML 相同,仅仅是多了一些指令和属性,学习起来更加轻松;JSX 就不多介绍了,可以点这里,看看官方的说明。

当然 JSX 不是必须,Vue 也可以写 JSX,这个就不在本文讨论范围内了:
React Without JSX
Vue-JSX
babel-plugin-transform-vue-jsx

// JSX
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      text: "I' JSX."
    };
  }
  render() {
    return <p onClick={say}>{this.state.text}</p>;
  }
  say() {
    console.log("hello JSX !");
  }
}


// template 单文件写法
<template>
  <p @click="say">{text}</p>
</template>
<script>
export default {
  data() {
    return { text: "I'm template" };
  },
  methods: {
    say() {
      console.log("hello template !");
    }
  }
};
</script>

STATE = {} VS daat => {}

在 React 中提倡的是不可变数据(immutable),无副作用,自上而下的单向数据流(props),只有当 props / state 改变时才会触发组件的渲染(render),即 setState 进行数据更新。Vue 则利用 Object.defineProperty 实现数据的双向绑定(响应式),只要数据更新,视图就随之更新。

// React
class ....{
  ...
  state = { a: 1 }
  ...
  this.setState({a:2})
  // 如果需要依赖上一次的状态进行更新
  this.setState((prevState, props) => { a: prevState.a + 1 })
}

// Vue
...
data = () =>{
  a: 1
}
...
this.a = 2;
...

高阶组件 HOC VS Mixins

Vue 与 React 都鼓励组件化应用,即将应用分拆成一个个功能明确的模块,每个模块之间可以通过合适的方式互相联系,即代码复用。
React 中代码复用的主要方式就是使用高阶组件(Higher-Order Components),当然你也可以使用 mixins,但官方并不推荐这样做。而 Vue 中主要方式是使用 mixins,这是因为在 Vue 中实现高阶组件并不像 React 中那样简单。

在 React 早期版本(ES5),也是使用 Mixins 的方式,当开始使用 ES6 编写 React 后便 不再提倡 Mixins,继而使用 HOC 的方式。

如果你想知道更多:

例子:接收一个 Url,在每次开始的时候发送一个请求,以渲染页面。

// React HOC
function withHttpComponent(Component, url) {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        data: []
      };
    }
    componentDidMount() {
      axios(url)
        .then(data => {
          this.setState({ data });
        })
        .catch(err => {});
    }
    render() {
      return <Component data={this.state.data} {...this.props} />;
    }
  };
}
const Home = props => {
  return <div>{props.data}</div>;
};

const withHttpHome = withHttpComponent(Home, "/");

// React mixins
var withHttpMixins = {
  componentDidMount: function() {
    axios(this.state.url)
      .then(data => {
        this.setState({ data });
      })
      .catch(err => {});
  }
};

var withHttpHome = React.createClass({
  getInitialState: function() {
    return { url: "/", data: [] };
  },
  mixins: [withHttpMixins],
  render: function() {
    return <div>{props.data}</div>;
  }
});

//Vue HOC

// Vue mixins
var withHttpMixins = {
  data: () => {
    data: [];
  },
  mounted() {
    axios(this.url)
      .then(data => {
        this.data = data;
      })
      .catch(err => {});
  }
};
var Component = Vue.extend({
  data: () => {
    url: "/";
    data: [];
  },
  mixins: [withHttpMixins]
});

var withHttpHome = new Component();

插槽 VS 组合

// React 2种方法 props.children & props
class Component extends React.Component {
  render() {
    const Title = this.props.title;
    return (
      <div>
        <Title/>
        {this.props.children}
    </div>
    )
  }
}

const Title = <h1>I'm title.</h1>

class App extends React.Component {
  render() {
    return (
      <Component title={Title}>
        <p>I'm content.</p>
      </Component>
    );
  }
}


// Vue
Vue.component("my-component", {
  template: "<div><slot></slot></div>"
});

<template>
  <my-component>
    <p>I'm content.</p>
  </my-component>;
<template>

shouldComponentUpdate VS VUE

Optimization-Efforts

最后

i-love-react.jpeg

回复

This is just a placeholder img.