超性感的React Hooks（九）useContext实践

用户6901603

发布于 2020-07-27 08:58:52

1.5K03

代码可运行

文章被收录于专栏：不知非攻不知非攻

运行总次数：3

代码可运行

如上图所示。

我们利用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>
  )
}