我的 React 最佳实践

🚀 优质资源分享 🚀

学习路线指引（点击解锁）	知识定位	人群定位
🧡 Python实战微信订餐小程序 🧡	进阶级	本课程是python flask+微信小程序的完美结合，从项目搭建到腾讯云部署上线，打造一个全栈订餐系统。
💛Python量化交易实战💛	入门级	手把手带你打造一个易扩展、更安全、效率更高的量化交易系统

There are a thousand Hamlets in a thousand people’s eyes. ----- 威廉·莎士比亚

免责声明：以下充满个人观点，辩证学习

React 目前开发以函数组件为主，辅以 hooks 实现大部分的页面逻辑。目前数栈的 react 版本是 16.13.1，该版本是支持 hooks 的，故以下实践是 hooks 相关的最佳实践。

前置理解

首先，应当明确 React 所推崇的函数式编程以及 f(data) = UI 是什么？

函数式编程

函数式编程是什么？这里的函数并非 JavaScript 中的函数，或任何语言中的函数。此处的函数是数学概念中的函数。让我们来回忆一下数学中的函数是什么。

在数学概念中，函数即一种特殊的映射，如何理解映射？

以一元二次方程为例， f(x) 是一种映射关系，给定一个的 x ，则存在 y 与之对应。

我们将一元二次方程理解为一个黑盒，该黑盒存在一个输入，一个输出，在输入端我们给入一个值 x = 2 则输出端必然会给出一个 y = 4 。

f(data)=UI

在了解了数学中函数的概念后，将其概念套用到 React 中，我们就可以明白 f(data)=UI 到底指什么意思？

结论：个人理解，将当前组件内部的所有逻辑视为一个黑盒，该黑盒有且仅有一个输入，有且仅有一个输出，输入端为 props，输出端则是当前组件的 UI ，不同的输入会决定不同的输出，就像把 x = 1 和 x = 2 给到所得到的结果是不一样的一样。而将这样的组件组合起来就是每一个页面，即 React 应用。

业务开发

目前绝大部分的后台管理系统，不仅仅是数栈，包括所有 ERP 系统，图书管理系统等等。其主体页面大致可以包括一下三类：

• 筛选条件（Filter）+ 表格（Table）
• 表单（Form）相关的新增，编辑功能
• 概览页面（Overview），包括一些图表和表格

第一类

以上是这次在资产中负责开发的文件治理规则页面，属于是第一类的典型页面，那这一类的页面应该如何开发才是最佳实践？

首先，我们将这一类页面抽象成如下结构

如此一来，我们不难实现如下的 dom 结构

<div className="container">
  <div className="header">
    <div className="filter">筛选区div>
    <div className="buttonGroup">按钮区div>
  div>
  <div className="content">表格区div>
div>

接下来，我们需要补充各个区域的内容。

筛选区通常会有一些筛选项，这里我们有两个选择，如果比较复杂的筛选项，如存在 5 个以上或存在联动的交互，则选择通过 Form 来实现，而上图中这种比较简单的则可以直接实现。
这里我们不难观察到我们需要 3 个 value 值来实现这 3 个输入框或下拉框的受控模式，这里我们通过声明一个 filter 的变量，将这 3 个值做一个整合。

即

function (){
  const [filter, setFilter] = useState({
    a: undefined,
    b: undefined,
    c: undefined
  });
  
  return <><>
}

提问：为什么要 3 个值都放入到一个变量里？

答：1. 减少冗长的定义。 2. 为后续铺垫。

声明完 3 个值后，我们把组件填入

function (){
  const [filter, setFilter] = useState({
    a: undefined,
    b: undefined,
    c: undefined
  });

  return (
    <div className="container">
 <div className="header">
 <div className="filter">
 <Input value={filter.a} onChange={(e) => setFilter(f => ({...f, a: e.target.value})} />
 <Input value={filter.b} onChange={(e) => setFilter(f => ({...f, b: e.target.value})} />
 <Input value={filter.c} onChange={(e)