对比 React Hooks 和 Vue Composition API

清疚 2022-11-29 03:10 189阅读 0赞

*  场景
 *  Hook 的时代意义
 *  React Hooks
 *  Vue Composition API
 *  `React Hooks` vs `Vue Composition API`
 *  总结

## 场景 ##

先理解什么是hook，拿react的介绍来看，它的定义是：

> 它可以让你在不编写 class 的情况下，让你在函数组件里“钩入” React state 及生命周期等特性的函数

对于 Vue 提出的新的书写 Vue 组件的 API：Composition API RFC，作用也是类似，所以我们也可以像react一样叫做 vue hooks

*  该 API 受到 React Hooks 的启发
 *  但有一些有趣的差异，规避了一些react的问题

## hook的时代意义 ##

框架是服务于业务的，业务中很难避免的一个问题就是 -- 逻辑复用，同样的功能，同样的组件，在不一样的场合下，我们有时候不得不去写2+次，为了避免耦合，后来各大框架纷纷想出了一些办法，比如 minix, render props, 高阶组件等实现逻辑上的复用，但是都有一些额外的问题

*  minix 与组件之间存在隐式依赖，可能产生冲突。倾向于增加更多状态，降低了应用的可预测性
 *  高阶组件 多层包裹嵌套组件，增加了复杂度和理解成本，对于外层是黑盒
 *  Render Props 使用繁琐，不好维护, 代码体积过大，同样容易嵌套过深
 *  ...

hook的出现是划时代的，通过function抽离的方式，实现了复杂逻辑的内部封装：

*  逻辑代码的复用
 *  减小了代码体积
 *  没有this的烦恼

## React Hooks ##

React Hooks 允许你 "勾入" 诸如组件状态和副作用处理等 React 功能中。Hooks 只能用在函数组件中，并允许我们在不需要创建类的情况下将状态、副作用处理和更多东西带入组件中。

React 核心团队奉上的采纳策略是不反对类组件，所以你可以升级 React 版本、在新组件中开始尝试 Hooks，并保持既有组件不做任何更改

例子：

import React, { useState, useEffect } from "react";
    
    
    const NoteForm = ({ onNoteSent }) => {
      const [currentNote, setCurrentNote] = useState("");
      useEffect(() => {
        console.log(`Current note: ${currentNote}`);
      });
      return (
        <form
          onSubmit={e => {
            onNoteSent(currentNote);
            setCurrentNote("");
            e.preventDefault();
          }}
        >
          <label>
            <span>Note: </span>
            <input
              value={currentNote}
              onChange={e => {
                const val = e.target.value && e.target.value.toUpperCase()[0];
                const validNotes = ["A", "B", "C", "D", "E", "F", "G"];
                setCurrentNote(validNotes.includes(val) ? val : "");
              }}
            />
          </label>
          <button type="submit">Send</button>
        </form>
      );
    };

*  useState 和 useEffect 是 React Hooks 中的一些例子，使得函数组件中也能增加状态和运行副作用
 *  还有更多其他 hooks， 甚至能自定义一个，hooks 打开了代码复用性和扩展性的新大门

### Vue Composition API ###

Vue Composition API 围绕一个新的组件选项 setup 而创建。`setup()` 为 Vue 组件提供了状态、计算值、watcher 和生命周期钩子

> API 并没有让原来的 API（现在被称作 "Options-based API"）消失。允许开发者 结合使用新旧两种 APIs

> 可以在 Vue 2.x 中通过 `@vue/composition-api` 插件尝试新 API

例子：

<template>
      <form @submit="handleSubmit">
        <label>
          <span>Note:</span>
          <input v-model="currentNote" @input="handleNoteInput">
        </label>
        <button type="submit">Send</button>
      </form>
    </template>
    
    
    <script>
    import { ref, watch } from "vue";
    export default {
      props: ["divRef"],
      setup(props, context) {
        const currentNote = ref("");
        const handleNoteInput = e => {
          const val = e.target.value && e.target.value.toUpperCase()[0];
          const validNotes = ["A", "B", "C", "D", "E", "F", "G"];
          currentNote.value = validNotes.includes(val) ? val : "";
        };
        const handleSubmit = e => {
          context.emit("note-sent", currentNote.value);
          currentNote.value = "";
          e.preventDefault();
        };
    
    
        return {
          currentNote,
          handleNoteInput,
          handleSubmit,
        };
      }
    };
    </script>

## `React Hooks` vs `Vue Composition API` ##

### 原理 ###

React hook 底层是基于链表实现，调用的条件是每次组件被render的时候都会顺序执行所有的hooks，所以下面的代码会报错

function App(){
      const [name, setName] = useState('demo');
      if(condition){
        const [val, setVal] = useState('');    
      }
    }

