如何为您的移动网站创建QR码阅读器。

先决条件

为了继续学习本教程，您需要熟悉以下主题：

• 反应
• 反应钩
• Redux

您将在此处学习的技术基于Redux中引入的模式。这意味着您需要对进行深入了解，reducers然后actions再继续。我当前正在使用Visual Studio Code，它似乎是目前最受欢迎的代码编辑器（尤其是对于JavaScript开发人员而言）。如果您使用的是Windows，我建议您安装Git Bash。使用Git Bash终端执行本教程中提供的所有命令。Cmder还是一个很好的终端，能够在Windows上执行大多数Linux命令。

您可以在GitHub Repository上访问本教程中使用的完整项目。

关于新的状态管理技术

我们需要在React项目中处理两种状态：

• 地方政府
• 全球状态

局部状态只能在定义它们的组件内使用。全局状态可以在多个组件之间共享。以前，定义全局状态需要安装状态管理框架，例如Redux或MobX。随着React v16.3.0的发布，Context API得以发布，它允许开发人员无需安装其他库即可实现全局状态。

从React v16.8开始，Hooks允许在组件中实现许多React功能，而无需编写类。Hooks为React开发人员编写代码的方式带来了巨大的好处。这包括代码重用和在组件之间共享状态的更简便方法。对于本教程，我们将关注以下React钩子：

• useState
• useReducer

useState建议用于处理数字或字符串之类的简单值。但是，在处理复杂的数据结构时，您将需要使用useReducer钩子。对于useState，您只需要一个setValue()函数即可覆盖现有状态值。

对于useReducer，您将要处理一个状态对象，该状态对象以树状结构包含多个具有不同数据类型的值。您需要声明可以更改一个或多个这些状态值的函数。对于数组等数据类型，您需要声明多个不可变的函数来处理添加，更新和删除操作。在本教程的后面部分中，您将看到一个示例。

使用useState或声明状态后useReducer，您需要使用React Context将其提升为全局状态。这是通过使用React库提供的功能创建一个上下文对象来完成的createContext。上下文对象允许状态在组件之间共享，而无需使用道具。

您还需要为上下文对象声明一个上下文提供程序。这允许页面或容器组件订阅上下文对象以进行更改。容器的任何子组件都可以使用该useContext函数访问上下文对象。

现在，让我们看看实际的代码。

设置项目

我们将使用create-react-app快速启动我们的项目：

$ npx create-react-app react-hooks-context-app

接下来，让我们安装Semantic UI React，这是一个基于React的CSS框架。这不是必需的；我只是喜欢创建漂亮的用户界面而无需编写自定义CSS：

yarn add semantic-ui-react fomantic-ui-css

打开src/index.js并插入以下导入：

import 'fomantic-ui-css/semantic.min.css';

这就是我们要开始使用语义UI的项目所需要做的。在下一节中，我们将研究如何使用useState钩子声明状态并将其提升为全局状态。

反例：useState

在此示例中，我们将构建一个简单的计数器演示，该演示由两个按钮组件和一个显示组件组成。我们将介绍一种count状态，该状态将在两个组件之间全局共享。组件将是的子代CounterView，它将充当容器。按钮组件将具有将增加或减少count状态值的按钮。

让我们首先count在名为的上下文文件中定义状态context/counter-context.js。在src文件夹中创建此文件并插入以下代码：

import React, { useState, createContext } from "react";

// Create Context Object
export const CounterContext = createContext();

// Create a provider for components to consume and subscribe to changes
export const CounterContextProvider = props => {
  const [count, setCount] = useState(0);

  return (
    <CounterContext.Provider value={[count, setCount]}>
      {props.children}
    </CounterContext.Provider>
  );
};

我们定义了一个名为的状态count，并将默认值设置为0。所有使用的组件CounterContext.Provider都可以访问count状态和setCount功能。让我们在中定义用于显示count状态的组件src/components/counter-display.js：

import React, { useContext } from "react";
import { Statistic } from "semantic-ui-react";
import { CounterContext } from "../context/counter-context";

export default function CounterDisplay() {
  const [count] = useContext(CounterContext);

  return (
    <Statistic>
      <Statistic.Value>{count}</Statistic.Value>
      <Statistic.Label>Counter</Statistic.Label>
    </Statistic>
  );
}

接下来，让我们定义组件，该组件将包含用于增加和减少state组件的按钮。创建文件src/components/counter-buttons.js并插入以下代码：

