本教程是React Hooks系统教程中的一部分。
React Hooks 的 useReducer/useContext 已经基本可以实现类似 Redux 的状态管理。
示例说明
我们接下来会制作一个较为完整的用户登录并显示用户信息的例子。为了尽量模拟真实场景,我们会将不同功能的组件放到不同的文件中,该实列统一放到了 ExampleUserLogin 目录下。
UserProvder.js
UserProvider.js 用来存放共享状态,并提供一个向子组件传递 userInfo/ userDispatcher 的容器。这里简化了 UserReducer 的逻辑。
import React, { createContext, useReducer } from 'react';
export const UserContext = createContext({});
export const UserReducer = (userInfo, action) => {
if (action.error) return { error: action.error };
return action;
}
export const UserProvider = props => {
const [userInfo, userDispatcher] = useReducer(UserReducer, {});
return (
<UserContext.Provider value={{ userInfo, userDispatcher }}>
{props.children}
</UserContext.Provider>
)
}
ExampleUserLogin.js
是登录模块的入口函数,引用 UserProvider 向 Login 和 Welcome 两个子模块传递 userInfo 状态和 userDispatcher 事件触发器。
import React from 'react';
import { Login } from "./Login";
import { Welcome } from "./Welcome";
import { UserProvider } from './UserProvider';
export function ExampleUserLogin() {
return (
<div>
<hr/> <h1>Example: UserLogin</h1>
<UserProvider>
<Login/>
<Welcome/>
</UserProvider>
</div>
)
}
Login.js
login.js 显示登录界面并向后台发送 ajax 信息进行登录,然后通过 userDispatcher 事件派发器通知其它组件。
import React, { useContext } from 'react';
import { UserContext } from './UserProvider';
export function Login() {
let { loginInfo, userDispatcher } = useContext(UserContext);
let loginHandler = (e) => {
e.preventDefault()
fetch('/json/user.login.json')
.then((res)=>{ return res.json() })
.then((userInfo)=>{
userDispatcher(userInfo)
})
.catch((err)=>{
userDispatcher({ error: 'Login Error' })
})
}
return (
<div>
<h1>Login Component</h1>
<input type="text" placeholder="Username" />
<input type="password" placeholder="Password" />
<button onClick={loginHandler}>Login</button>
</div>
)
}
Welcome.js
welcome.js 接收父容器传递的 userInfo,并显示用户信息。
import React, { useContext } from 'react';
import { UserContext } from './UserProvider';
export function Welcome() {
let {userInfo, userDispatcher} = useContext(UserContext);
return (
<div>
<h1>Welcome Component</h1>
<ul>
<li>Username: {userInfo.username}</li>
<li>Email: {userInfo.email}</li>
<li>Age: {userInfo.age}</li>
</ul>
</div>
)
}
至此一个完整的用户登录功能完成。
完整示例:
回复 (0)
微信扫码 立即评论