React 想给我们带来什么不同的思考？
官方文档说法
React 可以改变你对可见设计和应用构建的思考。当你使用 React 构建用户界面时，你首先会把它分解成一个个 组件，然后，你需要把这些组件连接在一起，使数据 流经 它们。
React官方链接 : React 哲学 – React 中文文档
怎么理解呢？
组件的思想
- 面对一个要实现的界面，React希望把界面划分为若干组件，然后再组合在一起。
- 每个组件都是独立的，有独立的样式和交互逻辑。
让数据在组件之间流动的思想
- 界面需要的数据可以在组件中传递。
- 传递有两个方向，正向数据流，父向子流动；子向父流动，被称为反向数据流。
- 在React中要求区别两种数据，简单来说就是静态的和动态的数据。
- 对于静态的数据只要在需要的组件内简单声明就可以，对于动态数据我们则需要React的特殊声明。
让我们结合一个简单例子来理解
假如我们接到一个开发这样一个页面的任务。
原型图：
要渲染的静态数据：
[
{ 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" }
]
第一步我们该做什么呢？
将界面划分为若干组件，想好我们要写几个组件，以及组件之间的嵌套关系
像这样：
-
FilterableProductTable（灰色）包含完整的应用。
-
SearchBar（蓝色）获取用户输入。
-
ProductTable（淡紫色）根据用户输入，展示和过滤清单。
-
ProductCategoryRow（绿色）展示每个类别的表头。
-
ProductRow（黄色）展示每个产品的行。
我们可以看到整个FilterableProductTable是最大的组件，容纳了 SearchBar和ProductTable两个子组件，ProductTable也包含了 ProductCategoryRow和 ProductRow组件。
第二步我们该干什么呢?
我们应该先写出设计图的静态页面，那我们先写那个组件呢？从大到小还是从小到大呢？
一般来说面对小项目一般从大到小，中大项目一般从小到大。
我们这里采取从子
// 产品目录行 组件
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 }) {
const rows = [];
let lastCategory = null;
products.forEach((product) => {
if (product.category !== lastCategory) {
rows.push(
<ProductCategoryRow
category={product.category}
key={product.category} />
);
}
rows.push(
<ProductRow
product={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() {
return (
<form>
<input type="text" placeholder="Search..." />
<label>
<input type="checkbox" />
{' '}
Only show products in stock
</label>
</form>
);
}
// 要实现的筛选表界面组件 最终结果
function FilterableProductTable({ products }) {
return (
<div>
<SearchBar />
<ProductTable products={products} />
</div>
);
}
// 静态 数据
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} />;
}
第三步我们该干什么呢？
为了让界面实现交互，我们找出必须要用state表示的数据。
什么数据要用state表示呢？
这是React官网给出的建议：“考虑将 state 作为应用程序需要记住改变数据的最小集合。”
我们一起来看它的分析：
“
现在考虑示例应用程序中的每一条数据:
- 产品原始列表
- 搜索用户键入的文本
- 复选框的值
- 过滤后的产品列表
其中哪些是 state 呢？标记出那些不是的:
- 随着时间推移 保持不变？如此，便不是 state。
- 通过 props 从父组件传递？如此，便不是 state。
- 是否可以基于已存在于组件中的 state 或者 props 进行计算？如此，它肯定不是state！
剩下的可能是 state。
让我们再次一条条验证它们:
- 原始列表中的产品 被作为 props 传递，所以不是 state。
- 搜索文本似乎应该是 state，因为它会随着时间的推移而变化，并且无法从任何东西中计算出来。
- 复选框的值似乎是 state，因为它会随着时间的推移而变化，并且无法从任何东西中计算出来。
- 过滤后列表中的产品 不是 state，因为可以通过被原始列表中的产品，根据搜索框文本和复选框的值进行计算。
这就意味着只有搜索文本和复选框的值是 state！非常好！”
简要来说就是数据在和用户交互过程中产生的变化的数据，要用state 来管理。
第四步
验证 state 应该被放置在哪里
我们现在知道了有两个数据，一个是输入框的值，一个是一个复选框的值， ProductTable这个组件需要根据这两个值来筛选出要渲染的动态页面。SearchBar这个组件要根据一个是输入框的值来渲染输入的数据。这两个state要放在ProductTable和SearchBar的父组件，所以我们要把这两个state放到FilterableProductTable，使得ProductTable和SearchBar都能得到通过state方式产生的数据
function FilterableProductTable({ products }) {
const [filterText, setFilterText] = useState('');
const [inStockOnly, setInStockOnly] = useState(false);
// ······ 其他省略
}
然后，filterText 和 inStockOnly 作为 props 传递至 ProductTable 和 SearchBar：
<div>
<SearchBar
filterText={filterText}
inStockOnly={inStockOnly} />
<ProductTable
products={products}
filterText={filterText}
inStockOnly={inStockOnly} />
</div>
我们一起看看组件内是怎么使用传入的参数：
function SearchBar({ filterText, inStockOnly }) {
return (
<form>
<input
type="text"
value={filterText}
placeholder="Search..."/>
</form> )
}
第五步
步骤五：添加反向数据流
当state的数据和组件里的值绑定后，比如 SearchBar里的
<input
type="text"
value={filterText}
placeholder="Search..."/>
当input的value和{filterText} 绑定，如果我们不主动添加响应value变化的函数的话，React会忽视你的输入。效果如下
敲多少回车都没用。
在 SearchBar 中，添加一个 onChange 事件处理器，使用其设置父组件的 state：
function SearchBar({
filterText,
inStockOnly,
onFilterTextChange,
onInStockOnlyChange
}) {
return (
<form>
<input
type="text"
value={filterText}
placeholder="搜索"
onChange={(e) => onFilterTextChange(e.target.value)}
/>
<label>
<input
type="checkbox"
checked={inStockOnly}
onChange={(e) => onInStockOnlyChange(e.target.checked)}
现在应用程序可以完整工作了！
最后附上完整源码App.jsx文件里的所有内容
import { useState } from 'react';
function FilterableProductTable({ products }) {
const [filterText, setFilterText] = useState('');
const [inStockOnly, setInStockOnly] = useState(false);
return (
<div>
<SearchBar
filterText={filterText}
inStockOnly={inStockOnly}
onFilterTextChange={setFilterText}
onInStockOnlyChange={setInStockOnly} />
<ProductTable
products={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(
<ProductCategoryRow
category={product.category}
key={product.category} />
);
}
rows.push(
<ProductRow
product={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>
<input
type="text"
value={filterText} placeholder="Search..."
onChange={(e) => onFilterTextChange(e.target.value)} />
<label>
<input
type="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} />;
}
如果有有不理解的地方，可以去React 哲学 – React 中文文档看看，这篇博客基本就是基于这个文档写的。
登录