import React, { useContext } from "react";
import { Button } from "semantic-ui-react";
import { CounterContext } from "../context/counter-context";

export default function CounterButtons() {
  const [count, setCount] = useContext(CounterContext);

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <Button.Group>
        <Button color="green" onClick={increment}>
          Add
        </Button>
        <Button color="red" onClick={decrement}>
          Minus
        </Button>
      </Button.Group>
    </div>
  );
}

实际上，useContext由于我们尚未指定Provider，因此该功能将无法使用。现在，通过在中创建一个容器来做到这一点src/views/counter-view.js。插入以下代码：

import React from "react";
import { Segment } from "semantic-ui-react";

import { CounterContextProvider } from "../context/counter-context";
import CounterDisplay from "../components/counter-display";
import CounterButtons from "../components/counter-buttons";

export default function CounterView() {
  return (
    <CounterContextProvider>
      <h3>Counter</h3>
      <Segment textAlign="center">
        <CounterDisplay />
        <CounterButtons />
      </Segment>
    </CounterContextProvider>
  );
}

最后，让我们App.js用以下代码替换现有代码：

import React from "react";
import { Container } from "semantic-ui-react";

import CounterView from "./views/counter-view";

export default function App() {
  return (
    <Container>
      <h1>React Hooks Context Demo</h1>
      <CounterView />
    </Container>
  );
}

现在，您可以create-react-app使用以下yarn start命令启动服务器。浏览器应启动并呈现您的计数器。单击按钮以确保increment和decrement功能正常运行。

您也可以在CodePen上测试此代码。

让我们进入下一部分，在这里我们将建立一个使用useReducer钩子的高级示例。

联系人示例：useReducer

在此示例中，我们将构建一个用于管理联系人的基本CRUD页面。它由几个演示组件和一个容器组成。还有一个用于管理联系人状态的上下文对象。由于我们的状态树比前面的示例要复杂一些，因此我们必须使用useReducer钩子。

创建状态上下文对象src/context/contact-context.js并插入以下代码：

import React, { useReducer, createContext } from "react";

export const ContactContext = createContext();

const initialState = {
  contacts: [
    {
      id: "098",
      name: "Diana Prince",
      email: "diana@us.army.mil"
    },
    {
      id: "099",
      name: "Bruce Wayne",
      email: "bruce@batmail.com"
    },
    {
      id: "100",
      name: "Clark Kent",
      email: "clark@metropolitan.com"
    }
  ],
  loading: false,
  error: null
};

const reducer = (state, action) => {
  switch (action.type) {
    case "ADD_CONTACT":
      return {
        contacts: [...state.contacts, action.payload]
      };
    case "DEL_CONTACT":
      return {
        contacts: state.contacts.filter(
          contact => contact.id !== action.payload
        )
      };
    case "START":
      return {
        loading: true
      };
    case "COMPLETE":
      return {
        loading: false
      };
    default:
      throw new Error();
  }
};

export const ContactContextProvider = props => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <ContactContext.Provider value={[state, dispatch]}>
      {props.children}
    </ContactContext.Provider>
  );
};

创建父组件src/views/contact-view.js并插入以下代码：

import React from "react";
import { Segment, Header } from "semantic-ui-react";
import ContactForm from "../components/contact-form";
import ContactTable from "../components/contact-table";
import { ContactContextProvider } from "../context/contact-context";

export default function Contacts() {
  return (
    <ContactContextProvider>
      <Segment basic>
        <Header as="h3">Contacts</Header>
        <ContactForm />
        <ContactTable />
      </Segment>
    </ContactContextProvider>
  );
}

创建演示文稿组件src/components/contact-table.js并插入以下代码：

import React, { useState, useContext } from "react";
import { Segment, Table, Button, Icon } from "semantic-ui-react";
import { ContactContext } from "../context/contact-context";

