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

发布于 2022年12月27日

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

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

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

内容预览已结束

此内容需要会员权限。请先登录以查看完整内容。