简化 React 状态管理：处理状态的最佳实践

大家好，我们又见面了啊~本文《简化 React 状态管理：处理状态的最佳实践》的内容中将会涉及到等等。如果你正在学习文章相关知识，欢迎关注我，以后会给大家带来更多文章相关文章，希望我们能一起进步！下面就开始本文的正式内容~

有时候，我们必须在react状态下管理状态。
比如我们有一个提交表单，我们要管理表单的状态。

表达状态的方式有很多种。
我会介绍一下表达身份的坏例子。

坏榜样

1、用物体来表达状态。

const page = () => {
    const [status, setstatus] = usestate<{ loading: boolean, error: boolean, success: boolean }>({ 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...
}
            fetch
        
    );
};

这是一个不好的例子，因为状态非常复杂。
当您更新状态时，您必须更新所有状态。

此示例中只有三种状态模式。

// loading
setstatus({ loading: true, error: false, success: false });

// success
setstatus({ loading: false, error: false, success: true });

// error
setstatus({ loading: false, error: true, success: false });

但是当你用一个对象来表达状态时，读者无法理解只有三种模式。
所以这是一个坏例子。

2.用索引来表示状态。

const page = () => {
    const [status, setstatus] = usestate<0 | 1 | 2 | 3>(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}
}
            fetch
            reset
        
    );
};

这是一个非常简单的例子。
但这个例子也有一个问题。

当你使用索引来表达状态时，你必须记住状态号。
如果您需要添加新状态，则必须更新所有状态编号。

所以，这也不是一个好例子。

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}
}
            fetch
            reset
        
    );
};

这也不是一个好例子。
你必须一直管理函数中的所有状态。

如果您忘记更新状态，这将是一个错误。
重置功能也很复杂。

推荐

1. 使用字符串来表达状态。

const Page = () => {
    const [status, setStatus] = useState<'loading' | 'error' | 'success' | 'idle'>('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}
}
            Fetch
            Reset
        
    );
};

这是一个非常简单的例子。
而且您可以轻松了解状态。

当您需要添加新状态时，您可以轻松添加新状态。
当然这个例子也有缺点。
无法同时表示加载状态和成功状态。
但我觉得这并不是什么大问题。

所以如果你在react状态下管理状态，我建议使用字符串来表达状态。

结论

在react状态中管理状态时，使用字符串来表达状态。

这非常简单易懂。
并且您可以轻松添加新状态。

如果使用对象或索引来表达状态，则在添加新状态时必须更新所有状态。
所以，我建议使用字符串来表达状态。

感谢您的阅读。

本篇关于《简化 React 状态管理：处理状态的最佳实践》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！