因为底层是链表，每一个hook的next是指向下一个hook的，if会导致顺序不正确，从而导致报错，所以react是不允许这样使用hook的。

vue hook 只会被注册调用一次，vue 能避开这些麻烦的问题，原因在于它对数据的响应是基于proxy的，对数据直接代理观察。这种场景下，只要任何一个更改data的地方，相关的function或者template都会被重新计算，因此避开了react可能遇到的性能上的问题

> react数据更改的时候，会导致重新render，重新render又会重新把hooks重新注册一次，所以react的上手难度更高一些

当然react对这些都有自己的解决方案，比如useCallback，useMemo等hook的作用，这些官网都有介绍

### 代码的执行 ###

> Vue 中，“钩子”就是一个生命周期方法

*  `Vue Composition API` 的 `setup()` 晚于 beforeCreate 钩子，早于 created 钩子被调用
 *  React hooks 会在组件每次渲染时候运行，而 Vue setup() 只在组件创建时运行一次

由于 React hooks 会多次运行，所以 render 方法必须遵守某些规则，比如:

> 不要在循环内部、条件语句中或嵌套函数里调用 Hooks

// React 文档中的示例代码：
    function Form() {
      // 1. Use the name state variable
      const [name, setName] = useState('Mary');
    
    
      // 2. Use an effect for persisting the form
      if (name !== '') {
        useEffect(function persistForm() {
          localStorage.setItem('formData', name);
        });
      }
      // 3. Use the surname state variable
      const [surname, setSurname] = useState('Poppins');
    
    
      // 4. Use an effect for updating the title
      useEffect(function updateTitle() {
        document.title = `${name} ${surname}`;
      });
      // ...
    }

如果想要在 name 为空时也运行对应的副作用, 可以简单的将条件判断语句移入 useEffect 回调内部：

useEffect(function persistForm() {
      if (name !== '') {
        localStorage.setItem('formData', name);
      }
    });

对于以上的实现，Vue 写法如下：

export default {
      setup() {
        // 1. Use the name state variable
        const name = ref("Mary");
        // 2. Use a watcher for persisting the form
        if(name.value !== '') {
          watch(function persistForm() => {
            localStorage.setItem('formData', name.value);
          });
        }
       // 3. Use the surname state variable
       const surname = ref("Poppins");
       // 4. Use a watcher for updating the title
       watch(function updateTitle() {
         document.title = `${name.value} ${surname.value}`;
       });
      }
    }

Vue 中 setup() 只会运行一次，可以将 Composition API 中不同的函数 (reactive、ref、computed、watch、生命周期钩子等) 作为循环或条件语句的一部分

但 if 语句 和 react hooks 一样只运行一次，所以它在 name 改变时也无法作出反应，除非我们将其包含在 watch 回调的内部

watch(function persistForm() => {
      if(name.value !== '') {
        localStorage.setItem('formData', name.value);
      }
    });

### 声明状态(Declaring state) ###

##### react #####

`useState` 是 React Hooks 声明状态的主要途径

*  可以向调用中传入一个初始值作为参数
 *  如果初始值的计算代价比较昂贵，也可以将其表达为一个函数，就只会在初次渲染时才会被执行

> useState() 返回一个数组，第一项是 state，第二项是一个 setter 函数

const [name, setName] = useState("Mary");
    const [age, setAge] = useState(25);
    console.log(`${name} is ${age} years old.`);

`useReducer` 是个有用的替代选择，其常见形式是接受一个 Redux 样式的 reducer 函数和一个初始状态：

> useReducer 还有一种 延迟初始化 的形式，传入一个 init 函数作为第三个参数

##### Vue #####

Vue 使用两个主要的函数来声明状态：ref 和 reactive。

`ref()` 返回一个反应式对象，其内部值可通过其 value 属性被访问到。可以将其用于基本类型，也可以用于对象

const name = ref("Mary");
    const age = ref(25);
    watch(() => {
      console.log(`${name.value} is ${age.value} years old.`);
    });

`reactive()` 只将一个对象作为其输入并返回一个对其的反应式代理

const state = reactive({
      name: "Mary",
      age: 25,
    });
    watch(() => {
      console.log(`${state.name} is ${state.age} years old.`);
    });

**注意**：

*  使用 ref 时需要 用 value 属性访问其包含的值（除非在 template 中，Vue 允许你省略它）
 *  用 reactive 时，要注意如果使用了对象解构（destructure），会失去其反应性。所以需要定义一个指向对象的引用，并通过其访问状态属性。

总结使用这两个函数的处理方式：

