对比 React Hooks 和 Vue Composition API

• 场景
• hook 的时代意义
• React Hooks
• 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 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 中，“钩子”就是一个生命周期方法

1. Vue Composition API 的 setup() 晚于 beforeCreate 钩子，早于 created 钩子被调用
2. 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 函数和一个初始状态：

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

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：

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

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 代码中的一样：

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() 中返回一个包含了你想输出到模板中的所有值的对象

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

<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() 自身中返回一个渲染函数。不过，模板在 Vue 中是更常用的一种做法，所以暴露一个包含值的对象，是你使用 Vue Composition API 时必然会多多遭遇的情况。

总结(Conclusion)

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

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

---

参考

• Composition API RFC
• React hooks
• Comparing React Hooks with Vue Composition API

---

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

• 微信公众号：连先生有猫病
• 微信号：wanderlian
• 掘金：曜灵
• 个人博客：lianpf.github.io/

本文版权归原作者曜灵所有！若需转载，请联系微信公众号：连先生有猫病，可获取作者联系方式！未经允许，严禁转载！对非法转载者, 原作者保留采用法律手段追究的权利！