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