effect返回runner單測怎么實現(xiàn)

本篇內(nèi)容主要講解“effect返回runner單測怎么實現(xiàn)”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“effect返回runner單測怎么實現(xiàn)”吧!

一、 runner 單測

首先介紹一下runner的功能，分以下幾點(diǎn):

• effect(fn)執(zhí)行會返回一個runner函數(shù)；

• 執(zhí)行runner，相當(dāng)于重新執(zhí)行一遍effect里面?zhèn)魅氲?code>fn（原始依賴）；

• 最后runner的返回值就是fn的返回值。

至于runner的作用，可以看做是對外暴露ReactiveEffect實例的run方法。

• 一方面是為了可以手動調(diào)用觸發(fā)依賴；

• 另一方面，也是為了和stop結(jié)合使用，來手動控制響應(yīng)式的生效與失效；
  具體點(diǎn)就是：使用者可以手動執(zhí)行runner()來控制副作用函數(shù)的生效 和 執(zhí)行stop(runner)也就是runner.effect.stop()使之失效，具體stop的實現(xiàn)實現(xiàn)后面再說。

還是先來看一下單測吧，單測用例如下：

it('runner', function () {
  // effect(fn) -> return runner -> runner() == fn() -> return
  let foo = 10;
  const runner = effect(() => {
    foo++;
    return 'foo';
  });
  expect(foo).toBe(11);
  const r = runner();
  expect(foo).toBe(12);
  expect(r).toBe('foo');
});

二、 核心邏輯實現(xiàn)

// + 為新增加的代碼。

class ReactiveEffect {
  private _fn: any;
  constructor(fn) {
    this._fn = fn;
  }
  run() {
    activeEffect = this;
    // + 返回fn的返回值
    return this._fn();
  }
}
export function effect(fn) {
  const _effect = new ReactiveEffect(fn);
  _effect.run();
  // + 涉及到run()中this指向的問題，所以需要bind處理一下。
  return _effect.run.bind(_effect);
}

具體實現(xiàn)較為簡單，上述代碼中也有相應(yīng)注釋，這里就不再贅述了。
再次完整跑一遍effect單測，保證新功能的增加對以往實現(xiàn)功能不造成影響。

單測結(jié)果如下：

到此，相信大家對“effect返回runner單測怎么實現(xiàn)”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！