*  像在正常的 JavaScript 中声明基本类型变量和对象变量那样去使用 ref 和 reactive 即可
 *  只要用到 reactive 的时候，要记住从 composition 函数中返回反应式对象时得使用 toRefs()。这样做减少了过多使用 ref 时的开销

// toRefs() 则将反应式对象转换为普通对象，该对象上的所有属性都自动转换为 ref
    function useFeatureX() {
      const state = reactive({
        foo: 1,
        bar: 2
      })
     
      return toRefs(state)
    }
     
    const {foo, bar} = useFeatureX();

### 如何跟踪依赖(How to track dependencies) ###

> React 中的 useEffect hook 允许在每次渲染之后运行某些副作用（如请求数据或使用 storage 等 Web APIs），并在下次执行回调之前或当组件卸载时运行一些清理工作

默认情况下，所有用 useEffect 注册的函数都会在每次渲染之后运行，但可以定义真实依赖的状态和属性，以使 React 在相关依赖没有改变的情况下（如由 state 中的其他部分引起的渲染）跳过某些 useEffect hook 执行

// 传递一个依赖项的数组作为 useEffect hook 的第二个参数，只有当 name 改变时才会更新 localStorage
    function Form() {
      const [name, setName] = useState('Mary');
      const [surname, setSurname] = useState('Poppins');
      useEffect(function persistForm() {
          localStorage.setItem('formData', name);
      }, [name]);
    
    
      // ...
    }

显然，使用 React Hooks 时忘记在依赖项数组中详尽地声明所有依赖项很容易发生，会导致 useEffect 回调 "以依赖和引用了上一次渲染的陈旧数据而非最新数据" 从而无法被更新而告终

解决方案：

*  `eslint-plugin-react-hooks` 包含了一条 lint 提示关于丢失依赖项的规则
 *  `useCallback 和 useMemo` 也使用依赖项数组参数，以分别决定其是否应该返回缓存过的（ memoized）与上一次执行相同的版本的回调或值。

在 Vue Composition API 的情况下，可以使用 watch() 执行副作用以响应状态或属性的改变。依赖会被自动跟踪，注册过的函数也会在依赖改变时被反应性的调用

export default {
      setup() {
        const name = ref("Mary");
        const lastName = ref("Poppins");
        watch(function persistForm() => {
          localStorage.setItem('formData', name.value);
        });
      }
    }

### 访问组件生命周期(Access to the lifecycle of the component) ###

Hooks 在处理 React 组件的生命周期、副作用和状态管理时表现出了心理模式上的完全转变。React 文档中也指出：

> 如果你熟悉 React 类生命周期方法，那么可以将 useEffect Hook 视为 componentDidMount、componentDidUpdate 及 componentWillUnmount 的合集

useEffect(() => {
      console.log("This will only run after initial render.");
      return () => { console.log("This will only run when component will unmount."); };
    }, []);

强调的是，使用 React Hooks 时停止从生命周期方法的角度思考，而是考虑副作用依赖什么状态，才更符合习惯

`Vue Component API` 通过 `onMounted、onUpdated 和 onBeforeUnmount`：

setup() {
      onMounted(() => {
        console.log(`This will only run after initial render.`); 
      });
      onBeforeUnmount(() => {
        console.log(`This will only run when component will unmount.`);
      });
    }

故在 Vue 的情况下的心理模式转变更多在停止通过组件选项（data、computed, watch、methods、生命周期钩子等）管理代码，要转向用不同函数处理对应的特性

### 自定义代码(Custom code) ###

> React 团队聚焦于 Hooks 上的原因之一，Custom Hooks 是可以替代之前社区中采纳的诸如 Higher-Order Components 或 Render Props 等提供给开发者编写可复用代码的，一种更优秀的方式

Custom Hooks 就是普通的 JavaScript 函数，在其内部利用了 React Hooks。它遵守的一个约定是其命名应该以 use 开头，以明示这是被用作一个 hook 的。

// custom hook - 用于当 value 改变时向控制台打印日志
    export function useDebugState(label, initialValue) {
      const [value, setValue] = useState(initialValue);
      useEffect(() => {
        console.log(`${label}: `, value);
      }, [label, value]);
      return [value, setValue];
    }
    
    
    // 调用 
    const [name, setName] = useDebugState("Name", "Mary");

Vue 中，组合式函数（Composition Functions）与 Hooks 在逻辑提取和重用的目标上是一致的在 Vue 中实现一个类似的 useDebugState 组合式函数

export function useDebugState(label, initialValue) {
      const state = ref(initialValue);
      watch(() => {
        console.log(`${label}: `, state.value);
      });
      return state;
    }
    
    
    // elsewhere:
    const name = useDebugState("Name", "Mary");

> 注意：根据约定，组合式函数也像 React Hooks 一样使用 use 作为前缀以明示作用，并且表面该函数用于 setup() 中

