超性感的React Hooks（九）useContext实践
如上图所示。
我们利用useContext来实现这个小demo。在实现之前，复习一下相关比较重要的知识点。
如下图。
1
如何合理的拆分组件？
这是一个需要在实践中，不断去总结，优化才能获得的技能。
首先，将一个复杂的页面逻辑进行拆分的目的，一定是为了可读性和可维护性。如果你的组件拆分违背了这两个原则，那么拆分就有问题。
本来我想根据我自己的经验，将组件分为基础组件，工具组件，容器组件，页面组件等大类，但是强行引入这些概念并不利于学习，还是建议大家自己在实践过程中去总结适合自己的拆分思维。
不过，有一些原则可以分享给大家
1.当一个组件行数过长，例如超过150行，就应该反思组件是否合理2.页面组件应该逻辑简单，一目了然3.复用程度高的功能/模块可以定义成一个组件4.避免过度拆分，对阅读带来困扰5.合理处理组件的状态，该状态仅在该组件使用，则无需定义在父级
组件的拆分，是考验我们React水平的重要标准，但这不是通过一篇两篇文章就能够马上掌握的技能，因此多给自己一点耐心，多从实践中反复思考总结是非常好的进步方式。
2
首图展示了我们想要实现的页面效果。建议大家先自己尝试实现，再参考我的实现思路进行对比。这样更有利于掌握知识。
首先我们肯定要先思考如何进行组件拆分。
一、通过观察我们发现，一定会有共享的数据，因此我们可以利用context自定义一个Provider的顶层父组件。
二、Tab切换，可以封装成为一个工具组件。但是由于我们的实现效果相对简单，这个地方也只使用一次，因此我选择直接实现。如果放在大型项目中，即使实现比较简单，也应该封装成为一个组件，以供其他页面复用。
三、共有三个Tab页，每一个Tab页都有各自的内容。因此这三个页面应该各自封装成独立的组件。
四、首页模块有一个轮播图功能，这个我们也应该考虑封装为一个工具组件
五、设置模块的步进器可以封装成为一个基础组件
这样梳理下，这个Demo的组件主要结构就应该如下：
3
接下来一个非常重要的思考，就是哪些状态应该在什么组件下来维护。
这一点非常重要，很少有人能够把这个事情做正确。混乱的状态管理，导致了代码非常糟糕。本来很简单的逻辑，可维护起来非常痛苦。太多的人没有去思考这个问题。
在顶层组件Provider中，我们只关心会被不同组件共享的数据。经过分析发现，只有首页和热门的未读标记数字，需要放在Provider中来处理。页面组件App和设置组件Setting都会使用到它们。
其他组件的状态都仅仅只是当前组件自己使用，因此就在各自的组件里维护就行了。
理清了这些思路，实现起来将会非常简单。
4
创建顶层组件Provider，该组件仅仅只维护两个未读的数据。
import React, { createContext, useState, Dispatch, ReactNode } from 'react';
interface Injected {
unreadIndex: number,
setUnreadIndex: Dispatch<any>,
unreadHot: number,
setUnreadHot: Dispatch<any>,
}
export const ctx = createContext<Injected>({} as Injected);
interface Props {
children?: ReactNode
}
export function Provider({children}: Props) {
const [unreadIndex, setUnreadIndex] = useState(0);
const [unreadHot, setUnreadHot] = useState(0);
const value = {
unreadIndex,
setUnreadIndex,
unreadHot,
setUnreadHot,
}
return (
<ctx.Provider value={value}>{children}</ctx.Provider>
)
}接下来创建页面组件App，该组件会引入三个Tab页组件，并实现tab切换功能。还需要显示未读的状态。实现如下：
import React, {useContext, useState} from 'react';
import {ctx, Provider} from './context';
import {Badge} from 'antd-mobile';
import Home from './components/Home';
import Hot from './components/Hot';
import Setting from './components/Setting';
import './index.scss';
function App() {
const {unreadIndex, unreadHot} = useContext(ctx);
const [tabIndex, setTabindex] = useState(0);
return (
<div className="use_context_container">
<div className="tab_wrapper">
<Badge text={unreadIndex} style={{ marginLeft: 42 }}>
<div onClick={() => setTabindex(0)}>首页</div>
</Badge>
<Badge text={unreadHot} style={{ marginLeft: 42 }}>
<div onClick={() => setTabindex(1)}>热门</div>
</Badge>
<div onClick={() => setTabindex(2)}>设置</div>
</div>
<div className="content_wrapper">
{tabIndex === 0 && (
<Home />
)}
{tabIndex === 1 && (
<Hot />
)}
{tabIndex === 2 && (
<Setting />
)}
</div>
</div>
)
}
export default () => (
<Provider>
<App />
</Provider>
)Home组件通过知乎日报的接口请求到数据，并展示出来。除此之外，还需要重置Home的未读数字。因此需要借助useContext来访问setUnreadIndex，将对应的状态重置。
import React, { useState, useEffect, useContext } from 'react';
import {zhLastFeedApi, Feed} from './api';
import { ActivityIndicator, Carousel } from 'antd-mobile';
import {ctx} from '../../context';
import './style.scss';
// 执行如下指令，禁用chrome跨域限制
// open -a "Google Chrome" --args --disable-web-security --user-data-dir
export default function ZhihuFeed() {
const [feed, setFeed] = useState<Feed>();
const {setUnreadIndex} = useContext(ctx);
useEffect(() => {
setUnreadIndex(0);
zhLastFeedApi().then(res => {
setFeed(res);
});
}, []);
if (!feed) {
return <div className="feed_container loading"><ActivityIndicator /></div>
}
const {stories, top_stories} = feed;
return (
<div className="feed_container">
<Carousel infinite autoplay dots={false}>
{top_stories.map((item, i) => (
<a className="top_feed_item" key={i} href={item.url} style={{backgroundImage: `url(${item.image})`}}>
<div className="title">{item.title}</div>
</a>
))}
</Carousel>
<div className="inner">
{stories.map((item, i) => (
<a className="feed_item" href={item.url} key={i}>
<img src={item.images![0]} alt=""/>
<div className="info">
<div className="title">{item.title}</div>
<div className="tip">{item.hint}</div>
</div>
</a>
))}
</div>
</div>
)
}Hot组件与Home组件逻辑几乎一样，访问博客园的接口并展示数据。
import React, { useState, useEffect, useContext } from 'react';
import {topViewApi} from './api';
import { ActivityIndicator } from 'antd-mobile';
import { ctx } from '../../context';
import './style.scss';
// 执行如下指令，禁用chrome跨域限制
// open -a "Google Chrome" --args --disable-web-security --user-data-dir
export default function ZhihuFeed() {
const [feed, setFeed] = useState<string>();
const {setUnreadHot} = useContext(ctx);
useEffect(() => {
setUnreadHot(0);
topViewApi().then(res => {
setFeed(res);
})
}, []);
if (!feed) {
return <div className="feed_container loading"><ActivityIndicator /></div>
}
return (
<div className="blog_container" dangerouslySetInnerHTML={{__html: feed}}>
</div>
)
}Setting组件需要设置unread的数字，因此状态从Provider中来。
import React, { useContext } from 'react';
import { List, Stepper } from 'antd-mobile';
import {ctx} from '../../context';
import './index.scss';
export default function Setting() {
const {unreadIndex, unreadHot, setUnreadIndex, setUnreadHot} = useContext(ctx);
return (
<div className="setting_container">
<div className="title">基本设置</div>
<List>
<List.Item wrap extra={
<Stepper
showNumber
min={0}
value={unreadIndex}
onChange={setUnreadIndex}
/>}
>
首页未读
</List.Item>
<List.Item extra={
<Stepper
showNumber
min={0}
value={unreadHot}
onChange={setUnreadHot}
/>}
>
热门未读
</List.Item>
</List>
<div className="tip">该设置项仅仅用于展示context功能，实践中几乎不会有这样的需求，不过需要使用相同处理方式的需求很多</div>
</div>
)
}这样，一个看上去比较复杂的案例，就简单的实现了。
很少有人能够把思路理到如此清晰，这，也正是你超越他人的机会所在。
本系列文章的所有案例，都可以在下面的地址中查看
https://github.com/advance-course/react-hooks
本系列文章为原创，请勿私自转载，转载请务必私信我
腾讯云开发者
