当前位置： 首页 > news >正文

React组件开发流程-03.1

news 来源：原创 2025/5/20 7:15:33

此章先以一个完整的例子来全面了解下React组件开发的流程，主要是以代码为主，在不同的章节中会把重点标出来，要完成的例子如下，也可从官网中找到。
在这里插入图片描述

React组件开发流程

这只是一个通用流程，在熟悉后不需要完全遵从。

  • 将 UI 拆解为组件层级结构
  • 使用 React 构建一个静态版本
  • 找出 UI 精简且完整的 state 表示
  • 验证 state 应该被放置在哪里
  • 添加反向数据流

组件开发流程示例

将 UI 拆解为组件层级结构

在这里插入图片描述

  • FilterableProductTable（灰色）包含完整的应用，最外层元素
    • SearchBar（蓝色）搜索输入框和复选按钮，获取用户输入。
    • ProductTable（淡紫色）产品列表，根据用户输入，展示和过滤清单。
      • ProductCategoryRow（绿色）展示每个类别的表头。
      • ProductRow（黄色）展示每个产品的行。

拆分后构建一种上述的树状结构。

使用 React 构建一个静态版本

在简单的例子中，自上而下构建通常更简单；而在大型项目中，自下而上构建更简单。这里使用自下向上方式构建

ProductCategoryRow

category参数为字符串，如Fruits或Vegetables，从下面的数据中取

{category: “Vegetables”, price: “$1”, stocked: true, name: “Peas”}

function ProductCategoryRow({ category }) {return (<tr><th colSpan="2">{category}</th></tr>);
}

ProductRow

product参数为是一完整数据，如下面数据

{category: “Vegetables”, price: “$1”, stocked: true, name: “Peas”}

function ProductRow({ product }) {const name = product.stocked ? product.name :<span style={{ color: 'red' }}>{product.name}</span>;return (<tr><td>{name}</td><td>{product.price}</td></tr>);
}

ProductTable

products参数为产品数据组，最后返回一个完整的table表格

function ProductTable({ products }) {const rows = []; //包含多个ProductCategoryRow组件和ProductRow组件，共同组成一个单独的表格let lastCategory = null;products.forEach((product) => {if (product.category !== lastCategory) {rows.push(<ProductCategoryRowcategory={product.category}key={product.category} />);}rows.push(<ProductRowproduct={product}key={product.name} />);lastCategory = product.category;});return (<table><thead><tr><th>Name</th><th>Price</th></tr></thead><tbody>{rows}</tbody></table>);
}

SearchBar

无参数，包含一个输入框和一个复选框

function SearchBar() {return (<form><input type="text" placeholder="Search..." /><label><input type="checkbox" />{' '}Only show products in stock</label></form>);
}

FilterableProductTable

products参数为产品数据组

function FilterableProductTable({ products }) {return (<div><SearchBar /><ProductTable products={products} /></div>);
}

发布组件

最顶层组件（FilterableProductTable）将接收数据模型作为其 prop。这被称之为 单向数据流。

const PRODUCTS = [{category: "Fruits", price: "$1", stocked: true, name: "Apple"},{category: "Fruits", price: "$1", stocked: true, name: "Dragonfruit"},{category: "Fruits", price: "$2", stocked: false, name: "Passionfruit"},{category: "Vegetables", price: "$2", stocked: true, name: "Spinach"},{category: "Vegetables", price: "$4", stocked: false, name: "Pumpkin"},{category: "Vegetables", price: "$1", stocked: true, name: "Peas"}
];export default function App() {return <FilterableProductTable products={PRODUCTS} />;
}

找出 UI 精简且完整的 state 表示

有一个规律可以了解下：

  • 随着时间推移 保持不变？如此，便不是 state。
  • 通过 props 从父组件传递？如此，便不是 state。
  • 是否可以基于已存在于组件中的 state 或者 props 进行计算？如此，它肯定不是state！

剩下的可能是 state。所以
让我们再次一条条验证它们:

  • 原始列表中的产品 被作为 props 传递，所以不是 state。
  • 搜索文本似乎应该是 state，因为它会随着时间的推移而变化，并且无法从任何东西中计算出来。
  • 复选框的值似乎是 state，因为它会随着时间的推移而变化，并且无法从任何东西中计算出来。
  • 过滤后列表中的产品 不是 state，因为可以通过被原始列表中的产品，根据搜索框文本和复选框的值进行计算。
  • props 像是你传递的参数 至函数。它们使父组件可以传递数据给子组件，定制它们的展示。举个例子，Form 可以传递 color prop 至 Button。
  • state 像是组件的内存。它使组件可以对一些信息保持追踪，并根据交互来改变。举个例子，Button 可以保持对 isHovered state 的追踪。

验证 state 应该被放置在哪里

验证哪个组件是通过改变 state 实现可响应的，或者 拥有 这个 state。

记住：React 使用单向数据流，通过组件层级结构从父组件传递数据至子组件。要搞清楚哪个组件拥有哪个 state。

验证使用 state 的组件：

  1. ProductTable 需要基于 state (搜索文本和复选框值) 过滤产品列表。
  2. SearchBar 需要展示 state (搜索文本和复选框值)。
  3. 寻找它们的父组件：它们的第一个共同父组件为 FilterableProductTable。

决定 state 放置的地方：我们将过滤文本和勾选 state 的值放置于 FilterableProductTable 中。所以 state 将被放置在 FilterableProductTable。

