论如何复用一个组件的逻辑

共计 17069 个字符，预计需要花费 43 分钟才能阅读完成。

本文简要地探讨了 React 和 Vue 两个主流视图库的逻辑组合与复用模式历史: 从最初的 Mixins 到 HOC, 再到 Render Props，最后是最新推出的 Hooks。

* 注: 本文中 JS 脚本文件均为全局引入，因此您会看到:const {createElement: h} = React;之类对象解构写法，而非 ES Modules 导入的写法。另外，请注意阅读注释里的内容!

全文共 22560 字，阅读完成大约需要 45 分钟。

mixins 是传统面向对象编程中十分流行的一种逻辑复用模式，其本质就是 属性 / 方法的拷贝，比如下面这个例子:

const eventMixin = {on(type, handler) {this.eventMap[type] = handler;
  },
  emit(type) {const evt = this.eventMap[type];
    if (typeof evt === 'function') {evt();
    }
  },
};

class Event {constructor() {this.eventMap = {};
  }
}

// 将 mixin 中的属性方法拷贝到 Event 原型对象上
Object.assign(Event.prototype, eventMixin);

const evt = new Event();
evt.on('click', () => {console.warn('a'); });
// 1 秒后触发 click 事件
setTimeout(() => {evt.emit('click');
}, 1000);

在 Vue 中 mixin 可以包含所有组件实例可以传入的选项，如 data, computed, 以及 mounted 等生命周期钩子函数。其同名冲突合并策略为: 值为对象的选项以组件数据优先, 同名生命周期钩子函数都会被调用，且 mixin 中的生命周期钩子函数在组件之前被调用。

const mixin = {data() {return { message: 'a'};
  },
  computed: {msg() {return `msg-${this.message}`; }
  },
  mounted() {
    // 你觉得这两个属性值的打印结果会是什么?
    console.warn(this.message, this.msg);
  },
};

new Vue({
  // 为什么要加非空的 el 选项呢? 因为根实例没有 el 选项的话，是不会触发 mounted 生命周期钩子函数的, 你可以试试把它置为空值, 或者把 mounted 改成 created 试试
  el: '#app',
  mixins: [mixin],
  data() {return { message: 'b'};
  },
  computed: {msg() {return `msg_${this.message}`; }
  },
  mounted() {
    // data 中的 message 属性已被 merge, 所以打印的是 b; msg 属性也是一样，打印的是 msg_b
    console.warn(this.message, this.msg);
  },
});

从 mixin 的同名冲突合并策略也不难看出，在组件中添加 mixin, 组件是需要做一些特殊处理的, 添加众多 mixins 难免会有性能损耗。

在 React 中 mixin 已经随着 createClass 方法在 16 版本被移除了, 不过我们也可以找个 15 的版本来看看:

// 如果把注释去掉是会报错的，React 对值为对象的选项不会自动进行合并，而是提醒开发者不要声明同名属性
const mixin = {// getInitialState() {//   return { message: 'a'}; 
  // },
  componentWillMount() {console.warn(this.state.message);
    this.setData();},
  // setData() {//   this.setState({ message: 'c'});
  // },
};

const {createElement: h} = React;
const App = React.createClass({mixins: [mixin],
  getInitialState() {return { message: 'b'}; 
  },
  componentWillMount() {
    // 对于生命周期钩子函数合并策略 Vue 和 React 是一样的: 同名生命周期钩子函数都会被调用，且 mixin 中的生命周期钩子函数在组件之前被调用。console.warn(this.state.message);
    this.setData();},
  setData() {this.setState({ message: 'd'});
  },
  render() { return null;},
});

ReactDOM.render(h(App), document.getElementById('app'));

首先 Mixins 引入了隐式的依赖关系, 尤其是引入了多个 mixin 甚至是嵌套 mixin 的时候，组件中属性 / 方法来源非常不清晰。
其次 Mixins 可能会导致命名空间冲突, 所有引入的 mixin 都位于同一个命名空间，前一个 mixin 引入的属性 / 方法会被后一个 mixin 的同名属性 / 方法覆盖，这对引用了第三方包的项目尤其不友好
嵌套 Mixins 相互依赖相互耦合，会导致滚雪球式的复杂性，不利于代码维护

