React开发者疑问：为何用自定义Hook而非服务？（无Hook时代视角）

我拥有Java/Android/C#/Node.js/Angular/React多年开发经验，但在Hooks流行前停止了React开发，如今回归后无法理解为何大家如此痴迷自定义Hook。在我看来，React/Redux的核心优势是相较于其他框架的显式简洁，引入Hooks前，带有简单类生命周期方法的React（结合TypeScript接口）在核心逻辑上非常直观。

几乎所有主流语言实现代码复用的标准方式，都是将逻辑重构为可轻松导出/导入、无需依赖组件/框架元素的纯函数式外部服务，很多时候“控制反转”的实现也基于此（结合接口）。但现在很多资料称“Hooks是新的编码方式”，且“凡事都写自定义Hook是最佳实践”，这在我听来像无意义的噱头，类似“我们做了新工具所以它是最好的”。

我举一个教程里的例子：

以前的写法是：

componentDidMount(){
    document.title = `You clicked ${count} times`;
}

componentDidUpdate(){
    document.title = `You clicked ${count} times`;
}

或重构为服务的写法：

componentDidMount(){
    documentService.setTitle(`You clicked ${count} times`);
}

componentDidUpdate(){
    documentService.setTitle(`You clicked ${count} times`);
}

这种写法意图明确，组件触发服务，结合TypeScript接口还能实现良好的控制反转，服务还可通过props传递，异步数据获取等场景也适用。

用Hooks后的写法是：

useEffect(() => {
    document.title = `You clicked ${count} times`;
  },[count]);

在我看来这和之前的生命周期模型差别不大，只是将两个命名明确的生命周期方法，换成了依赖useEffect和依赖数组的组合（依赖数组的存在会改变触发时机）。我知道Hooks内部更像事件驱动，但核心目标都是基于组件变化触发动作/渲染。

这种情况下我仍会像之前一样重构为服务：

useEffect(() => {
    documentService.setTitle(`You clicked ${count} times`);
  },[count]);

但问题是，我看到很多人并不这么做，而是用自定义Hook实现所有逻辑，比如：

const useDocumentTitle = (title: string) => {
  useEffect(() => {
    document.title = title
  }, [title])
}

在组件中调用：

useDocumentTitle(`You clicked ${count} times`);

我有三个疑问：

• 为何说自定义Hook更易测试？它只是把useEffect从组件中抽离，和内部useEffect的渲染生命周期一致，相比服务没看出优势；
• 我需要记住useDocumentTitle会触发组件重渲染，但不查看内部代码就不知道它的触发时机，因为逻辑依赖内部useEffect的依赖数组；
• 测试useDocumentTitle怎么会比测试服务或抽离的方法更简单？在我看来反而更难。

内容的提问来源于stack exchange，提问作者Pedro Escobar