原文：https://dev.to/voluntadpear/comparing-react-hooks-with-vue-composition-api-4b32

Vue 最近提出了 Composition API RFC，一种新的书写 Vue 组件的 API；该 API 受到 React Hooks 的启发，但有一些有趣的差异，也就是本文要探讨的内容。该 RFC 始自于在社区某些部分受到大量非议的之前一个叫做 Function-based Component API 的版本 -- 人们担心 Vue 开始变得更复杂而不像大家最初喜欢它时那样是个简单的库了。

参阅《在 React 和 Vue 中尝鲜 Hooks》一文

Vue 核心团队解决了围绕首个 RFC 的困惑并在新的版本中提出了一些引人关注的调整，也对提案改变的背后动机提供了进一步的见解。如果你对向 Vue 核心团队给出一些关于新提案反馈方面感兴趣，可以参与到 https://github.com/vuejs/rfcs/pull/78 中。

注意: Vue Composition API 仍在不断改进，会收到特性改变的影响。在 Vue 3.0 到来之前不要把 Vue Composition API 视为 100% 确定的。

React Hooks 允许你 "勾入" 诸如组件状态和副作用处理等 React 功能中。Hooks 只能用在函数组件中，并允许我们在不需要创建类的情况下将状态、副作用处理和更多东西带入组件中。自从 2018 年被引入，社区对其一见倾心。

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

那么，开始学习 React Hooks 和 Vue Composition API 不同的方面并记录某些我们会遇到的区别吧 ⏯

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

例子：

<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>

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

这个新的 API 并没有让原来的 API（现在被称作 "Options-based API"）消失。提案的当前迭代甚至允许开发者结合使用新旧两种 APIs。

注意：可以在 Vue 2.x 中通过 @vue/composition-api 插件尝试新 API。

代码的执行

Vue Composition API 的 setup() 晚于 beforeCreate 钩子（在 Vue 中，“钩子”就是一个生命周期方法）而早于 created 钩子被调用。这是我们可以分辨 React Hooks 和 Vue Composition API 的首个区别， React hooks 会在组件每次渲染时候运行，而 Vue setup() 只在组件创建时运行一次。因为前者可以多次运行，所以 render 方法必须遵守某些规则，其中之一是：

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

直接贴一段 React 文档中的代码来展示这一点：

function Form() {
  // 1. 使用 name 状态变量
  const [name, setName] = useState('Mary');

  // 2. 使用一个持久化表单的副作用
  if (name !== '') {
    useEffect(function persistForm() {
      localStorage.setItem('formData', name);
    });
  }
  // 3. 使用 surname 状态变量
  const [surname, setSurname] = useState('Poppins');

  // 4. 使用一个更新 title 的副作用
  useEffect(function updateTitle() {
    document.title = `${name} ${surname}`;
  });

  // ...
}

React 在内部保持了对我们用于组件中所有 hooks 的跟踪。在本例中，我们用了四个 hooks。注意第一个 useEffect 调用是如何条件性的完成的，由于首次渲染中 name 会被默认值 'Mary' 赋值，条件会被评估为 true，React 也会知道需要按顺序的保持对所有四个 hooks 的跟踪。但如若在另一次渲染中 name 为空会发生什么？在那种情况下，React 将不知道第二个 useState hook 该返回什么 😱（译注：React 默认靠 hook 调用的顺序为其匹配对应的状态，连续两个 useState 会造成后面的 hook 提前执行）。要避免类似的问题，强烈推荐在处理 React Hooks 时使用一个 eslint-plugin-react-hooks 插件，它也默认包含在了 Create React App 中。

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

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

回过头看看 Vue，和上例等价的写法大概是这样：

export default {
  setup() {
    // 1. 使用 name 状态变量
    const name = ref("Mary");
    // 2. 使用一个 watcher 以持久化表单
    if(name.value !== '') {
      watch(function persistForm() => {
        localStorage.setItem('formData', name.value);
      });
    }
   // 3. 使用 surname 状态变量
   const surname = ref("Poppins");
   // 4. 使用一个 watcher 以更新 title
   watch(function updateTitle() {
     document.title = `${name.value} ${surname.value}`;
   });
  }
}

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

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

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

