普通视图

发现新文章，点击刷新页面。

昨天以前三省吾身丶丶

三省吾身丶丶
从一个简单功能的实现，谈谈 react 中的逻辑复用进化过程guowenfh
需求：我们现在有一个获取验证码的按钮，需要在点击后禁用，并且在按钮上显示倒计时60秒才可以进行第二次点击。本篇文章通过对这个需求的八种实现方式来讨论在 react 中的逻辑复用的进化过程代码例子放在了 codesandbox 上。方案一使用 setInterval 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051 import React from 'react'export default class LoadingButtonInterval extends React.Component { state = { loading: false, btnText: '获取验证码', totalSecond: 10 } timer = null componentWillUnmount() { this.clear() } clear = () =>
2019年9月17日 21:36

从一个简单功能的实现，谈谈 react 中的逻辑复用进化过程

三省吾身丶丶

作者 guowenfh

2019年9月17日 21:36

需求：我们现在有一个获取验证码的按钮，需要在点击后禁用，并且在按钮上显示倒计时60秒才可以进行第二次点击。
本篇文章通过对这个需求的八种实现方式来讨论在 react 中的逻辑复用的进化过程

代码例子放在了 codesandbox 上。

方案一使用 setInterval

import React from 'react'

export default class LoadingButtonInterval extends React.Component {
  state = {
    loading: false,
    btnText: '获取验证码',
    totalSecond: 10
  }
  timer = null
  componentWillUnmount() {
    this.clear()
  }
  clear = () => {
    clearInterval(this.timer)

    this.setState({
      loading: false,
      totalSecond: 10
    })
  }
  setTime = () => {
    this.timer = setInterval(() => {
      const { totalSecond } = this.state
      if (totalSecond <= 0) {
        this.clear()
        return
      }
      this.setState(() => ({
        totalSecond: totalSecond - 1
      }))
    }, 1000)
  }
  onFetch = () => {
    this.setState(() => ({ loading: true }))
    const { totalSecond } = this.state
    this.setState(() => ({
      totalSecond: totalSecond - 1
    }))
    this.setTime()
  }
  render() {
    const { loading, btnText, totalSecond } = this.state
    return (
      <button disabled={loading} onClick={this.onFetch}>
        {!loading ? btnText : `请等待${totalSecond}秒..`}
      </button>
    )
  }
}

方案二使用 setTimeout

import React from 'react'

export default class LoadingButton extends React.Component {
  state = {
    loading: false,
    btnText: '获取验证码',
    totalSecond: 60
  }
  timer = null

  componentWillUnmount() {
    this.clear()
  }
  clear = () => {
    clearTimeout(this.timer)

    this.setState({
      loading: false,
      totalSecond: 60
    })
  }
  setTime = () => {
    const { totalSecond } = this.state
    if (totalSecond <= 0) {
      this.clear()
      return
    }
    this.setState({
      totalSecond: totalSecond - 1
    })
    this.timer = setTimeout(() => {
      this.setTime()
    }, 1000)
  }
  onFetch = () => {
    this.setState(() => ({ loading: true }))
    this.setTime()
  }
  render() {
    const { loading, btnText, totalSecond } = this.state
    return (
      <button disabled={loading} onClick={this.onFetch}>
        {!loading ? btnText : `请等待${totalSecond}秒..`}
      </button>
    )
  }
}

我们可能很快就写出来两个这样的组件。使用 setTimeout 还是 setInterval 区别不是特别大。但是我会更推荐 setTimeout 因为万物皆递归（逃）

不过，又有更高的要求了。可以看到刚刚我们的获取验证码。如果说再有一个页面有相同的需求，只能将组件完全再拷贝一遍。这肯定不合适嘛。

那咋办嘛？

方案三参数提取到 Props 1

import React from "react";
class LoadingButtonProps extends React.Component {
  constructor(props) {
    super(props);
    this.initState = {
      loading: false,
      btnText: this.props.btnText || "获取验证码",
      totalSecond: this.props.totalSecond || 60
    };
    this.state = { ...this.initState };
  }
  timer = null;
  componentWillUnmount() {
    this.clear();
  }
  clear = () => {
    clearTimeout(this.timer);
    this.setState({
      ...this.initState
    });
  };
  setTime = () => {
    const { totalSecond } = this.state;
    if (totalSecond <= 0) {
      this.clear();
      return;
    }
    this.setState({
      totalSecond: totalSecond - 1
    });
    this.timer = setTimeout(() => {
      this.setTime();
    }, 1000);
  };
  onFetch = () => {
    const { loading } = this.state;
    if (loading) return;
    this.setState(() => ({ loading: true }));
    this.setTime();
  };
  render() {
    const { loading, btnText, totalSecond } = this.state;
    return (
      <button disabled={loading} onClick={this.onFetch}>
        {!loading ? btnText : `请等待${totalSecond}秒..`}
      </button>
    );
  }
}

class LoadingButtonProps1 extends React.Component {
  render() {
    return <LoadingButtonProps btnText={"获取验证码1"} totalSecond={10} />;
  }
}
class LoadingButtonProps2 extends React.Component {
  render() {
    return <LoadingButtonProps btnText={"获取验证码2"} totalSecond={20} />;
  }
}

export default () => (
  <div>
    <LoadingButtonProps1 />
    <LoadingButtonProps2 />
  </div>
);

对于上面的需求，不就是复用嘛，看我 props 提取到公共父组件一把梭搞定！
想想好像还挺美的。。

结果这时候需求变更来了：

第一点：两个地方获取验证码的api不一样。第二点：我需要在获取验证码之前做一些别的事情

挠了挠头，那咋办嘛？

方案四参数提取到 Props 2

import React from 'react'

class LoadingButtonProps extends React.Component {
  // static defaultProps = {
  //   loading: false,
  //   btnText: '获取验证码',
  //   totalSecond: 10,
  //   onStart: () => {},
  //   onTimeChange: () => {},
  //   onReset: () => {}
  // }
  timer = null
  componentWillUnmount() {
    this.clear()
  }
  clear = () => {
    clearTimeout(this.timer)
    this.props.onReset()
  }
  setTime = () => {
    const { totalSecond } = this.props
    console.error(totalSecond)
    if (this.props.totalSecond <= 0) {
      this.clear()
      return
    }
    this.props.onTimeChange()
    this.timer = setTimeout(() => {
      this.setTime()
    }, 1000)
  }
  onFetch = () => {
    if (this.loading) return
    this.setTime()
    this.props.onStart()
  }
  render() {
    return <div onClick={this.onFetch}>{this.props.children}</div>
  }
}

class LoadingButtonProps1 extends React.Component {
  totalSecond = 10
  state = {
    loading: false,
    btnText: '获取验证码1',
    totalSecond: this.totalSecond
  }
  onTimeChange = () => {
    const { totalSecond } = this.state
    this.setState(() => ({ totalSecond: totalSecond - 1 }))
  }
  onReset = () => {
    this.setState({
      loading: false,
      totalSecond: this.totalSecond
    })
  }
  onStart = () => {
    this.setState(() => ({ loading: true }))
  }
  render() {
    const { loading, btnText, totalSecond } = this.state
    return (
      <LoadingButtonProps
        loading={loading}
        totalSecond={totalSecond}
        onStart={this.onStart}
        onTimeChange={this.onTimeChange}
        onReset={this.onReset}
      >
        <button disabled={loading}>
          {!loading ? btnText : `请等待${totalSecond}秒..`}
        </button>
      </LoadingButtonProps>
    )
  }
}
class LoadingButtonProps2 extends React.Component {
  totalSecond = 15
  state = {
    loading: false,
    btnText: '获取验证码2',
    totalSecond: this.totalSecond
  }
  onTimeChange = () => {
    const { totalSecond } = this.state
    this.setState(() => ({ totalSecond: totalSecond - 1 }))
  }
  onReset = () => {
    this.setState({
      loading: false,
      totalSecond: this.totalSecond
    })
  }
  onStart = () => {
    this.setState(() => ({ loading: true }))
  }
  render() {
    const { loading, btnText, totalSecond } = this.state
    return (
      <LoadingButtonProps
        loading={loading}
        totalSecond={totalSecond}
        onStart={this.onStart}
        onTimeChange={this.onTimeChange}
        onReset={this.onReset}
      >
        <button disabled={loading}>
          {!loading ? btnText : `请等待${totalSecond}秒..`}
        </button>
      </LoadingButtonProps>
    )
  }
}
export default () => (
  <div>
    <LoadingButtonProps1 />
    <LoadingButtonProps2 />
  </div>
)

嗯？等等。。所以说这样的操作只共用了时间递归减少的部分吧？好像重复代码有点多哇，感觉和老版本也没什么太大的区别嘛。

那咋办嘛？

方案五试试 HOC

import React from 'react'

function loadingButtonHoc(WrappedComponent, initState) {
  return class extends React.Component {
    constructor(props) {
      super(props)
      this.initState = initState || {
        loading: false,
        btnText: '获取验证码',
        totalSecond: 60
      }
      this.state = { ...this.initState }
    }
    timer = null

    componentWillUnmount() {
      this.clear()
    }
    clear = () => {
      clearTimeout(this.timer)

      this.setState({
        ...this.initState
      })
    }
    setTime = () => {
      const { totalSecond } = this.state
      if (totalSecond <= 0) {
        this.clear()
        return
      }
      this.setState({
        totalSecond: totalSecond - 1
      })
      this.timer = setTimeout(() => {
        this.setTime()
      }, 1000)
    }
    onFetch = () => {
      const { loading } = this.state
      if (loading) return
      this.setState(() => ({ loading: true }))
      this.setTime()
    }
    render() {
      const { loading, btnText, totalSecond } = this.state
      return (
        <WrappedComponent
          {...this.props}
          onClick={this.onFetch}
          loading={loading}
          btnText={btnText}
          totalSecond={totalSecond}
        />
      )
    }
  }
}
class LoadingButtonHocComponent extends React.Component {
  render() {
    const { loading, btnText, totalSecond, onClick } = this.props
    return (
      <button disabled={loading} onClick={onClick}>
        {!loading ? btnText : `请等待${totalSecond}秒..`}
      </button>
    )
  }
}
const LoadingButtonHocComponent1 = loadingButtonHoc(LoadingButtonHocComponent, {
  loading: false,
  btnText: '获取验证码Hoc1',
  totalSecond: 20
})
const LoadingButtonHocComponent2 = loadingButtonHoc(LoadingButtonHocComponent, {
  loading: false,
  btnText: '获取验证码Hoc2',
  totalSecond: 12
})
export default () => (
  <div>
    <LoadingButtonHocComponent1 />
    <LoadingButtonHocComponent2 />
  </div>
)

我们使用高阶组件再次重写了整个逻辑。好像基本上需求都满足了？
这个地方思路在于，将 onClick 或者叫做 onStart 事件暴露出来了，最终的执行，
都是由外部组件自行决定执行时机，那么其实不管怎么搞都可以了

方案六 renderProps


import React from 'react'
class LoadingButtonRenderProps extends React.Component {
  constructor(props) {
    super(props)
    this.initState = {
      loading: false,
      btnText: this.props.btnText || '获取验证码',
      totalSecond: this.props.totalSecond || 60
    }
    this.state = { ...this.initState }
  }
  timer = null

  componentWillUnmount() {
    this.clear()
  }
  clear = () => {
    clearTimeout(this.timer)

    this.setState({
      ...this.initState
    })
  }
  setTime = () => {
    const { totalSecond } = this.state
    if (totalSecond <= 0) {
      this.clear()
      return
    }
    this.setState({
      totalSecond: totalSecond - 1
    })
    this.timer = setTimeout(() => {
      this.setTime()
    }, 1000)
  }
  onFetch = () => {
    const { loading } = this.state
    if (loading) return
    this.setState(() => ({ loading: true }))
    this.setTime()
  }
  render() {
    const { loading, btnText, totalSecond } = this.state
    return this.props.children({
      onClick: this.onFetch,
      loading: loading,
      btnText: btnText,
      totalSecond: totalSecond
    })
  }
}
class LoadingButtonRenderProps1 extends React.Component {
  render() {
    return (
      <LoadingButtonRenderProps btnText={'获取验证码RP1'} totalSecond={15}>
        {({ loading, btnText, totalSecond, onClick }) => (
          <button disabled={loading} onClick={onClick}>
            {!loading ? btnText : `请等待${totalSecond}秒..`}
          </button>
        )}
      </LoadingButtonRenderProps>
    )
  }
}
class LoadingButtonRenderProps2 extends React.Component {
  render() {
    return (
      <LoadingButtonRenderProps btnText={'获取验证码RP1'} totalSecond={8}>
        {({ loading, btnText, totalSecond, onClick }) => (
          <button disabled={loading} onClick={onClick}>
            {!loading ? btnText : `请等待${totalSecond}秒..`}
          </button>
        )}
      </LoadingButtonRenderProps>
    )
  }
}

export default () => (
  <div>
    <LoadingButtonRenderProps1 />
    <LoadingButtonRenderProps2 />
  </div>
)

嘿嘿，我们使用了 render Props 重写了在 Hoc 上实现的功能。个人角度看，其实比Hoc 会简洁也优雅很多！

方案七 React Hooks

import React, { useState, useEffect, useRef, useCallback } from 'react'
function LoadingButtonHooks(props) {
  const timeRef = useRef(null)
  const [loading, setLoading] = useState(props.loading)
  const [btnText, setBtnText] = useState(props.btnText)
  const [totalSecond, setTotalSecond] = useState(props.totalSecond)
  const countRef = useRef(totalSecond)
  const clear = useCallback(() => {
    clearTimeout(timeRef.current)
    setLoading(false)
    setTotalSecond(props.totalSecond)
    countRef.current = props.totalSecond
  })
  const setTime = useCallback(() => {
    if (countRef.current <= 0) {
      clear()
      return
    }
    countRef.current = countRef.current - 1
    setTotalSecond(countRef.current)

    timeRef.current = setTimeout(() => {
      setTime()
    }, 1000)
  })
  const onStart = useCallback(() => {
    if (loading) return
    countRef.current = totalSecond
    setLoading(true)
    setTime()
  })

  useEffect(() => {
    return () => {
      clearTimeout(timeRef.current)
    }
  }, [])
  return (
    <button disabled={loading} onClick={onStart}>
      {!loading ? btnText : `请等待${totalSecond}秒..`}
    </button>
  )
}
LoadingButtonHooks.defaultProps = {
  loading: false,
  btnText: '获取验证码',
  totalSecond: 10
}
export default () => (
  <div>
    <LoadingButtonHooks
      loading={false}
      btnText={'获取验证码hooks1'}
      totalSecond={10}
    />
    <LoadingButtonHooks
      loading={false}
      btnText={'获取验证码hooks2'}
      totalSecond={11}
    />
  </div>
)

我们使用 hooks 重写了整个程序，它让我们把ui和状态更明确的区分开，也去解决了一些 renderProps 在多层嵌套时的jsx 嵌套地狱问题，当然个人感觉在这个例子上好像 Hooks 与 renderProps 版本是差别不大的。

方案八 uesHooks

import React, { useState, useEffect, useRef, useCallback } from 'react'
function useLoadingTimer(initState) {
  const timeRef = useRef(null)
  const [loading, setLoading] = useState(initState.loading)
  const [btnText, setBtnText] = useState(initState.btnText)
  const [totalSecond, setTotalSecond] = useState(initState.totalSecond)
  const countRef = useRef(totalSecond)
  const clear = useCallback(() => {
    clearTimeout(timeRef.current)
    setLoading(false)
    setTotalSecond(initState.totalSecond)
    countRef.current = initState.totalSecond
  })
  const setTime = useCallback(() => {
    if (countRef.current <= 0) {
      clear()
      return
    }
    countRef.current = countRef.current - 1
    setTotalSecond(countRef.current)

    timeRef.current = setTimeout(() => {
      setTime()
    }, 1000)
  })
  const onStart = useCallback(() => {
    if (loading) return
    countRef.current = totalSecond
    setLoading(true)
    setTime()
  })

  useEffect(() => {
    return () => {
      clearTimeout(timeRef.current)
    }
  }, [])
  return {
    onStart,
    loading,
    totalSecond,
    btnText
  }
}
const LoadingButtonHooks1 = () => {
  const { onStart, loading, totalSecond, btnText } = useLoadingTimer({
    loading: false,
    btnText: '获取验证码UseHooks1',
    totalSecond: 10
  })
  return (
    <button disabled={loading} onClick={onStart}>
      {!loading ? btnText : `请等待${totalSecond}秒..`}
    </button>
  )
}
const LoadingButtonHooks2 = () => {
  const { onStart, loading, totalSecond, btnText } = useLoadingTimer({
    loading: false,
    btnText: '获取验证码UseHooks2',
    totalSecond: 10
  })
  return (
    <button disabled={loading} onClick={onStart}>
      {!loading ? btnText : `请等待${totalSecond}秒..`}
    </button>
  )
}
export default () => (
  <div>
    <LoadingButtonHooks1 />
    <LoadingButtonHooks2 />
  </div>
)

当然，更解耦的做法是，把 hooks 完全独立的提取出来成 useHooks ，最后我们再编写组件去组合 uesHooks。

在上述的例子中我们在 react 中用了 8 种不同的方案，去描述了同一个功能的编写过程。有一点 “回” 字的多种写法的意味。不过他也代表着 react 社区在选择实现上的思想的变化过程，我觉得谈不上某一个方案，一定就完全比另外一个好。社区也有比如 HOC vs renderProps 的很多讨论。

仅以此希望大家能够辩证的去看这个过程，也希望能够在大家编写 React 组件时带来更多的新思路。

参考链接：

React 中文官网 Hook 简介

一个使用 react 的思想去使用 vue 的方式

三省吾身丶丶

作者 guowenfh

2019年4月28日 12:00

有一个 react 开发者问我 vue 如何上手开发？然后我是这么和他描述的。。
用 react 的思想去考虑 vue 要怎么写。
本文很水。而且将来感觉一定会被打脸，期待那一天到来。

其实也就几块

你可以把 template 就看成 react 的 render 就是写法有一些不一样，看一下 vue 的指令就可以了，当然也可以直接用 render function
data 的话和 react 的 state 也没什么区别 , 只不过赋值方式变成了 this.setState({text:’state’}) this.text = ‘state’ （vue 有一个坑，数组里面 data: [{a:1}] 使用 this.data[0].b = 1 => data”:[{a:1,b:1}] 新增了一个b字段这样是不会刷新页面的。react 不会有这个问题（至于怎么刷新，这个就先你自己去看文档把哈哈哈（底层实现不考虑
methods 对应的就是 react 中 class componnet 中直接写上去的方法 onMenuClick = () => {} 这种（vue里面不需要箭头函数
事件监听的话 @click=”onMenuClick” 和 react 中的 onClick={this.onMenuClick} 也没什么区别
生命周期 mounted 和 react 中的 componentDidMount 也基本一致（周期里面就这个最重要了当然还有 wtach需要看一下
computed 正确的使用方式，其实就是一个纯函数，在里面写有副作用的内容，对可维护性是一个灾难（自动计算，实际上不用也没关系（react里面就没有
其他的就是 props components 这两个了，用法是一样的，但是得手动声明一下，按照文档来就可以
路由，vue 的路由其实更好理解，react-route@4 + react-route-config 使用上基本也一致。只不过 router-view 换成了 renderRoutes
剩下的部分其实就照着文档看看就行拉 https://cn.vuejs.org/v2/api/#components

然后在组内问了一下大家的看法

Q：感觉写vue和react的思维方式不太一样?
A：大的说的话，一个是函数式，一个是响应式。

Q：vue比较符合常人的思维，比较好上手。同时意味着，不如react的方法抽象。watch就很有意思。
A：watch 是一个双刃剑吧。确实很方便…不过也容易写出来不易读或者性能很差的代码。

Q：React 的生命周期component WillReceiveProps可以拿到nextProps 这样的参数，父组件参数改变时，子组件方便监听并特殊处理。vue 中通过computed 监听数据变化并处理，感觉怪怪的
A：其实 componentWillReceiveProps 即将被废弃了。。。不过这个需求确实是有的，也就是父组件和子组件其实都有一份state，并且父组件的状态更改会影响子组件的state 更改的情况。 vue里面应该这个用 watch 会比较多，结合上面，其实还是建议 computed 使用纯函数，如果是纯函数的话，那么就不能去改子组件的 state 了（state 改成 data 也是一样。

Q：Vue 通过 getter/setter 以及一些函数的劫持，能精确知道数据变化，不需要特别的优化就能达到的性能
React 默认是通过比较引用的方式进行的，如果不优化（PureComponent/shouldComponentUpdate）可能导致大量不必要的VDOM的重新渲染
A：嗯…有点偏题。一个新人学 vue 进来应该不会考虑这个？不过基本没错

Q：computed是实现y = f（x），因变量只能通过这个函数得到才能用 computed吧，否则应该是有问题的。
A：虽然是这么说，但是你看了主站的代码就知道，这个其实不是一个强绑定。主站里面 computed 里面做有副作用的事情，也有好多- -，不是一个好的实践。（我上面说的是建议只当成纯函数来用

下一篇，

《在 vue 中使用 jsx 与 class component 的各种姿势》

从一个简单的实例看 JavaScript 的异步编程进化历

三省吾身丶丶

作者 guowenfh

2018年9月3日 14:32

回调地狱

很久没有进行过创作了，也感觉到了自己的不足。这一篇文章是对于 JavaScript 异步编程的一个整理
希望自己更多的成为一个创造者，而不是只会看，会用，还需要深入理解到原理吧。

例子如下：

我们有 A, B, C, D 四个请求获取数据的函数（函数自己实现），
C 依赖 B 的结果，D 依赖 ABC 的结果，最终输出 D 的结果。

版本一

// 伪代码
function A(callbak) {
  ajax(url, function(res) {
    callbak(res);
  });
}
function B(callbak) {
  ajax(url, function(res) {
    callbak(res);
  });
}
function C(data, callback) {
  ajax(url, data, function(res) {
    callbak(res);
  });
}
function D(data1, data2, data3, callback) {
  ajax(url, { data1, data2, data3 }, function(res) {
    callbak(res);
  });
}

A(function(resa) {
  B(function(resb) {
    C(resb, function(resc) {
      D(resa, resb, resc, function(resd) {
        console.log("this is D result:", resd);
      });
    });
  });
});

emm…代码还是能运行，但是写法丑陋，回调地狱，如果还有请求依赖，得继续回调嵌套
性能太差，没有考虑 A 和 B 实际上是可以并发的。

例子二

函数基础实现如同例子一，但是考虑 A,B 可以并发的。

// 伪代码
let resa = null;
let timer = null;

A(res => {
  resa = res;
});

B(resb => {
  C(resb, resc => {
    timer = setInterval(() => {
      if (resa) {
        D(resa, resb, resc, resd => {
          console.log("this is D result:", resd);
          timer && clearInterval(timer);
        });
      }
    }, 100);
  });
});

考虑了 A,B 的并发，使用 setInterval 轮询实现，并不一定实时。性能太差。

例子三

// 伪代码
let count = 2;
let resa = null;
let resb = null;
let resc = null;
function done() {
  count--;
  if (count === 0) {
    D(resa, resb, resc, resd => {
      console.log("this is D result:", resd);
    });
  }
}

A(res => {
  resa = res;
  done();
});
B(datab => {
  C(datab, datac => {
    resb = datab;
    resc = datac;
    done();
  });
});

使用计数器实现。性能没什么问题，但是封装太差，写法恶心。

例子四

// 实现并发
function parallel(tasks, callback) {
  let count = tasks.length;
  let all = [];
  tasks.forEach((fn, index) => {
    fn(res => {
      all[index] = res;
      count--;
      if (count === 0) {
        callback(all);
      }
    });
  });
}
// 实现串行
function waterfall(tasks, callback) {
  let count = tasks.length;
  function loop(...args) {
    let task = tasks.shift();
    task.apply(
      null,
      args.concat([
        (...res) => {
          count--;
          if (count === 0) {
            return callback(res);
          }
          loop(...res);
        }
      ])
    );
  }
  loop();
}
function A(cb = () => {}) {
  setTimeout(() => {
    cb("a");
  }, 2000);
}
function B(cb = () => {}) {
  setTimeout(() => {
    cb("b");
  }, 1000);
}
function C(datab, cb = () => {}) {
  setTimeout(() => {
    cb(datab, "c");
  }, 1000);
}
function D(data, datab, datac, cb = () => {}) {
  cb("d");
}
parallel(
  [
    A,
    cb => {
      waterfall([B, C], (datab, datac) => {
        cb(datab, datac);
      });
    }
  ],
  data => {
    const [resa, [resb, resc]] = data;
    D(resa, resb, resc, resd => {
      console.log("this is D result:", resd);
    });
  }
);

模仿 async.js 提炼出来了 waterfall，parallel，两个流程控制函数。还不错。
但是写法还是麻烦，对于 A,B,C 的实现有要求。得自己考虑好每一次 callback 的值。

async.js 是我认为在目前 JavaScript callback 的终极解决方案了（没用过 fib.js..

推荐查看 github async.js 源码。

waterfall 可以考虑使用函数式的形式实现：

function pipe(...fnList) {
  return function(...args) {
    const fn = fnList.reduceRight(function(a, b) {
      return function(...subArgs) {
        return b.apply(this, [].concat(subArgs, a));
      };
    });
    return fn.apply(this, args);
  };
}

例子五

function A() {
  return fetch("http://google.com");
}
function B() {}
function C() {}
function D() {}

Promise.all[(A(), B().then(b => C(b)))]
  .then(([resa,{resb,resc}) => {
    return D(resa,resb,resc);
  })
  .then(resd => {
    console.log("this is D result:", resd);
  });

使用 Promise 来代替之前的 callback。好评。
用 Promise.all 来控制并发，使用 .then 串行请求，整体看起来非常舒服了，脱离了回调地狱。

例子六

function A(cb) {
  setTimeout(() => {
    cb("a");
  }, 2000);
}
function B(cb) {
  setTimeout(() => {
    cb("b");
  }, 1000);
}
function C(datab, cb) {
  setTimeout(() => {
    cb("c");
  }, 1000);
}
function D(dataa, datab, datac, cb) {
  setTimeout(() => {
    cb("d");
  }, 1000);
}
function thunk(fn) {
  return function(...args) {
    return function(callback) {
      fn.call(this, ...args, callback);
    };
  };
}
function scheduler(fn) {
  var gen = fn();

  function next(data) {
    var result = gen.next(data);
    if (result.done) return;
    // 如果没结束就继续执行
    result.value(next);
  }

  next();
}

// generator 实际代码
function* generatorTask() {
  const resa = yield thunk(A)();
  const resb = yield thunk(B)();
  const resc = yield thunk(C)(resb);
  const resd = yield thunk(D)(resa, resb, resc);
  console.log("this is D result:", resd);
  return null;
}

scheduler(generatorTask);

使用 generator + callback 来控制流程顺序，还是同步写法，看起来还是挺牛逼的。
但是 generator 不会自动执行，需要自己手动写一个执行器，并且依赖于 thunk 函数。麻烦！
等等。。又全变成了串行？垃圾

例子七

function A() {
  return new Promise(r =>
    setTimeout(() => {
      r("a");
    }, 2000)
  );
}
function B() {
  return new Promise(r =>
    setTimeout(() => {
      r("b");
    }, 1000)
  );
}
function C(datab) {
  return new Promise(r =>
    setTimeout(() => {
      r("c");
    }, 1000)
  );
}
function D(dataa, datab, datac) {
  return new Promise(r =>
    setTimeout(() => {
      r("d");
    }, 1000)
  );
}
function scheduler(fn) {
  var gen = fn();

  function next(data) {
    var result = gen.next(data);
    if (result.done) return;
    // 如果没结束就继续执行
    result.value.then(next);
  }

  next();
}

// generator 实际代码
function* generatorTask() {
  const [resa, { resb, resc }] = yield Promise.all([
    A(),
    B().then(resb => C(resb).then(resc => ({ resb, resc })))
  ]);
  const resd = yield D(resa, resb, resc);
  console.log("this is D result:", resa, resb, resc, resd);
  return resd;
}

scheduler(generatorTask);

抛弃了 thunk 函数，修改了一下 A，B，C，D。的实现以及 generator 执行函数 scheduler。结合了 Promise 重新实现了并发和串行。
再等等？？好麻烦啊。。然后并发好像和 generator 没什么关系吧。果然还是 Promise 大法好。

关于 generator 的自动执行建议直接看 github tj/co 的源码。

例子八

function A() {
  return fetch("http://google.com");
}
// ...B,C,D
async function asyncTask() {
  const resa = await A();
  const resb = await B();
  const resc = await C(resb);
  const resd = await D(resa, resb, resc);
  return resd;
}

asyncTask().then(resd => {
  console.log("this is D result:", resd);
});

使用 Promise 结合 async/await 的形式，看起来非常简洁。也不用自己写执行器了，舒服。
但是和上面有几个版本出现了一样的问题，没有考虑并发的情况，导致性能下降。

例子九，终极方案？

// ...B,C,D
async function asyncBC() {
  const resb = await B();
  const resc = await c(resb);
  return { resb, resc };
}
async function asyncTask() {
  // const [resa,{resb,resc}] = await Promise.all([A(), B().then(resb=>C(resb)]);
  const [resa, { resb, resc }] = await Promise.all([A(), asyncBC()]);
  const resd = await D(resa, resb, resc);
  return resd;
}
asyncTask().then(resd => {
  console.log("this is D result:", resd);
});

使用 Promise.all 结合 async/await 的形式，考虑了并发和串行，写法简洁。
应该算是目前的终极方案了。 async/await 作为 generator 语法糖还是非常的甜的。

例子十使用 RxJs

import { defer, forkJoin } from "rxjs";
import { mergeMap, map } from "rxjs/operators";

function A() {
  return fetch("https://cnodejs.org/api/v1/topics").then(res => res.json());
}
function B() {
  return fetch("https://cnodejs.org/api/v1/topics").then(res => res.json());
}
function C() {
  return fetch("https://cnodejs.org/api/v1/topics").then(res => res.json());
}
function D(...args) {
  return fetch("https://cnodejs.org/api/v1/topics")
    .then(res => res.json())
    .then(res => [...args, res]);
}
// A, B, C, D 函数必须返回 Promise
// 使用 defer 产生一个 Observable
const A$ = defer(() => A());
// pipe 类型 Promise 链中 的 then
const BC$ = defer(() => B()).pipe(
  // mergeMap 映射成 promise 并发出结果
  mergeMap(resB => {
    // 使用 map 产生新值
    return defer(() => C(resB)).pipe(map(resC => [resB, resC]));
  })
);

// forkJoin 类似 Promise.all 并发执行多个 Observable
forkJoin(A$, BC$)
  .pipe(mergeMap(([resa, [resb, resc]]) => D(resa, resb, resc)))
  .subscribe(resd => {
    console.log("this is D result:", resd); // <------- fnD 返回的结果
  });

使用 rxjs 来构建流式的请求过程。结构还是非常清晰的，但是相对繁琐，概念也比原生的 Promise 和 await 要多

不过 rxjs 操作符巨多，掌握之后，可以做更多的事情

结语：

从上面几个例子我们可以窥探到 JavaScript 对于异步编程体验的一个非常大的进步。

但是同时我们其实可以看到不论是 generator 还是 async/await。其实更多的是基于 Promise 之上的一些语法简化。
没有从 callback 过渡到 Promise 的时候那种真正心灵上的愉悦。

感谢 @墨水之前在内部分享提供的 demo 版本。

中文播客推荐

三省吾身丶丶

作者 guowenfh

2018年6月16日 15:20

从大学时期听书开始，慢慢接触到更多的播客。听一些人讲故事，讲技术，感觉也是一个非常不错的了解世界的途径。已经成为我生活中的一部分。不过从身边感觉到播客还是比较小众的。于是想推荐一下我在听的一些播客吧。
引用一句《内核恐慌》的话作为推荐语：“我们虽然号称 Hacker ，但是也没有干货，想听的人就听，不想听的人就别听。”

推荐播客客户端： Moon FM，播客，小宇宙，player.fm

IT 技术主题

《内核恐慌》

内核恐慌

《内核恐慌》(Kernel Panic) 是吴涛和 Rio 做的播客，首播于 2014 年 10 月。号称硬核，可也没什么干货。想听的人听，不想听的人就别听。

普通视图

方案一 使用 setInterval

方案二 使用 setTimeout

方案三 参数提取到 Props 1

方案四 参数提取到 Props 2

方案五 试试 HOC

方案六 renderProps

方案七 React Hooks

方案八 uesHooks

版本一

例子二

例子三

例子四

例子五

例子六

例子七

例子八

例子九，终极方案？

例子十 使用 RxJs

IT 技术主题

《内核恐慌》

《Teahour.fm》

《代码时间》【已停更】

ggtalk

商业科技相关

《疯投圈》

比特新声

迟早更新

字谈字畅

声东击西

Checked 【已停更】

《IT 公论》

WEB VIEW

枫言枫语

看看世界

博物志

灭茶苦茶

一天世界

海螺电台

心理学相关

得意忘形

Blow Your Mind

知识型

狗熊有话说

杂项

UX Coffee 设计咖

太医来了

黑水公园

前言

API

绘制方块

设置绘图样式

边界绘制

绘制路径

绘制弧

状态的保存与恢复

变换

实例

画板

旋转的小方块

时钟

基础介绍

session 模块

在 BrowserWindow 中

在 webview 中

店铺切换

登陆窗口

切换用户

多 webview 聊天窗口

一. HTML文档标签

二. 布局标签&语义化

三. 表格标签

四. 表单标签

五. 列表标签

六. 图像&链接标签

七. 音频/视频

八. 框架标签

九.格式标签

1. 文章标签

2. 短语元素标签

方案一使用 setInterval

方案二使用 setTimeout

方案三参数提取到 Props 1

方案四参数提取到 Props 2

方案五试试 HOC

例子十使用 RxJs