import { useState } from 'react';function FilterableProductTable({ products }) {const [filterText, setFilterText] = useState('');const [inStockOnly, setInStockOnly] = useState(false);return (<div><SearchBarfilterText={filterText}inStockOnly={inStockOnly} /><ProductTableproducts={products}filterText={filterText}inStockOnly={inStockOnly} /></div>);
}

然后，filterText 和 inStockOnly 作为 props 传递至 ProductTable 和 SearchBar。

添加反向数据流

简单来讲就是添加事件，当用户更改表单输入时，state 将更新以反映这些更改。state 由 FilterableProductTable 所拥有，所以只有它可以调用 setFilterText 和 setInStockOnly。

function SearchBar({filterText,inStockOnly,onFilterTextChange,onInStockOnlyChange
}) {return (<form><inputtype="text"value={filterText}placeholder="搜索"onChange={(e) => onFilterTextChange(e.target.value)}/><label><inputtype="checkbox"checked={inStockOnly}onChange={(e) => onInStockOnlyChange(e.target.checked)}

完整代码如下

这里的事件反向流是用于操作state的，这东西又是私有的，所以需要一个事件函数传递的过程，即

  • 自定义组件FilterableProductTable定义了一个filterText变量；
  • 在FilterableProductTable中包含子组件SearchBar，子组件中有这个输入框，所以需要把filterText的设置函数传递进去；
  • SearchBar 组件需要定义一个参数接收state方法，这个方法供原生的onChange触发
import { useState } from 'react';function FilterableProductTable({ products }) {const [filterText, setFilterText] = useState('');const [inStockOnly, setInStockOnly] = useState(false);return (<div><SearchBarfilterText={filterText}inStockOnly={inStockOnly}onFilterTextChange={setFilterText}onInStockOnlyChange={setInStockOnly} /><ProductTableproducts={products}filterText={filterText}inStockOnly={inStockOnly} /></div>);
}function ProductCategoryRow({ category }) {return (<tr><th colSpan="2">{category}</th></tr>);
}function ProductRow({ product }) {const name = product.stocked ? product.name :<span style={{ color: 'red' }}>{product.name}</span>;return (<tr><td>{name}</td><td>{product.price}</td></tr>);
}function ProductTable({ products, filterText, inStockOnly }) {const rows = [];let lastCategory = null;products.forEach((product) => {if (product.name.toLowerCase().indexOf(filterText.toLowerCase()) === -1) {return;}if (inStockOnly && !product.stocked) {return;}if (product.category !== lastCategory) {rows.push(<ProductCategoryRowcategory={product.category}key={product.category} />);}rows.push(<ProductRowproduct={product}key={product.name} />);lastCategory = product.category;});return (<table><thead><tr><th>Name</th><th>Price</th></tr></thead><tbody>{rows}</tbody></table>);
}function SearchBar({filterText,inStockOnly,onFilterTextChange,onInStockOnlyChange}) {return (<form><inputtype="text"value={filterText} placeholder="Search..."onChange={(e) => onFilterTextChange(e.target.value)} /><label><inputtype="checkbox"checked={inStockOnly}onChange={(e) => onInStockOnlyChange(e.target.checked)} />{' '}Only show products in stock</label></form>);
}const PRODUCTS = [{category: "Fruits", price: "$1", stocked: true, name: "Apple"},{category: "Fruits", price: "$1", stocked: true, name: "Dragonfruit"},{category: "Fruits", price: "$2", stocked: false, name: "Passionfruit"},{category: "Vegetables", price: "$2", stocked: true, name: "Spinach"},{category: "Vegetables", price: "$4", stocked: false, name: "Pumpkin"},{category: "Vegetables", price: "$1", stocked: true, name: "Peas"}
];export default function App() {return <FilterableProductTable products={PRODUCTS} />;
}

相关文章：

  • 双指针算法：原理与应用详解
  • Notepad++ 学习（三）使用python插件编写脚本：实现跳转指定标签页（自主研发）
  • 龙芯中科2024年度业绩说明会：企稳向好，布局未来！
  • 抽奖相关功能测试思路
  • NIFI的处理器：PutDatabaseRecord 2.4.0
  • 【数据仓库面试题合集③】实时数仓建模思路与实践详解
  • C++_AVL树
  • 从API到UI：直播美颜SDK中的滤镜与贴纸功能开发与落地方案详解
  • 打破传统仓库管理困局：WMS如何重构出入库全流程
  • 告别Spring AI！我的Java轻量AI框架实践（支持多模型接入|注解式MCP架构|附开源地址）
  • 【框架安装】win10 配置安装GPU加速的tensorflow和keras教程
  • 3D 数据交换格式（.3DXML）简介
  • 【esp32 控制台】-命令
  • Flink流处理：实时计算URL访问量TopN（基于时间窗口）
  • 互联网大厂Java求职面试：Spring AI与大模型交互的高级模式与自定义开发
  • 【神经网络与深度学习】model.eval() 模式
  • WEB安全--SQL注入--MSSQL注入
  • “保证医疗器械信息来源合法 真实、安全的保障措施、情况说明及相关证明”模板
  • Python 与 面向对象编程（OOP）
  • Web漏洞扫描服务的特点与优势：守护数字时代的安全防线
  • 66岁华仁世纪集团有限公司创始人、董事长梁福东逝世
  • 红星控股重整期间实控人被留置后续：重整草案不会修改，涉车建兴职责已调整
  • 脱欧后首次英欧峰会召开前夕，双方却因渔业和青年流动议题僵住了
  • “80后”北大硕士罗婕履新甘肃宁县县委常委、组织部部长
  • 推开“房间”的门：一部“生命存在的舞台” 史
  • 国宝归来！子弹库帛书二、三卷抵达北京