使用 Hooks 进行异步编程

本文摘选自 Rax 官网 rax.js.org

介绍

Javascript 是一个单线程的编程语言，单线程的特点就是一次只能处理一件事情，当前代码任务耗时执行会阻塞后续代码的执行。异步编程则是一种事件驱动编程，请求调用函数或方法后，无需立即等待响应，可以继续执行其他任务，而之前任务响应返回后可以通过状态、通知和回调来通知调用者。

异步编程方法

js 中的异步编程方法有回调函数、事件处理函数、观察者、Promise、Generator、async等，接下来看下在 Rax 中常用的异步编程方法。

回调函数

import { createElement, render, useState, useEffect } from 'rax';
import View from 'rax-view';
import Text from 'rax-text';

function App() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    setCount(count + 1);
  }, []);
  return (
    <View>
      <Text >Hello Rax {count}!</Text> 
    </View>
  );
}

export default App;

我们在 useEffect 这个 effect hook 中，传入 callback，当组件 mount 时调用该 callback，设置 count ，并使用 state hook 更新本地 state。这就是 Rax 中一个常用的回调使用方式。

事件处理函数

import { createElement, render, useState, useEffect } from 'rax';
import View from 'rax-view';
import Text from 'rax-text';

function App() {
  const [count, setCount] = useState(1);

  function showAlert() {
    setTimeout(() => {
      alert('You clicked on: ' + count);
    }, 3000);
  }

  return (
    <View>
      <Text onClick={() => setCount(count + 1)}>Add count: You clicked {count} times</Text> 
      <Text onClick={showAlert}>Hello Rax，show alert!</Text> 
    </View>
  );
}

export default App;

如果我们按照以下步骤操作：

点击增加 count 到 2
点击 show alert
马上点击增加 count 到 3

此时 alert 弹出的 count 值还是为 2。alert 会取到点击时 count 的状态，其实组件函数在每次渲染时都会被调用，但是在每次调用中 count 值都是常量，并被赋值为当前渲染中的状态值。其实普通函数也是如此，多次调用函数传入不同的参数，那么函数的每次调用也是取到传入的参数值。

Promise

import { createElement, render, useState, useEffect } from 'rax';
import request from 'universal-request';
import Text from 'rax-text';

function App() {
  const [value, setValue] = useState(1);

  useEffect(() => {
    function getValue() {
      request({
        url: 'https://httpbin.org/post',
        method: 'POST',
        headers: {
          'Access-Control-Allow-Origin': '*'
        },
        data: {
          value: 'Rax'
        },
        timeout: 5000
      }).then((result) => {
        const data = JSON.parse(result.data.data);
		// setValue
        setValue(data.value);
      }).catch((error) => {
      });
    }
    getValue();
  }, []);

  return (
    <Text>Current value: {value}</Text> 
  );
}

export default App;

通过一个网络请求的例子已经很好的展示了 Promise 的使用方式，当首次 mount 之后发送请求，获得数据之后改变本地 state，触发再次 render。Promise 也解决了回调地狱的问题，对并发执行很友好。当我们的异步操作任务较多时，会发现需要不断的使用书写 useEffect 等，增加了代码量，此时我们可以抽离成自定义 hook ,只得到我们关心的数据。

import { useEffect, useState } from 'rax';

export default function usePromise(promise) {
  const [error, setError] = useState(null);
  const [result, setResult] = useState(null);

  useEffect(
    () => {
      let canceled = false;

      promise
        .then(r => {
          if (!canceled) {
            setResult(r);
          }
        })
        .catch(e => {
          if (!canceled) {
            setError(e);
          }
        });

      return () => {
        canceled = true;
      };
    },
    [promise]
  );

  return [result, error];
}

自定义 hook usePromise，将 promise 作为参数，并对组件销毁时做了处理，usePromise 已经作为 npm 包 rax-use-promise 发布。此时我们再使用网络请求时，只需要调用 usePromise 并获取返回的 data 与 error 即可。

import { createElement, render,  useState, useEffect, useMemo } from 'rax';
import usePromise from 'rax-use-promise';
import request from 'universal-request';
import Text from 'rax-text';

const getValue = () =>request({
  url: 'https://httpbin.org/post',
  method: 'POST',
  headers: {
	'Access-Control-Allow-Origin': '*'
  },
  data: {
	value: 'Rax'
  },
  timeout: 5000
}).then(result => JSON.parse(result.data.data));

function App() {
  const [data, error] = usePromise(useMemo(getValue));
  return (
    <Text>Current value: {data.value}</Text> 
  );
}

export default App;

参考

Hooks

rax-use-promise