Vue快速转React指南(三）

前置说明

已发布：

• Vue快速转React指南(一）
• Vue快速转React指南(二）

本篇要点

• React的Hooks

开始

熟悉Vue的话，组件的用途和概念大家都知道，这里主要讲react的组件和Vue的不同。 不知道组件的概念的建议去Vue官方文档复习一下。

React Hooks

• Vue组件：单文件组件（SFC）
• react组件：函数式组件

在Vue官方文档-SFC这一节专门对「单文件组件」进行了很长篇幅的介绍，简单来说就是.vue文件，将JS代码、template和CSS混合在一起。那么，template组件需要的数据就可以从当前的script里去取。

<script setup>
import { ref } from "vue";

defineProps({
  msg: {
    type: String,
    required: true
  }
});
const count = ref(0); // 定义count初始值
</script>

<template>
  <div class="greetings">
    <h1 class="green">{{ msg }}</h1>
    <h2>{{ count }}</h2>
  </div>
</template>

对于react来说，react的组件就是一个JS函数，它返回你声明的UI代码：

function App (props) {
    return <h1> Hello, {props.name} </h1>
}
export default App

函数式组件的编写规范要求是一个纯净的函数（纯函数 pure fucntion），除了纯净的输入输出没有函数副作用（side effect）。

副作用函数：指的是函数的运行会对其他地方的变量产生影响的函数。 比如你的函数修改了全局变量、修改了另一个函数也能修改的变量等行为，都称为副作用函数。

function effect(){
    document.body.innerText = 'effect';
}

上面的effect就是一个副作用函数，因为它会修改到全局都可以获取和修改的变量。

所以，对于react的函数式组件来说，要符合纯函数的标准，输入是props，函数体内只做数据处理，输出是return出去的HTML实现的UI代码。

但是很多时候，我们都需要在组件内进行一些副作用操作，比如：存储数据、改变应用全局状态等等。这个时候就需要React的Hooks来解决。

Hook的中文意思为钩子