好了，以上就是本文关于 mixin 的所有内容，如果你有些累了不妨先休息一下, 后面还有很多内容:)

我们先来了解下高阶函数, 看下维基百科的概念:

在数学和计算机科学中，高阶函数是至少满足下列一个条件的函数：接受一个或多个函数作为输入, 输出一个函数

在很多函数式编程语言中能找到的 map 函数是高阶函数的一个例子。它接受一个函数 f 作为参数，并返回接受一个列表并应用 f 到它的每个元素的一个函数。在函数式编程中，返回另一个函数的高阶函数被称为 Curry 化的函数。

举个例子(请忽略我没有进行类型检查):

function sum(...args) {return args.reduce((a, c) => a + c);
}

const withAbs = fn => (...args) => fn.apply(null, args.map(Math.abs));
// 全用箭头函数的写法可能会对不熟悉的人带来理解上的负担，不过这种写法还是很常见的，其实就相当于下面的写法
// function withAbs(fn) {//   return (...args) => {//     return fn.apply(null, args.map(Math.abs));
//   };
// }

const sumAbs = withAbs(sum);
console.warn(sumAbs(1, 2, 3));
console.warn(sumAbs(1, -2));

根据上面的概念，高阶组件就是一个 接受组件函数，输出一个组件函数的 Curry 化的函数, HOC 最为经典的例子便是为组件包裹一层加载状态, 例如:

对于一些加载比较慢的资源，组件最初展示标准的 Loading 效果，但在一定时间（比如 2 秒）后，变为“资源较大，正在积极加载，请稍候”这样的友好提示，资源加载完毕后再展示具体内容。

const {createElement: h, Component: C} = React;

// HOC 的输入可以这样简单的表示
function Display({loading, delayed, data}) {if (delayed) {return h('div', null, '资源较大，正在积极加载，请稍候');
  }
  if (loading) {return h('div', null, '正在加载');
  }

  return h('div', null, data);
}

// 高阶组件就是一个接受组件函数，输出一个组件函数的 Curry 化的函数
const A = withDelay()(Display);
const B = withDelay()(Display);

class App extends C {constructor(props) {super(props);
    this.state = {
      aLoading: true,
      bLoading: true,
      aData: null,
      bData: null,
    };
    this.handleFetchA = this.handleFetchA.bind(this);
    this.handleFetchB = this.handleFetchB.bind(this);
  }
  
  componentDidMount() {this.handleFetchA();
    this.handleFetchB();}

  handleFetchA() {this.setState({ aLoading: true});
    // 资源 1 秒加载完成，不会触发加载提示文字切换
    setTimeout(() => {this.setState({ aLoading: false, aData: 'a'});
    }, 1000);
  }

  handleFetchB() {this.setState({ bLoading: true});
    // 资源需要 7 秒加载完成，请求开始 5 秒后加载提示文字切换
    setTimeout(() => {this.setState({ bLoading: false, bData: 'b'});
    }, 7000);
  }
  
  render() {
    const {aLoading, bLoading, aData, bData,} = this.state;
    
    return h('article', null, [h(A, { loading: aLoading, data: aData}),
      h(B, { loading: bLoading, data: bData}),
      // 重新加载后，加载提示文字的逻辑不能改变
      h('button', { onClick: this.handleFetchB, disabled: bLoading}, 'click me'),
    ]);
  }
}

