引言
随着我们的项目越来越复杂，我们会把组件拆得越来越多，越来越小，如果还是通过props将父组件法数据一级一级往下传递，显然会让代码更加not clean，而且臃肿。本文介绍如何使用react的useContext，来实现深层跨级父子（嵌套较深）的数据管理。
用法
首先记住和useContext相关的两个api: createContext,
- 创建context
import React from 'react';
const CurrencyContext = React.createContext(null);
export { CurrencyContext };
- 在顶层父组件上使用Provide包裹子组件，设置value值
import React from 'react';
import { CurrencyContext } from './currency-context';
const App = () => {
return (
<CurrencyContext.Provider value="€">
<Books list={DATA} />
</CurrencyContext.Provider>
);
};
- 在底层子组件上使用useContext获取传递下来的value
import React, { useContext } from "react";
import { CurrencyContext } from "./currency-context";
const Book = ({ item }) => {
const currency = useContext(CurrencyContext);
return (
<li>
{item.title} - {item.price} {currency}
</li>
);
};
export default Book;
最佳实践
- 创建一个单独的context文件
import React from 'react';
const CurrencyContext = React.createContext(null);
export { CurrencyContext };
- 创建一个单独的自定义hooks
import React from 'react';
const CurrencyContext = React.createContext(null);
const useCurrency = () => React.useContext(CurrencyContext);
export { CurrencyContext, useCurrency };
- 自定义provider文件
import React from 'react';
const CurrencyContext = React.createContext(null);
const useCurrency = () => React.useContext(CurrencyContext);
const CurrencyProvider = ({ value, children }) => {
return (
<CurrencyContext.Provider value={value}>
{children}
</CurrencyContext.Provider>
);
};
export { CurrencyProvider, useCurrency };
总结
总的来讲，useContext的使用场景就是多层嵌套组件之间的单向通信（父→子）。