声明状态

useState 是 React Hooks 声明状态的主要途径。你可以向调用中传入一个初始值作为参数；并且如果初始值的计算代价比较昂贵，也可以将其表达为一个函数，这样就只会在初次渲染时才会被执行了。

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

useState() 返回一个数组，第一项是 state，第二项是一个 setter 函数。通常可以使用 Array destructuring 语法得到它们。

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

const initialState = {count: 0};

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}
const [state, dispatch] = useReducer(reducer, initialState);

比如调用了一次 dispatch({type: 'increment'}); 后，state 就会变为 {count: 1}。

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

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），会失去其反应性（译注：因为是对整个对象做的代理）。所以你需要定义一个指向对象的引用，并通过其访问状态属性。

Composition API 提供了两个助手函数以处理 refs 和 reactive 对象。

如果必要的话，isRef() 可被用来条件性地获取 value 属性（比如 isRef(myVar) ? myVar.value : myVar）。

toRefs() 则将反应式对象转换为普通对象，该对象上的所有属性都自动转换为 ref。这对于从自定义组合式函数中返回对象时特别有用（这也允许了调用侧正常使用结构的情况下还能保持反应性）。

function useFeatureX() {
  const state = reactive({
    foo: 1,
    bar: 2
  })

  return toRefs(state)
}

const {foo, bar} = useFeatureX();

RFC 中用一整个章节比较了 ref 和 reactive，在其结尾总结了使用这两个函数时可能的处理方式：

像你在正常的 JavaScript 中声明基本类型变量和对象变量那样去使用 ref 和 reactive 即可。在这种方式下，推荐使用一个 IDE 支持的类型系统。

只要用到 reactive 的时候，要记住从 composition 函数中返回反应式对象时得使用 toRefs()。这样做减少了过多使用 ref 时的开销，但并不会消减熟悉该概念的必要。

如何跟踪依赖

React 中的 useEffect hook 允许我们在每次渲染之后运行某些副作用（如请求数据或使用 storage 等 Web APIs），并视需要在下次执行回调之前或当组件卸载时运行一些清理工作。默认情况下，所有用 useEffect 注册的函数都会在每次渲染之后运行，但我们可以定义真实依赖的状态和属性，以使 React 在相关依赖没有改变的情况下（如由 state 中的其他部分引起的渲染）跳过某些 useEffect hook 执行。回到之前 Form 的例子，我们可以传递一个依赖项的数组作为 useEffect hook 的第二个参数：

function Form() {
  const [name, setName] = useState('Mary');
  const [surname, setSurname] = useState('Poppins');
  useEffect(function persistForm() {
      localStorage.setItem('formData', name);
  }, [name]);

  // ...
}

这样一来，只有当 name 改变时才会更新 localStorage。使用 React Hooks 时一个常见的 bug 来源就是忘记在依赖项数组中详尽地声明所有依赖项；这可能让 useEffect 回调以依赖和引用了上一次渲染的陈旧数据而非最新数据从而无法被更新而告终。幸运的是，eslint-plugin-react-hooks 也包含了一条 lint 提示关于丢失依赖项的规则。

useCallback 和 useMemo 也使用依赖项数组参数，以分别决定其是否应该返回缓存过的（ memoized）与上一次执行相同的版本的回调或值。

在 Vue Composition API 的情况下，可以使用 watch() 执行副作用以响应状态或属性的改变。多亏了 Vue 的反应式系统，依赖会被自动跟踪，注册过的函数也会在依赖改变时被反应性的调用。回到例子中：

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

在 watcher 首次运行后，name 会作为一个依赖项被跟踪，而稍后当其值改变时，watcher 会再次运行。

访问组件生命周期

Hooks 在处理 React 组件的生命周期、副作用和状态管理时表现出了心理模式上的完全转变。React 社区中的一位活跃分子 Ryan Florence，曾表示从类组件切换到 hooks 有一个心理转换过程，并且 React 文档中也指出：

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

