官方给的解释如下
在一个典型的 React 应用中，数据是通过 props 属性自上而下（由父及子）进行传递的，但这种做法对于某些类型的属性而言是极其繁琐的（例如：地区偏好，UI 主题），这些属性是应用程序中许多组件都需要的。Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props。
context和redux解决了什么问题？
用过React都会知道一个重要的概念：单向数据流，React App 遵循数据从上往下单一传递，如果需要子组件需要去改变父组件或者兄弟组件，只能通过event callback或者dispatch action去通知组件改变状态，父组件render之后再通过props把更新值传给子组件完成视图的更新。
当一个state变化影响多个组件更新视图时候，这个state就应该上升存到共有的父组件中，如果只有父子间1-2层之间的传递，那么state与callback通过props传递还是比较好处理的。但是试想一下如果中间还有很多wrapper，间隔着5~6层甚至更多的组件，props还这样一层层传下去的话，很容易造成不可预知的bug，并且让代码难以维护。
要解决上述提及到的这种”Props drilling”问题，通过一个集中的Data Store，把需要共享或更新共同状态的组件用HOC来连接Data Store,这样做我们不但遵从数据单一流动性，并且可以让组件快速获取数据，不用再一层层去传递。
Context API和Redux都解决了props存在的“只要是子组件需要的信息，即使父组件不需要，也必须先传给父组件然后一层层传到子组件”的问题。
如何使用 Context
下面我简单编写了一个操作用户信息的示例
1.首先定义我们的Context文件
test.js
import React, {
createContext,
useCallback,
useContext,
useMemo,
useReducer,
} from "react";
//actions
const LOGIN = "LOGIN";
const LOGOUT = "LOGOUT";
const UPDATE_USER_NAME = "UPDATE_USER_NAME";
//初始状态
const INITIAL_STATE = {};
const TestContext = createContext();
export function useTestContext() {
return useContext(TestContext);
}
//reducer
function reducer(state, { type, payload }) {
switch (type) {
case LOGIN: {
const { userInfo } = payload;
return Object.assign({}, state, userInfo);
}
case UPDATE_USER_NAME: {
const { userName } = payload;
return Object.assign({}, state, { userName });
}
case LOGOUT:
return {};
default:
throw Error(`Unexpected action type in TestContext reducer: '${type}'.`);
}
}
export default function Provider({ children }) {
const [state, dispatch] = useReducer(reducer, INITIAL_STATE);
//登录
const login = useCallback(
(userInfo) =>
dispatch({
type: LOGIN,
payload: {
userInfo,
},
}),
[]
);
//退出
const logOut = useCallback(
() =>
dispatch({
type: LOGOUT,
}),
[]
);
//更新userName
const updateUserName = useCallback(
(userName) =>
dispatch({
type: UPDATE_USER_NAME,
payload: {
userName,
},
}),
[]
);
return (
<TestContext.Provider
value={useMemo(() => [state, { login, logOut, updateUserName }], [
logOut,
login,
state,
updateUserName,
])}
>
{children}
</TestContext.Provider>
);
}
在App.js注入Context关系
App.js
import "./App.css";
import { BrowserRouter as Router, Route, Switch, Link } from "react-router-dom";
import TestContextProvider from "./contexts/test"; //这里我取名test
import Mine from "./pages/Mine";
import Home from "./pages/Home";
function App() {
return (
<div className="App">
<Router>
<Link to="/">Home</Link>
<br />
<br />
<Link to="/mine">Mine</Link>
<TestContextProvider>
<Switch>
<Route path="/" exact>
<Home />
</Route>
<Route path="/mine" exact>
<Mine />
</Route>
</Switch>
</TestContextProvider>
</Router>
</div>
);
}
export default App;
3.使用
Home.js
import React from "react";
import { useTestContext } from "../../contexts/test";
import "./styles.css";
function Home() {
const [state, { login, logOut, updateUserName }] = useTestContext();
const { userName } = state;
return (
<div className="home">
<span>{userName}</span>
<button
onClick={() =>
login({ userName: "小明", userAge: 22, userGender: "男" })
}
>
login
</button>
<button onClick={logOut}>logOut</button>
<button onClick={() => updateUserName("mason")}>updateUserName</button>
</div>
);
}
export default Home;
Mine.js
import React from "react";
import { useTestContext } from "../../contexts/test";
function Mine() {
const [state] = useTestContext();
const { userName } = state;
return (
<div>
<h1>Mine</h1>
<span>{userName}</span>
</div>
);
}
export default Mine;
一个简单的Context示例编写完成，它解决了组件之间共享数据的问题，可以和redux去做相同的事情
结合其他的hooks我们还可以编写一个这样的function
export function useLogin() {
const [userInfo, { login }] = useTestContext();
const { userName } = userInfo;
useEffect(() => {
//模拟请求
async function fetch() {
setTimeout(() => {
login({ userName: "小红", userAge: 22, userGender: "男" });
}, 2000);
}
if (userName !== "小红") {
fetch();
}
fetch();
}, [login, userName]);
return userInfo;
}
使用
Login.js
import React from "react";
import { useLogin } from "../../contexts/test";
function Login() {
const userInfo = useLogin();
const { userName } = userInfo;
return (
<div>
<h1>Login</h1>
<span>{userName}</span>
</div>
);
}
export default Login;
使用hooks会发现一切数据的使用都变得那么理所当然
拥抱hooks！
最后总结一下context能否取代redux
我不觉得context的出现是为了干掉redux，充其量也只能说是补上了一块长期或缺功能，让React不需要依赖第三方flux组件情况下可以解决props drilling这个痛点。
redux强大不止redux本身，还有它强大的生态，以及一些中间件。
借鉴redux的维护者常挂嘴边的一句话，一百个案子有一百个不同的考量，选工具一向没有什么好与不好，能不能适合团队的需求才是最重要!
网友评论