无缝切换？从Vue到React 环球热头条

来源：阿里开发者　2023-02-25 06:31:18

本文主要分析Vue和React在开发上的区别，帮助Vue开发者快速上手React，同时也适用于前端新手入门React。

作者 | 李梦雅(蜜芽)

来源 | 阿里开发者公众号

(相关资料图)

单文件组件 VS class组件 VS 函数组件

Vue: 单文件组件

React: Class组件

class Comp extends Component {  constructor(props) {    super(props);    this.state = {greeting: "hello"};  }    render() {    return (              { greeting } world          );  }}

React: 函数组件（推荐）

在Vue单文件组件和React的Class组件中，我们的元素、数据变量等必须放到固定的位置，以一种固定的格式书写，而在函数组件中书写方式变得更简单，我们可以 像写函数一样 写组件。更重要的是，这样就不用关心那些难理解的 this 了

const Comp = () =>{  const [greeting, setGreeting] = useState("hello");    return (          { greeting } world      )}

双向绑定 VS 单向数据流

在Vue中我们使用v-bind、v-modal对数据进行绑定，无论是来自用户操作导致的变更，还是在某个方法里赋值都能够 直接更新 数据，不需要手动进行update操作。

this.data.greeting = "Hello"

而在React里需要调用 set方法 更新，当React感应到set触发时会再次调用render对dom进行刷新，虽然有些麻烦但这种方式可以让数据变化更加清晰易追寻。

this.state.greeting = "Hello" // 错误写法this.setState({greeting: "Hello"}); // 正确写法✅setGreeting("Hello"); // 来自hooks的set写法 后面会介绍

React的大buff：JSX

初次接触JSX的开发者可能会感觉JSX结构混乱，因为你可以在dom元素内部直接写js逻辑，也可以在js逻辑里写dom，这就像把html和js混在一起：

import getUserType from "./getUserType"const Comp = () =>{  const [greeting, setGreeting] = useState("hello");    const Button = () =>{    const userType = getUserType()        if(userType === 0) {      return }           if(userType === 1) {      return }         return null  }    return (          { greeting } world      {Button()}      )}

虽然元素和逻辑的边界模糊了，但我们的组件会变得更加灵活，这样能够将一个组件分成不同的模块，当需要修改是时我们只需关注对应的函数，不用担心影响到其他部分，这对 复杂的页面结构 非常有用。

Hooks

是什么

上面我们在讲数据流的时候有提到，处理数据的两种方式

// 方式1this.state = {greeting: "Hello"}this.setState({greeting: "Hello"}); // 方式2const [greeting, setGreeting] = useState("hello");setGreeting("Hello");

其中第二种方式的useState就是Hooks中的一种，是比较常用的Hook，除此之外还有useEffect，useRef等，每个都有着不同的功能。

为什么用

逻辑独立

以数据更新为例，简单来讲，如果不用Hooks，每次更新数据都用 setSate ，我们的代码里就会出现很多setState调用，setState根据入参可以一次修改一个字段，也可以一次修改多个字段，想要知道某个数据在哪里被做了怎样的修改就会变的很麻烦，甚至可能不小心多写一个字段修改了不该修改的数据。而用Hooks的 useState 的话，因为它在定义时会对字段创建其专用的修改函数，所以只要有这个函数的调用，就代表这个字段被做了修改。

怎么用

常用Hooks（Hooks只能在的 函数组件 内使用）:

1.useState: 用于定义组件的 State，相当于 this.state=xxx 或者Vue里的 data(){return xxx}

const [greeting, setGreeting] = useState("hello"); // greeting 默认 hello// 点击greeting变为Hello1{greeting}

2.useEffect： 通过依赖变更触发的钩子函数，类似Vue的 watcher

// 当userId变化时调用refreshuseEffect(() =>{  refresh();}, [userId]);// 进入页面时会执行init, 退出时会执行destroyuseEffect(() =>{  init();    return () =>{     destroy()  }}, []);

3.useRef: 返回ref对象， .current 可以获取到其原生的元素本身

const el = useRef(null);// console.log(el.current.offsetHeight) 返回div的offsetHeight

状态管理

是什么？为什么用？

官方定义：“集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化”。举个例子，页面里两个组件需要展示/更新userName，如果不使用状态管理，我们可以用父子组件交互的方式把userName字段和setUserName函数作为组件参数传入两个组件中，调用setUserName即触发page更新userName：

但当业务变得越来越复杂，就会陷入透传地狱！

加入状态管理后，不在涉及组件之间的参数传递，数据管理全部放在 Store 中管理，组件直接从 Store 中读取数据，修改时调用 Store 的修改函数修改对应数据

怎么用

Vue：Vuex

在Vue中，官方脚手架自带 Vuex 为我们注入好了Store，常用的 state 负责定义数据， mutations 负责修改数据， actions 负责利用mutations做一些复杂异步操作（如接口请求）

// store.jsimport { createStore } from "vuex"const store = createStore({  state: {    count: 0  },  mutations: {    setCount (state, value) {      state.count = value    }  },  actions: {    addon ({ commit, state }) {      const count = state.count      commit("set", count+1)    }  }})

// index.jsimport App from "./vue"import { createApp } from "vue"const app = createApp(App).mount("#app");// 将 store 实例作为插件安装app.use(store)// index.vue

React：不止是Redux

React本身并不带状态管理，状态管理对于React更像是一种普通的第三方工具，工作中不同项目可能用了Redux、mobx、rematch等不同的状态管理工具，不同工具写法会有所区别，使用者要自己区分学习，除此之外一些脚手架会自带状态管理，写法会简单些，比如Rax，为方便理解接下来以Rax的写法进行说明。

点击查看原文，获取更多福利！

https://developer.aliyun.com/article/1165963?utm_content=g_1000368616

版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

关键词：变得更加更新数据

推荐DIY文章