但其实也有可能控制 useEffect 何时运行，并让我们更接近生命周期中运行副作用的心理模式：

useEffect(() => {
  console.log("这段只在初次渲染后运行");
  return () => { console.log("这里会在组件将要卸载时运行"); };
}, []);

但要再次强调的是，使用 React Hooks 时停止从生命周期方法的角度思考，而是考虑副作用依赖什么状态，才是更符合习惯的。顺便一提的是，Svelte 的创建者 Rich Harris 发表了他在 NYC React meetup 上演讲的 some insightful slides，其间他探究了 React 为了将来的新特性（比如 concurrent mode）可用所做的妥协以及 Svelte 何其的区别。这将帮助你理解从思考副作用发生在组件生命周期何处到 作为渲染本身一部分的副作用 的转变。来自 React 核心团队的 Sebastian Markbåge 写的 further expands here 也解释了 React 前进的方向和为类似 Svelte 或 Vue 式的反应性系统作出的妥协。

另一方面的 Vue Component API，让我们通过 onMounted、onUpdated 和 onBeforeUnmount 等仍可以访问生命周期钩子（Vue 世界中对生命周期方法的等价称呼）：

setup() {
  onMounted(() => {
    console.log(`这段只在初次渲染后运行`);
  });
  onBeforeUnmount(() => {
    console.log(`这里会在组件将要卸载时运行`);
  });
}

故而在 Vue 的情况下的心理模式转变更多在停止通过组件选项（data、computed, watch、methods、生命周期钩子等）管理代码这点上，要转向用不同函数处理对应的特性。RFC 包含一个通过选项 vs. 通过逻辑关注点管理代码的示例和对照大全。

自定义代码

React 团队意图聚焦于 Hooks 上的一方面，是比之于先前社区中采纳的诸如 Higher-Order Components 或 Render Props 等替代方式，提供给开发者编写可复用代码的更佳方式。Custom Hooks 正是他们带来的答案。

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

export function useDebugState(label, initialValue) {
  const [value, setValue] = useState(initialValue);
  useEffect(() => {
    console.log(`${label}: `, value);
  }, [label, value]);
  return [value, setValue];
}

这个 Custom Hook 的小例子可被作为一个 useState 的替代品使用，用于当 value 改变时向控制台打印日志：

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;
}

// 在其他某处：
const name = useDebugState("Name", "Mary");

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

Refs

React 的 useRef 和 Vue 的 ref 都允许你引用一个子组件（如果是 React 则是一个类组件或是被 React.forwardRef 包装的组件）或要附加到的 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>
    )
  }
}

注意 Vue 2.x 且用 @vue/composition-api 插件的情况下，不支持在 setup() 返回的渲染函数中通过 JSX 分配模版 refs, 但根据当前的 RFC，以上语法在 Vue 3.0 中是合法的。

React 中的 useRef Hook 不止对于取得 DOM 元素的访问有用。亦可用在你想保持在渲染函数中但并不是 state 一部分的（也就是它们的改变触发不了重新渲染）任何类型的可变值（mutable value）上。可将这些可变值视为类组件中的 "实例变量" 。这是一个例子：

const timerRef = useRef(null);
useEffect(() => {
  timerRef.current = setInterval(() => {
    setSecondsPassed(prevSecond => prevSecond + 1);
  }, 1000);
  return () => {
    clearInterval(timerRef.current);
  };
}, []);

return (
  <button
    onClick={() => {
      clearInterval(timerRef.current);
    }}
  >
    停止 timer
  </button>
)

在 Vue Composition API 中，如我们在几乎所有文中之前的例子中所见，ref 可被用于定义反应式状态。使用 Composition API 的时候，模版 refs 和反应式 refs 是一致的。

附加的函数

