React+Redux+Antd 实现增删改查功能及性能优化-JavaScript中文网-JavaScript教程资源分享门户

React 是一个 Facebook 开源的用于构建用户界面的 JavaScript 库，它的出现使得前端工程化变得更加高效和简单。Redux 是一个状态管理中心，通过统一管理全局数据状态并利用一些设计模式确保数据的 immutable，进一步规范开发流程。Antd 是一款优秀的 React UI 组件库，它的设计语言和丰富的组件功能使得开发更加简洁和高效。

在本文中，我们将探讨使用 React+Redux+Antd 实现增删改查功能的具体步骤，并提供性能优化的建议。

实现增删改查功能

创建项目并引入相关依赖

我们首先需要创建一个 React 项目，并引入相关依赖。创建命令如下：

create-react-app my-app

接着，我们需要引入 Redux 和 Antd 相关依赖：

yarn add redux react-redux
yarn add antd
yarn add axios

创建全局 Redux Store

全局 Redux Store 是指在整个应用中存储全局数据状态的地方。我们可以通过 createStore 方法创建，代码如下：

import { createStore } from 'redux';
import rootReducer from '../reducers';

const store = createStore(rootReducer);

其中，rootReducer 是我们自定义的数据状态管理函数，我们将在下一步中创建。

创建基本的 React UI

我们首先需要在 index.html 中引入 Antd 的样式文件，代码如下：

<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/antd/4.16.3/antd.min.css" />

我们接着创建一个基本的 React UI，如下图所示：

我们需要在 App.js 中编写代码，如下所示：

// www.javascriptcn.com code example
import React from 'react';
import { Layout, Menu, Breadcrumb } from 'antd';

const { Header, Content, Footer } = Layout;

function App() {
  return (
    <Layout className="layout">
      <Header>
        <div className="logo" />
        <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']}>
          <Menu.Item key="1">Home</Menu.Item>
          <Menu.Item key="2">About</Menu.Item>
          <Menu.Item key="3">Contact us</Menu.Item>
        </Menu>
      </Header>
      <Content style={{ padding: '0 50px' }}>
        <Breadcrumb style={{ margin: '16px 0' }}>
          <Breadcrumb.Item>Home</Breadcrumb.Item>
          <Breadcrumb.Item>List</Breadcrumb.Item>
          <Breadcrumb.Item>App</Breadcrumb.Item>
        </Breadcrumb>
        <div className="site-layout-content">Content goes here</div>
      </Content>
      <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
    </Layout>
  );
}

export default App;

在上面的代码中，我们引入了 Antd 的 Layout、Menu、Breadcrumb 和 Footer 组件，并在 Header 中添加了菜单项。Content 组件之中的 site-layout-content 将用于显示我们的具体功能内容。

创建数据状态管理函数

我们在创建全局 Redux Store 的时候提到了 rootReducer，是时候创建它了。它的作用是用于定义全局数据状态和管理数据状态的操作。在本例中，我们需要实现增删改查功能，因此我们需要在 rootReducer 中定义以下函数：

// www.javascriptcn.com code example
const initState = {
  data: [],
};

export default function rootReducer(state = initState, action) {
  switch (action.type) {
    case "add":
      return {
        data: [...state.data, action.payload],
      };
    case "delete":
      const newData = [...state.data];
      newData.splice(action.payload, 1);
      return {
        data: newData,
      };
    case "update":
      const newData2 = [...state.data];
      newData2.splice(action.payload.index, 1, action.payload.newData);
      return {
        data: newData2,
      };
    case "get":
      return {
        data: action.payload,
      };
    default:
      return state;
  }
}

在上述代码中，initState 表示全局数据状态的初始值，包含一个 data 数组，用于存储我们的数据。在 reducer 函数中，我们定义了四个操作，分别是新增数据、删除数据、修改数据和获取数据。

编写具体功能代码

我们在 Content 组件之中的 site-layout-content 中编写具体功能代码。首先我们需要构建一个表格来展示数据，代码如下：

// www.javascriptcn.com code example
import { Table, Space, Button, Modal, Form, Input } from "antd";

const { confirm } = Modal;

const columns = [
  {
    title: "Name",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "Age",
    dataIndex: "age",
    key: "age",
  },
  {
    title: "Address",
    dataIndex: "address",
    key: "address",
  },
  {
    title: "Action",
    key: "action",
    render: (text, record, index) => (
      <Space size="middle">
        <Button
          type="primary"
          onClick={() => {
            showModal({ action: "update", index, record });
          }}
        >
          Edit
        </Button>
        <Button
          type="primary"
          danger
          onClick={() => {
            showConfirm(index);
          }}
        >
          Delete
        </Button>
      </Space>
    ),
  },
];

在上述代码中，我们首先定义了表格的列，包括名称、年龄和地址。接着，我们定义了 Action 列，它包含了两个按钮，分别是编辑和删除按钮。我们需要实现 showModal 函数和 showConfirm 函数来响应这两个按钮的点击事件。

// www.javascriptcn.com code example
const [visible, setVisible] = useState(false);
const [formData, setFormData] = useState(null);

const showModal = (data) => {
  setVisible(true);
  setFormData(data);
};

const handleOk = () => {
  form
    .validateFields()
    .then((values) => {
      form.resetFields();
      setVisible(false);
      if (formData.action === "update") {
        dispatch({
          type: "update",
          payload: {
            index: formData.index,
            newData: values,
          },
        });
      } else {
        dispatch({
          type: "add",
          payload: values,
        });
      }
    })
    .catch((info) => {
      console.log("Validate Failed:", info);
    });
};

const handleCancel = () => {
  form.resetFields();
  setVisible(false);
};

const showConfirm = (index) => {
  confirm({
    title: "Do you want to delete this item?",
    content: "This action cannot be undone.",
    onOk() {
      dispatch({
        type: "delete",
        payload: index,
      });
    },
    onCancel() {},
  });
};

在上述代码中，我们使用了 React Hooks 管理了两个状态，分别是 visible 和 formData。visible 用于确定 Modal 组件是否可见，formData 用于临时存储表单数据。showModal 函数用于显示 Modal 组件，并根据 action 参数来确定是新建数据还是编辑数据。handleOk 函数用于获取表单数据并根据不同情况向 Redux Store 中新增数据或更新数据。handleCancel 函数则用于清空表单数据并关闭 Modal 组件。showConfirm 函数用于显示确认对话框并响应删除操作。

性能优化

在使用 React 开发大型应用的时候，我们需要关注应用的性能问题。下面是几条优化性能的建议：

减少 render 次数：只有当组件的 props 或 state 发生改变时才重新渲染组件，可以防止不必要的性能损失。
避免不必要的组件更新：可以使用 shouldComponentUpdate 或 PureComponent 组件来防止不必要的组件更新，提升性能。
合理使用 Redux：Redux 是一个全局状态管理工具，数据流清晰，但是如果不合理使用，也会造成性能问题。因此需要遵循单一数据源、纯函数等原则，避免过度使用 Redux。
避免大量数据渲染：在渲染列表等大量数据时，需要使用虚拟列表等技术来优化性能。
加载优化：提前加载数据、利用资源缓存等技术可以有效优化加载性能。

示例代码

完整的代码可在 Github 上查看：https://github.com/WHUalphago/react-redux-antd-demo。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d66488a941bf7134c21f82

React+Redux+Antd 实现增删改查功能及性能优化