### Refs ###

React 的 useRef 和 Vue 的 ref 都允许你引用一个子组件 或 要附加到的 DOM 元素。

React：

const MyComponent = () => {
      const divRef = useRef(null);
      useEffect(() => {
        console.log("div: ", divRef.current)
      }, [divRef]);
    
    
      return (
        <div ref={divRef}>
          <p>My div</p>
        </div>
      )
    }

Vue:

export default {
      setup() {
        const divRef = ref(null);
        onMounted(() => {
          console.log("div: ", divRef.value);
        });
    
    
        return () => (
          <div ref={divRef}>
            <p>My div</p>
          </div>
        )
      }
    }

### 附加的函数(Additional functions) ###

React Hooks 在每次渲染时都会运行，没有 一个等价于 Vue 中 computed 函数的方法。所以你可以自由地声明一个变量，其值基于状态或属性，并将指向每次渲染后的最新值：

const [name, setName] = useState("Mary");
    const [age, setAge] = useState(25);
    const description = `${name} is ${age} years old`;

Vue 中，setup() 只运行一次。因此需要定义计算属性，其应该观察某些状态更改并作出相应的更新：

const name = ref("Mary");
    const age = ref(25);
    const description = computed(() => `${name.value} is ${age.value} years old`);

计算一个值开销比较昂贵。你不会想在组件每次渲染时都计算它。React 包含了针对这点的 `useMemo hook`：

**React 建议你使用 useMemo 作为一个性能优化手段, 而非一个任何一个依赖项改变之前的缓存值**

> React advice you to use useMemo as a performance optimization and not as a guarantee that the value will remain memoized

Vue 的 computed 执行自动的依赖追踪，所以它不需要一个依赖项数组

### Context 和 provide/inject ###

React 中的 useContext hook，可以作为一种读取特定上下文当前值的新方式。返回的值通常由最靠近的一层 `<MyContext.Provider>` 祖先树的 value 属性确定

// context object
    const ThemeContext = React.createContext('light');
    
    
    // provider
    <ThemeContext.Provider value="dark">
    
    
    // consumer
    const theme = useContext(ThemeContext);

Vue 中类似的 API 叫 `provide/inject`。在 Vue 2.x 中作为组件选项存在，在 Composition API 中增加了一对用在 setup() 中的 `provide 和 inject` 函数：

// key to provide
    const ThemeSymbol = Symbol();
    
    
    // provider
    provide(ThemeSymbol, ref("dark"));
    
    
    // consumer
    const value = inject(ThemeSymbol);

> 如果你想保持反应性，必须明确提供一个 ref/reactive 作为值

### 在渲染上下文中暴露值(Exposing values to render context) ###

**在 React 的情况下**

*  所有 hooks 代码都在组件中定义
 *  且你将在同一个函数中返回要渲染的 React 元素

所以你对作用域中的任何值拥有完全访问能力，就像在任何 JavaScript 代码中的一样：

**Vue 的情况下**

*  第一，在 template 或 render 选项中定义模板
 *  第二，使用单文件组件，就要从 setup() 中返回一个包含了你想输出到模板中的所有值的对象

> 由于要暴露的值很可能过多，返回语句也容易变得冗长

<template>
      <p>
        <label>
          Number:
          <input
            type="number"
            v-model="nth"
          />
        </label>
        <p>nth Fibonacci number: {
        {nthFibonacci}}</p>
      </p>
    </template>
    <script>
    export default {
      setup() {
        const nth = ref(1);
        const nthFibonacci = computed(() => fibNaive(nth.value));
        return { nth, nthFibonacci };
      }
    };
    </script>
    }

> 要达到 React 同样简洁表现的一种方式是从 setup() 自身中返回一个渲染函数。不过，模板在 Vue 中是更常用的一种做法，所以暴露一个包含值的对象，是你使用 Vue Composition API 时必然会多多遭遇的情况。

### 总结(Conclusion) ###

React 和 Vue都有属于属于自己的“惊喜”，无优劣之分，自 React Hooks 在 2018 年被引入，社区利用其产出了很多优秀的作品，自定义 Hooks 的可扩展性也催生了许多开源贡献。

Vue 受 React Hooks 启发将其调整为适用于自己框架的方式，这也成为这些**不同的技术如何拥抱变化且分享灵感和解决方案的成功案例**

最后， 希望大家早日实现：成为前端高手的伟大梦想！！！

## 关于奇舞周刊 ##

《奇舞周刊》是360公司专业前端团队「奇舞团」运营的前端技术社区。关注公众号后，直接发送链接到后台即可给我们投稿。

![format_png][]

[format_png]: /images/20221124/24fbfb7c99cd42cc88714306eaff8841.png