由于 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`);

照例，记住 refs 是容器，而值要通过访问 value 属性获得 :p

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

function fibNaive(n) {
  if (n <= 1) return n;
  return fibNaive(n - 1) + fibNaive(n - 2);
}
const Fibonacci = () => {
  const [nth, setNth] = useState(1);
  const nthFibonacci = useMemo(() => fibNaive(nth), [nth]);
  return (
    <section>
      <label>
        Number:
        <input
          type="number"
          value={nth}
          onChange={e => setNth(e.target.value)}
        />
      </label>
      <p>nth Fibonacci number: {nthFibonacci}</p>
    </section>
  );
};

useMemo 同样期望一个依赖项数组以获知其在何时应该计算一个新值。React 建议你使用 useMemo 作为一个性能优化手段而非一个直到任何一个依赖项改变之前的缓存值。

作为一个补充说明：Kent C. Dodds 有一篇非常棒的文章 "useMemo 和 useCallback" 说明了很多 useMemo 和 useCallback 非必要的场景。

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

useCallback 类似于 useMemo，但它是用来缓存一个回调函数的。事实上 useCallback(fn, deps) 等价于 useMemo(() => fn, deps)。其理想用例是当我们需要在多次渲染间保持引用相等性时，比如将回调传递给一个用 React.memo 定义的已优化子组件，而我们想要避免其不必要的重复渲染时。

鉴于 Vue Composition API 的天然特性，并没有等同于 useCallback 的函数。setup() 中的任何回调函数都只会定义一次。

Context 和 provide/inject

React 中的 useContext hook，可以作为一种读取特定上下文当前值的新方式。返回的值通常由最靠近的一层 <MyContext.Provider> 祖先树的 value 属性确定。其等价于一个类中的 static contextType = MyContext ，或是 <MyContext.Consumer> 组件。

// context 对象
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 作为值。

在渲染上下文中暴露值

在 React 的情况下，因为所有 hooks 代码都在组件定义中，且你将在同一个函数中返回要渲染的 React 元素，所以你对作用域中的任何值拥有完全访问能力，就像在任何 JavaScript 代码中的一样：

const Fibonacci = () => {
  const [nth, setNth] = useState(1);
  const nthFibonacci = useMemo(() => fibNaive(nth), [nth]);
  return (
    <section>
      <label>
        Number:
        <input
          type="number"
          value={nth}
          onChange={e => setNth(e.target.value)}
        />
      </label>
      <p>nth Fibonacci number: {nthFibonacci}</p>
    </section>
  );
};

而在 Vue 的情况下，你要在 template 或 render 选项中定义模板；如果你使用单文件组件，就要从 setup() 中返回一个包含了你想输出到模板中的所有值的对象。由于要暴露的值很可能过多，你的返回语句也容易变得冗长，这一点在 RFC 的 Verbosity of the Return Statement 章节中有所提及：

<template>
  <section>
    <label>
      Number:
      <input
        type="number"
        v-model="nth"
      />
    </label>
    <p>nth Fibonacci number: {{nthFibonacci}}</p>
  </section>
</template>
<script>
export default {
  setup() {
    const nth = ref(1);
    const nthFibonacci = computed(() => fibNaive(nth.value));
    return { nth, nthFibonacci }; // 译注：这里可能有很多
  }
};
</script>

要达到 React 同样简洁表现的一种方式是从 setup() 自身中返回一个渲染函数：

export default {
  setup() {
    const nth = ref(1);
    const nthFibonacci = computed(() => fibNaive(nth.value));
    return () => (
      <section>
        <label>
          Number:
          <input
            type="number"
            vModel={nth}
          />
        </label>
        <p>nth Fibonacci number: {nthFibonacci}</p>
      </section>
    );
  }
};

不过，模板在 Vue 中是更流行的一种做法，所以暴露一个包含值的对象，是你使用 Vue Composition API 时必然会多多遭遇的情况。

总结

每个框架都有惊喜时刻。自从 React Hooks 在 2018 年被引入，社区利用它们杰作频出，并且自定义 Hooks 的可扩展性也催生了许多开源贡献，让我们可以轻易的加入自己的项目中。Vue 受 React Hooks 启发并将其调整为适用于其框架的方式，这也成为这些不同的技术如何拥抱变化并分享灵感和解决方案的成功案例。我对 Vue 3 的到来已经急不可耐，迫切想看到它的解锁能带来的可能性了。

--End--

搜索 fewelife 关注公众号

转载请注明出处