234 - 《极简交互的极致体验》

想象一个场景，一个显示随机数的按钮，其内容来自远程服务器，按钮点击后会再次请求服务器更新随机数，你会怎么做？又有哪些可以优化的点来把这个交互做到极致？

通常大家拍脑袋想到的会是，

1、loading 状态的处理
2、异常状态的处理

但其实还有很多其他的。而用 React 原生实现通常就是用 useState 存数字 + useEffect 发请求 + useReducer 强制更新，代码如下。

const [key, forceUpdate] = useReducer(x => x + 1, 0);
const [num, setNum] = useState<string>();
const [loading, setLoading] = useState(false);
const [error, setError] = useState("");

useEffect(() => {  
  setLoading(true);
  fetchNumber()
    .then((random) => {
      setLoading(false);
      setNum(random);
    }).catch((error) => {
      setError(error.message);
    });
}, [key]);

if (error) return <p>{error}</p>;
return <button onClick={forceUpdate}>Random number: {loading ? "..." : num}</button>;

这段代码没啥大问题，但如果要精益求精，可以从哪些点出发去优化这段交互呢？

1、loading 处理。 目前 loading