有时候，我们必须在react状态下管理状态。
比如我们有一个提交表单，我们要管理表单的状态。
表达状态的方式有很多种。
我会介绍一下表达身份的坏例子。
坏榜样
1、用物体来表达状态。
const page = () => { const [status, setstatus] = usestate({ loading: false, error: false, success: false }); const fetchuser = async () => { setstatus({ loading: true, error: false, success: false }); try { const user = await api.getuser(); setstatus({ loading: false, error: false, success: true }); } catch (e) { setstatus({ loading: false, error: true, success: false }); } }; return ( {status.loading && loading...} {status.error && error...} {status.success && success...} 这是一个不好的例子，因为状态非常复杂。
当您更新状态时，您必须更新所有状态。
此示例中只有三种状态模式。
// loadingsetstatus({ loading: true, error: false, success: false });// successsetstatus({ loading: false, error: false, success: true });// errorsetstatus({ loading: false, error: true, success: false });
但是当你用一个对象来表达状态时，读者无法理解只有三种模式。
所以这是一个坏例子。
2.用索引来表示状态。
const page = () => { const [status, setstatus] = usestate(3); const [user, setuser] = usestate(null); const fetchuser = async () => { setstatus(0); try { const user = await api.getuser(); setuser(user); setstatus(2); } catch (e) { setstatus(1); } }; const reset = () => { setuser(null); setstatus(3); }; return ( {status === 0 &&
loading...
} {status === 1 &&
error...
} {status === 2 &&
{user?.name}
}
这是一个非常简单的例子。
但这个例子也有一个问题。
当你使用索引来表达状态时，你必须记住状态号。
如果您需要添加新状态，则必须更新所有状态编号。
所以，这也不是一个好例子。
3.为每个状态创建状态。
const page = () => { const [loading, setloading] = usestate(false); const [error, seterror] = usestate(false); const [success, setsuccess] = usestate(false); const [user, setuser] = usestate(null); const fetchuser = async () => { setloading(true); try { const user = await api.getuser(); setuser(user); setsuccess(true); } catch (e) { seterror(true); } }; const reset = () => { setuser(null); setloading(false); seterror(false); setsuccess(false); }; return ( {loading &&
loading...
} {error &&
error...
} {success &&
{user?.name}
}
这也不是一个好例子。
你必须一直管理函数中的所有状态。
如果您忘记更新状态，这将是一个错误。
重置功能也很复杂。
推荐
使用字符串来表达状态。
const Page = () => { const [status, setStatus] = useState('idle'); const [user, setUser] = useState(null); const fetchUser = async () => { setStatus('loading'); try { const user = await api.getUser(); setUser(user); setStatus('success'); } catch (e) { setStatus('error'); } }; const reset = () => { setUser(null); setStatus('idle'); }; return ( {status === 'loading' &&
Loading...
} {status === 'error' &&
Error...
} {status === 'success' &&
{user?.name}
}
这是一个非常简单的例子。
而且您可以轻松了解状态。
当您需要添加新状态时，您可以轻松添加新状态。
当然这个例子也有缺点。
无法同时表示加载状态和成功状态。
但我觉得这并不是什么大问题。
所以如果你在react状态下管理状态，我建议使用字符串来表达状态。
结论
在react状态中管理状态时，使用字符串来表达状态。
这非常简单易懂。
并且您可以轻松添加新状态。
如果使用对象或索引来表达状态，则在添加新状态时必须更新所有状态。
所以，我建议使用字符串来表达状态。
感谢您的阅读。
以上就是简化 React 状态管理：处理状态的最佳实践的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1491314.html
微信扫一扫 
支付宝扫一扫 