// 默认 5 秒后切换加载提示文字
function withDelay(delay = 5000) {// 那么这个高阶函数要怎么实现呢? 读者可以自己先写一写}

ReactDOM.render(h(App), document.getElementById('app'));

写出来大致是这样的:

function withDelay(delay = 5000) {return (ComponentIn) => {
    class ComponentOut extends C {constructor(props) {super(props);
        this.state = {
          timeoutId: null,
          delayed: false,
        };
        this.setDelayTimeout = this.setDelayTimeout.bind(this);
      }

      componentDidMount() {this.setDelayTimeout();
      }

      componentDidUpdate(prevProps) {
        // 加载完成 / 重新加载时，清理旧的定时器，设置新的定时器
        if (this.props.loading !== prevProps.loading) {clearTimeout(this.state.timeoutId);
          this.setDelayTimeout();}
      }

      componentWillUnmount() {clearTimeout(this.state.timeoutId);
      }

      setDelayTimeout() {
        // 加载完成后 / 重新加载需要重置 delayed
        if (this.state.delayed) {this.setState({ delayed: false});
        }
        // 处于加载状态才设置定时器
        if (this.props.loading) {const timeoutId = setTimeout(() => {this.setState({ delayed: true});
          }, delay);
          this.setState({timeoutId});
        }
      }
      
      render() {const { delayed} = this.state;
        // 透传 props
        return h(ComponentIn, { ...this.props, delayed});
      }
    }
    
    return ComponentOut;
  };
}

Vue 中实现 HOC 思路也是一样的，不过 Vue 中的输入 / 输出的组件不是一个函数或是类, 而是一个 包含 template/render 选项的 JavaScript 对象:

const A = {template: '<div>a</div>',};
const B = {render(h) {return h('div', null, 'b');
  },
};

new Vue({
  el: '#app',
  render(h) {
    // 渲染函数的第一个传参不为字符串类型时，需要是包含 template/render 选项的 JavaScript 对象
    return h('article', null, [h(A), h(B)]);
  },
  // 用模板的写法的话，需要在实例里注册组件
  // components: {A, B},
  // template: `
  //   <article>
  //     <A />
  //     <B />
  //   </artcile>
  // `,
});

因此在 Vue 中 HOC 的输入需要这样表示:

const Display = {
  // 为了行文的简洁，这里就不加类型检测和默认值设置了
  props: ['loading', 'data', 'delayed'],
  render(h) {if (this.delayed) {return h('div', null, '资源过大，正在努力加载');
    }
    if (this.loading) {return h('div', null, '正在加载');
    }

    return h('div', null, this.data);
  },
};

// 使用的方式几乎完全一样
const A = withDelay()(Display);
const B = withDelay()(Display);

new Vue({
  el: '#app',
  data() {
    return {
      aLoading: true,
      bLoading: true,
      aData: null,
      bData: null,
    };
  },
  mounted() {this.handleFetchA();
    this.handleFetchB();},
  methods: {handleFetchA() {
      this.aLoading = true;
      // 资源 1 秒加载完成，不会触发加载提示文字切换
      setTimeout(() => {
        this.aLoading = false;
        this.aData = 'a';
      }, 1000);
    },

    handleFetchB() {
      this.bLoading = true;
      // 资源需要 7 秒加载完成，请求开始 5 秒后加载提示文字切换
      setTimeout(() => {
        this.bLoading = false;
        this.bData = 'b';
      }, 7000);
    },
  },
  render(h) {
    return h('article', null, [h(A, { props: { loading: this.aLoading, data: this.aData} }),
      h(B, { props: { loading: this.bLoading, data: this.bData} }),
      // 重新加载后，加载提示文字的逻辑不能改变
      h('button', {
        attrs: {disabled: this.bLoading,},
        on: {click: this.handleFetchB,},
      }, 'click me'),
    ]);
  },
});

withDelay函数也不难写出:

function withDelay(delay = 5000) {return (ComponentIn) => {
    return {
      // 如果 ComponentIn 和 ComponentOut 的 props 完全一致的话可以用 `props: ComponentIn.props` 的写法
      props: ['loading', 'data'],
      data() {
        return {
          delayed: false,
          timeoutId: null,
        };
      },
      watch: {
        // 用 watch 代替 componentDidUpdate
        loading(val, oldVal) {
          // 加载完成 / 重新加载时，清理旧的定时器，设置新的定时器
          if (oldVal !== undefined) {clearTimeout(this.timeoutId);
            this.setDelayTimeout();}
        },
      },
      mounted() {this.setDelayTimeout();
      },
      beforeDestroy() {clearTimeout(this.timeoutId);
      },
      methods: {setDelayTimeout() {
          // 加载完成后 / 重新加载需要重置 delayed
          if (this.delayed) {this.delayed = false;}
          // 处于加载状态才设置定时器
          if (this.loading) {this.timeoutId = setTimeout(() => {this.delayed = true;}, delay);
          }
        },
      },
      render(h) {const { delayed} = this;
        // 透传 props
        return h(ComponentIn, {props: { ...this.$props, delayed},
        });
      },
    };
  };
}

这里就用 React 的写法来举例:

const {createElement: h, Component: C} = React;

const withA = (ComponentIn) => {
  class ComponentOut extends C {renderA() {return h('p', { key: 'a'}, 'a');
    }
    render() {const { renderA} = this;
      return h(ComponentIn, { ...this.props, renderA});
    }
  }

  return ComponentOut;
};

const withB = (ComponentIn) => {
  class ComponentOut extends C {renderB() {return h('p', { key: 'b'}, 'b');
    }
    // 在 HOC 存在同名函数
    renderA() {return h('p', { key: 'c'}, 'c');
    }
    render() {const { renderB, renderA} = this;
      return h(ComponentIn, { ...this.props, renderB, renderA});
    }
  }

  return ComponentOut;
};

class App extends C {render() {const { renderA, renderB} = this.props;
    return h('article', null, [typeof renderA === 'function' && renderA(),
      'app',
      typeof renderB === 'function' && renderB(),]);
  }
}

// 你觉得 renderA 返回的是什么? withA(withB(App))呢?
const container = withB(withA(App));

ReactDOM.render(h(container), document.getElementById('app'));

所以不难看出，对于 HOC 而言，props 也是存在命名冲突问题的。同样的引入了多个 HOC 甚至是嵌套 HOC 的时候，组件中 prop 的属性 / 方法来源非常不清晰

先说缺陷:

首先和 Mixins 一样，HOC 的 props 也会引入隐式的依赖关系, 引入了多个 HOC 甚至是嵌套 HOC 的时候，组件中 prop 的属性 / 方法来源非常不清晰
其次 HOC 的 props 可能会导致命名空间冲突, prop 的同名属性 / 方法会被之后执行的 HOC 覆盖。
HOC 需要额外的组件实例嵌套来封装逻辑，会导致无谓的性能开销

再说优势:

HOC 是没有副作用的纯函数，嵌套 HOC 不会相互依赖相互耦合
输出组件不和输入组件共享状态，也不能使用自身的 setState 直接修改输出组件的状态，保证了状态修改来源单一。

你可能想知道 HOC 并没有解决太多 Mixins 带来的问题，为什么不继续使用 Mixins 呢?

一个非常重要的原因是: 基于类 / 函数语法定义的组件, 需要实例化后才能将 mixins 中的属性 / 方法拷贝到组件中，开发者可以在构造函数中自行拷贝，但是类库要提供这样一个 mixins 选项比较困难。

好了，以上就是本文关于 HOC 的全部内容。本文没有介绍使用 HOC 的注意事项 /compose 函数之类的知识点，不熟悉的读者可以阅读 React 的官方文档, (逃

其实你在上文的嵌套的 HOC 一节中已经看到过 Render Props 的用法了，其本质就是把渲染函数传递给子组件:

const {createElement: h, Component: C} = React;

class Child extends C {render() {const { render} = this.props;
    return h('article', null, [h('header', null, 'header'),
      typeof render === 'function' && render(),
      h('footer', null, 'footer'),
    ]);
  }
}

class App extends C {constructor(props) {super(props);
    this.state = {loading: false};
  }
  
  componentDidMount() {this.setState({ loading: true});
    setTimeout(() => {this.setState({ loading: false});
    }, 1000);
  }
  renderA() { return h('p', null, 'a'); }
  renderB() { return h('p', null, 'b'); }

  render() {
    const render = this.state.loading ? this.renderA : this.renderB;
    // 当然你也可以不叫 render，只要把这个渲染函数准确地传给子组件就可以了
    return h(Child, { render});
  }
}

ReactDOM.render(h(App), document.getElementById('app'));

在 Vue 中 Render Props 对应的概念是插槽 (slots) 或是笼统地称为 Renderless Components。

const child = {
  template: `
    <article>
      <header>header</header>
      <slot></slot>
      <footer>footer</footer>
    </article>
  `,
  // 模板的写法很好理解, 渲染函数的写法是这样:
  // render(h) {
  //   return h('article', null, [//     h('header', null, 'header'),
  //     // 因为没有用到具名 slot, 所以这里就直接用 default 取到所有的 Vnode
  //     this.$slots.default,
  //     h('footer', null, 'footer'),
  //   ]);
  // },
};

new Vue({
  el: '#app',
  components: {child},
  data() {return { loading: false};
  },
  mounted() {
    this.loading = true;
    setTimeout(() => {this.loading = false;}, 1000);
  },
  template: `
    <child>
      <p v-if="loading">a</p>
      <p v-else>b</p>
    </child>
  `,
});

不难看出在 Vue 中，我们不需要显式地去传递渲染函数，库会通过 $slots 自动传递。

限于篇幅，Vue2.6 版本之前的写法: slot和 slot-scope 这里就不介绍了，读者可以阅读 Vue 的官方文档, 这里介绍下 v-slot 的写法:

const child = {data() {
    return {obj: { name: 'obj'},
    };
  },
  // slot 上绑定的属性可以传递给父组件，通过 `v-slot:[name]="slotProps"` 接收，当然 slotProps 可以命名为其他名称, 也可以写成下文中的对象解构的写法
  template: `
    <article>
      <header>header</header>
      
      <slot name="content"></slot>
      <slot :obj="obj"></slot>
      
      <footer>footer</footer>
    </article>
  `,
};
    
new Vue({
  el: '#app',
  components: {child},
  data() {return { loading: false};
  },
  mounted() {
    this.loading = true;
    setTimeout(() => {this.loading = false;}, 1000);
  },
  // #content 是 v -slot:content 的简写
  template: `
    <child>
      <template #content>
        <p v-if="loading">a</p>
        <p v-else>b</p>  
      </template>

      <template #default="{obj}">
        {{obj.name}}
      </template>
    </child>
  `,
});

需要注意的是跟 slot 不同，v-slot只能添加在 <template> 上，而非任意标签。

就跟这个模式的名称一样，Render Props 只是组件 prop 的一种用法，为了逻辑复用，需要将状态 / 视图的操作都封装到 prop 的这个渲染函数中，因此和 HOC 一样也会造成性能上的损耗。但是由于 prop 的属性只有一个，不会导致 HOC prop 名称冲突的问题。

好了，以上就是本文关于 Render Props 的全部内容, 最后我们将介绍目前最优秀的组件逻辑组合与复用模式 Hooks。

Hooks 在 React 中在 16.8 版本正式引入，我们先看下操作状态的钩子useState:

const {createElement: h, useState} = React;

function App() {// 没有 super(props), 没有 this.onClick = this.onClick.bind(this)
  const [count, setCount] = useState(0);

  function onClick() {
    // 没有 this.state.count, 没有 this.setState
    setCount(count + 1);
  }

  return h('article', null, [h('p', null, count),
    h('button', { onClick}, 'click me'),
  ]);
}

ReactDOM.render(h(App), document.getElementById('app'));

函数中没有生命周期函数钩子，因此 React Hooks 提供了一个操作副作用的钩子useEffect, 钩子中的 callback 会在渲染完成后被调用

const {createElement: h, useState, useEffect} = React;

function App() {const [message, setMessage] = useState('a');
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    // 未指定 `useEffect` 的第二个参数，每次渲染完成后都会调用 callback, 因此点击按钮会一直打印 use effect
    console.warn('use effect', count);
    setTimeout(() => {setMessage('b');
    }, 1000);

    // useEffect 中返回的函数会在渲染完成后，下一个 effect 开始前被调用
    return () => {console.warn('clean up', count);
    };
  });

  useEffect(() => {// 告诉 React 你的 effect 不依赖于 props 或 state 中的任何值，所以它永远都不需要重复执行, 相当于 componentDidMount}, []);
  // 空数组可以替换成 state 不会改变的变量组成的数组
  // const [fake] = useState(0);
  // useEffect(() => {}, [fake]);
  
  useEffect(() => {return () => {// 相当于 componentWillUnmount};
  }, []);

  console.warn('render', count);

  return h('article', null, [h('p', null, count),
    h('button', { onClick}, 'click me'),
    h('p', null, message),
  ]);
}

ReactDOM.render(h(App), document.getElementById('app'));

除了这两个最常用的钩子，React Hooks 还提供了许多内置的钩子函数，这里举个 useCallback 的例子:

const {createElement: h, useCallback} = React;

function useBinding(initialValue) {const [value, setValue] = useState(initialValue);

  // 利用 useCallback 可以轻松地实现双向绑定的功能
  const onChange = useCallback((evt) => {setValue(evt.target.value);
  }, [value]);

  return [value, onChange];
}

function App() {const [value, onChange] = useBinding('text');

  return h('article', null, [h('p', null, value),
    h('input', { value, onChange}),
  ]);
}

好了，我们知道了 Hooks 的基本用法。那么上文中 HOC 的例子用 Hooks 要怎么改写呢?

对于一些加载比较慢的资源，组件最初展示标准的 Loading 效果，但在一定时间（比如 2 秒）后，变为“资源较大，正在积极加载，请稍候”这样的友好提示，资源加载完毕后再展示具体内容。

仔细观察上文中的 withDelay 函数，不难发现就组件层面而言, 我们只是给输入组件传递了一个名为 delayed 的 prop。

那么对于 Hooks 而言也是一样, 我们可以保证视图组件 Display 和根组件 App 不变, 仅仅修改 withDelay 这一 HOC 为自定义 HookuseDelay, 这个 Hook 只返回 delayed 变量。

function useDelay({loading, delay = 5000}) {// 自定义 Hook, 需要返回一个 delayed 变量}

function HookDisplay(props) {const delayed = useDelay({ loading: props.loading});
  // Display 组件函数请看上文中的 React 中的 HOC 章节
  return h(Display, { ...props, delayed});
}

// 由于例子中的两个组件除了 props 其余部分都是一致的，因此共用一个组件函数(你仔细观察 HOC 的例子会发现其实也是一样的)
const A = HookDisplay;
const B = HookDisplay;

// 你还能用更简洁的函数完成这个函数完成的事情吗?
function useDelay({loading, delay = 5000}) {const [delayed, setDelayed] = useState(false);

  useEffect(() => {
    // 加载完成后 / 重新加载需要重置 delayed
    if (delayed) {setDelayed(false);
    }
    // 处于加载状态才设置定时器
    const timeoutId = loading ? setTimeout(() => {setDelayed(true);
    }, delay) : null;

    return () => {clearTimeout(timeoutId);
    };
  }, [loading]);

  return delayed;
}

Vue 中 Hooks 被称为 Composition API 提案，目前 API 还不太稳定，因此下面的内容有可能还会更改.

同样的我们先来看下操作状态的钩子, Vue 提供了两个操作状态的 Hook, 分别是 ref 和reactive(在之前的 RFC 中分别叫做 value 和state):

<main id="app">
  <p>{{count}}</p>
  <button @click="increment">click me</button>
</main>

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script src="https://unpkg.com/@vue/composition-api/dist/vue-composition-api.umd.js"></script>

<script>
  // vueCompositionApi.default 是一个包含 install 属性的对象(也就是 Vue 的插件)
  const {ref, default: VueCompositionApi} = vueCompositionApi;
  Vue.use(VueCompositionApi);

  new Vue({
    el: '#app',
    setup() {// 你会发现 count 就是一个响应式对象，只含有一个 value 属性, 指向其内部的值。由 ref 声明的变量被称为包装对象(value wrapper)
      // 包装对象在模板中使用会被自动展开，即可以直接使用 `count` 而不需要写 `count.value`
      const count = ref(0);
      
      function increment() {// 这里需要非常微妙地加上一个 `.value`, 这也是 Vue 决定将 `value` 重命名为 `ref` 的原因之一(叫 value 函数返回的却是个包含 value 属性的对象不太符合直觉)
        count.value += 1;
      }

      return {count, increment};
    },
  });
</script>

值得注意的是 Vue 的 ref 钩子和 React 的 useRef 钩子还是有一些差别的，useRef本质上并不是一个操作状态的钩子(或者说操作的状态不会影响到视图)。

const {createElement: h, useRef} = React;

function App() {const count = useRef(0);
  function onClick() {
    // 虽然每次渲染都会返回同一个 ref 对象，但是变更 current 属性并不会引发组件重新渲染
    console.warn(count.current);
    count.current += 1;
  }      

  return h('article', null, [h('p', null, count.current),
    h('button', { onClick}, 'click me'),
  ]);
}

ReactDOM.render(h(App), document.getElementById('app'));

<main id="app">
  <p>{{state.count}}</p>
  <p>{{state.double}}</p>
  
  <button @click="increment">click me</button>
</main>

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script src="https://unpkg.com/@vue/composition-api/dist/vue-composition-api.umd.js"></script>

<script>
  const {default: VueCompositionApi, reactive, computed} = vueCompositionApi;
  Vue.use(VueCompositionApi);

  new Vue({
    el: '#app',
    setup() {
      const state = reactive({
        count: 0,
        double: computed(() => state.count * 2),
      });
      // 对于值属性而言可以直接用 Vue.observable 代替
      // 而对于计算属性，vueCompositionApi.computed 返回的是个包装对象需要进行处理, 读者可以去除注释打印 state.double 看看
      // const state = Vue.observable({
      //   count: 0,
      //   double: computed(() => state.count * 2),
      // });
      function increment() {state.count += 1;}

      return {state, increment};
    },
  });
</script>

React Hooks 在每次组件渲染时都会调用，通过隐式地将状态挂载在当前的内部组件节点上，在下一次渲染时根据调用顺序取出。而 Vue 的 setup() 每个组件实例只会在初始化时调用一次，状态通过引用储存在 setup() 的闭包内。

因此 Vue 没有直接提供操作副作用的钩子，提供的依旧是生命周期函数的钩子，除了加了 on 前缀和之前没太多的差别, 以 onMounted 为例:

<main id="app">
  <ul>
    <li v-for="item in list">{{item}}</li>
  </ul>
</main>

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script src="https://unpkg.com/@vue/composition-api/dist/vue-composition-api.umd.js"></script>

<script>
  const {default: VueCompositionApi, reactive, onMounted} = vueCompositionApi;
  Vue.use(VueCompositionApi);

  new Vue({
    el: '#app',
    setup() {const list = reactive([1, 2, 3]);
      onMounted(() => {setTimeout(() => {list.push(4);
        }, 1000);
      });

      return {list};
    },
  });
</script>

那么上文中 HOC 的例子迁移到 Composition API 几乎不需要修改, 保持 Display 组件对象和根 Vue 实例选项不变:

function useDelay(props, delay = 5000) {// 自定义 Hook, 需要返回一个 delayed 变量}

const HookDisplay = {props: ['loading', 'data'],
  setup(props) {const delayed = useDelay(props);
    return {delayed};
  },
  render(h) {
    // Display 组件对象请看上文中的 Vue 中的 HOC 章节
    return h(Display, {
      props: {...this.$props, delayed: this.delayed,},
    });
  },
};

const A = HookDisplay;
const B = HookDisplay;

const {default: VueCompositionApi, ref, watch, onMounted, onUnmounted,} = vueCompositionApi;
Vue.use(VueCompositionApi);

function useDelay(props, delay = 5000) {const delayed = ref(false);
  let timeoutId = null;

  // 你可以试试把传参 props 换成 loading
  // 由于 loading 是基础类型, 在传参的时候会丢失响应式的能力(不再是对象的 getter/setter)
  watch(() => props.loading, (val, oldVal) => {if (oldVal !== undefined) {clearTimeout(timeoutId);
      setDelayTimeout();}
  });
  onMounted(() => {setDelayTimeout();
  });
  onUnmounted(() => {clearTimeout(timeoutId);
  });

  function setDelayTimeout() {if (delayed.value) {delayed.value = false;}
    if (props.loading) {timeoutId = setTimeout(() => {delayed.value = true;}, delay);
    }
  }

  return delayed;
}

不难看出 Hooks 和 Render Props 的思想有些许的相似，只不过 Render Props 返回的是组件，Hooks 返回的是一些状态(需要你自己传递给组件)。得益于 Hooks 这种细粒度的封装能力，渲染函数不再需要通过组件传递，修正了 Render Props 需要额外的组件实例嵌套来封装逻辑的缺陷。

好了，以上就是本文关于逻辑组合与复用模式的全部内容。行文难免有疏漏和错误，还望读者批评指正。

前言

Mixins

面向对象中的 mixin

Vue 中的 mixin

React 中的 mixin

Mixins 的缺陷

HOC

高阶函数

React 中的 HOC

Vue 中的 HOC

嵌套的 HOC

HOC 的优势与缺陷

Render Props

React 中的 Render Props

Vue 中的 slot

Render Props 的优势和缺陷

Hooks

React 中的 Hooks

Vue 中的 Composition API

Hooks 的优势

Just My Socks（注册教程内含优惠码）