export default function ContactTable() {
  // Subscribe to `contacts` state and access dispatch function
  const [state, dispatch] = useContext(ContactContext);
  // Declare a local state to be used internally by this component
  const [selectedId, setSelectedId] = useState();

  const delContact = id => {
    dispatch({
      type: "DEL_CONTACT",
      payload: id
    });
  };

  const onRemoveUser = () => {
    delContact(selectedId);
    setSelectedId(null); // Clear selection
  };

  const rows = state.contacts.map(contact => (
    <Table.Row
      key={contact.id}
      onClick={() => setSelectedId(contact.id)}
      active={contact.id === selectedId}
    >
      <Table.Cell>{contact.id}</Table.Cell>
      <Table.Cell>{contact.name}</Table.Cell>
      <Table.Cell>{contact.email}</Table.Cell>
    </Table.Row>
  ));

  return (
    <Segment>
      <Table celled striped selectable>
        <Table.Header>
          <Table.Row>
            <Table.HeaderCell>Id</Table.HeaderCell>
            <Table.HeaderCell>Name</Table.HeaderCell>
            <Table.HeaderCell>Email</Table.HeaderCell>
          </Table.Row>
        </Table.Header>
        <Table.Body>{rows}</Table.Body>
        <Table.Footer fullWidth>
          <Table.Row>
            <Table.HeaderCell />
            <Table.HeaderCell colSpan="4">
              <Button
                floated="right"
                icon
                labelPosition="left"
                color="red"
                size="small"
                disabled={!selectedId}
                onClick={onRemoveUser}
              >
                <Icon name="trash" /> Remove User
              </Button>
            </Table.HeaderCell>
          </Table.Row>
        </Table.Footer>
      </Table>
    </Segment>
  );
}

创建演示文稿组件src/components/contact-form.js并插入以下代码：

import React, { useState, useContext } from "react";
import { Segment, Form, Input, Button } from "semantic-ui-react";
import _ from "lodash";
import { ContactContext } from "../context/contact-context";

export default function ContactForm() {
  const name = useFormInput("");
  const email = useFormInput("");
  // eslint-disable-next-line no-unused-vars
  const [state, dispatch] = useContext(ContactContext);

  const onSubmit = () => {
    dispatch({
      type: "ADD_CONTACT",
      payload: { id: _.uniqueId(10), name: name.value, email: email.value }
    });
    // Reset Form
    name.onReset();
    email.onReset();
  };

  return (
    <Segment basic>
      <Form onSubmit={onSubmit}>
        <Form.Group widths="3">
          <Form.Field width={6}>
            <Input placeholder="Enter Name" {...name} required />
          </Form.Field>
          <Form.Field width={6}>
            <Input placeholder="Enter Email" {...email} type="email" required />
          </Form.Field>
          <Form.Field width={4}>
            <Button fluid primary>
              New Contact
            </Button>
          </Form.Field>
        </Form.Group>
      </Form>
    </Segment>
  );
}

function useFormInput(initialValue) {
  const [value, setValue] = useState(initialValue);

  const handleChange = e => {
    setValue(e.target.value);
  };

  const handleReset = () => {
    setValue("");
  };

  return {
    value,
    onChange: handleChange,
    onReset: handleReset
  };
}

相应地插入以下代码App.js：

import React from "react";
import { Container } from "semantic-ui-react";
import ContactView from "./views/contact-view";

export default function App() {
  return (
    <Container>
      <h1>React Hooks Context Demo</h1>
    <ContactView />
    </Container>
  );
}

实施代码后，您的浏览器页面应刷新。要删除联系人，您需要先选择一行，然后点击“ 删除”按钮。要创建新联系人，只需填写表格并点击“ 新联系人”按钮。

您也可以在CodePen上测试此代码。

查看代码以确保您理解所有内容。阅读我包含在代码中的注释。

概要

我希望这些示例在您了解如何无需Redux的情况下如何在React应用程序中管理共享应用程序状态的过程中为您提供帮助。如果您不使用钩子和上下文API来重写这些示例，那将导致更多的代码。看到不处理道具而编写代码有多容易？

在第二个示例中，您可能已经注意到有两个未使用的状态变量- loading和error。作为挑战，您可以进一步改进此应用程序以利用它们。例如，您可以实施虚假延迟，并使演示文稿组件显示加载状态。您还可以更进一步，并访问真正的远程API。在此error状态变量可用于显示错误消息。

您现在可能要问自己一个唯一的问题：Redux对将来的项目是否必要？我用这种技术看到的一个缺点是您不能使用Redux DevTool扩展来调试应用程序状态。但是，随着新工具的开发，这种情况将来可能会改变。显然，作为开发人员，您仍然需要学习Redux才能维护旧项目。但是，如果您要开始一个新项目，则需要询问您自己和您的团队，是否真的有必要使用第三方状态管理库。