React & Redux 对比 Vue & Vuex 使用分享

本文旨在帮助 Vue 方向的同学了解 React 用法，所以侧重两者对比。而且是根据我的实践选取了一些我认为需要注意或重点讲解的内容，不涉及深层原理。文中没有提到基本语法和核心 API 建议阅读文档，见下文。

如果没有使用过 Vue 的同学建议直接阅读文档进行学习：
React 中文文档
Redux 英文文档
React-Redux 英文文档

希望对你有帮助，那我们开始吧

一、Vue & React 对比

Vue

template

<template>
  <p>{
   {
    greeting }} World!</p>
</template>

<script>
module.exports = {
   
  data: function() {
   
    return {
   
      greeting: "Hello"
    };
  }
};
</script>

<style scoped>
p {
   
  font-size: 2em;
  text-align: center;
}
</style>

这是一段 vue 单文件组件的代码，其中 template 模版编译的过程是：vue-template-compiler 将 template 预编译为 render functions 后注入到从 <script> 导出的组件中。

Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。
然而在一些场景中，你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数，它比模板更接近编译器。
比如使用 iView 的 Table 组件渲染按钮（从 3.2.0 版本开始支持 slot-scope 写法）：

{
   
   title: 'Action',
   key: 'action',
   width: 150,
   align: 'center',
   render: (h, params) => {
   
       return h('div', [
           h('Button', {
   
               props: {
   
                   type: 'primary',
                   size: 'small'
               },
               style: {
   
                   marginRight: '5px'
               },
               on: {
   
                   click: () => {
   
                       this.show(params.index)
                   }
               }
           }, 'View'),
           h('Button', {
   
               props: {
   
                   type: 'error',
                   size: 'small'
               },
               on: {
   
                   click: () => {
   
                       this.remove(params.index)
                   }
               }
           }, 'Delete')
       ]);
   }
}

渲染函数和JSX可以参考这两篇文章：
终于搞懂了vue 的 render 函数（一） -_-|||
终于搞懂了vue 的 render 函数（二）(๑•̀ㅂ•́)و✧

React

在 React 中，所有的组件的渲染功能都依靠 JSX。Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。

元素

元素是构成 React 应用的最小砖块。描述了你在屏幕上想看到的内容。

// React 元素
const element = <h1>Hello, world</h1>;
// React 自定义元素
const element = <Welcome name="Sara" />;

组件

从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。

React 元素可以简单理解为是用 <></> 包起来的，而组件返回的是元素。

简单来说组件返回的都是我们即将渲染在页面上的内容，我们的页面就是一个个组件组合起来的，这个概念跟 Vue 是相通的。

props 在组件内部可以直接使用，需要注意：props 是只读的，不能修改。

函数组件

function Welcome(props) {
   
  return <h1>Hello, {
   props.name}</h1>;
}

class 组件

ES6 的 class

• 使用 class 创建组件的时候需要继承 React.Component
• class 内部一定要有一个 render() 函数返回要渲染的元素

class Welcome extends React.Component {
   
  render() {
   
    return <h1>Hello, {
   this.props.name}</h1>;
  }
}

渲染组件

ReactDOM.render