Skip to content

Commit

Permalink
fix: fixing a few errors
Browse files Browse the repository at this point in the history
  • Loading branch information
KnowsCount authored Jan 22, 2022
1 parent 4e57c12 commit d9189ed
Showing 1 changed file with 6 additions and 5 deletions.
11 changes: 6 additions & 5 deletions beta/src/pages/learn/thinking-in-react.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
title: React 哲学
translators:
- HerbertHe
- KnowsCount
---

<Intro>
Expand Down Expand Up @@ -79,7 +80,7 @@ JSON API 返回如下的数据:

构建应用程序的静态版本来渲染你的数据模型,将构建 [组件](/learn/your-first-component) 并复用其它的组件,然后使用 [props](/learn/passing-props-to-a-component) 进行传递数据。Props 是从父组件向子组件传递数据的一种方式。(如果你对 [state](/learn/state-a-components-memory) 章节很熟悉,不要在静态版本中使用 state 进行构建。state 只是为交互提供的保留功能,即数据会随着时间变化。因为这是一个静态应用程序,所以并不需要。)

你既可以通过从层次结构更高层组件 (如 `FilterableProductTable`) 开始 "自上而下" 构建,也可以通过从更低层级组件 (如 `ProductRow`) "自下而上" 进行构建。在简单的例子中,自上而下构建通常更简单; 而在大型项目中,自下而上构建更简单。
你既可以通过从层次结构更高层组件 (如 `FilterableProductTable`) 开始 "自上而下" 构建,也可以通过从更低层级组件 (如 `ProductRow`) "自下而上" 进行构建。在简单的例子中,自上而下构建通常更简单而在大型项目中,自下而上构建更简单。

<Sandpack>

Expand Down Expand Up @@ -197,7 +198,7 @@ td {

</Sandpack>

**如果示例看起来很吓人,不要感到烦躁!* 在本篇指南中,我们将更关注于概念而非代码。收藏 [描述 UI](/learn/describing-the-ui) 的内容,将会帮助你填补短板、理解代码。
**如果示例看起来很吓人,不要感到烦躁!**在本篇指南中,我们将更关注于概念而非代码。收藏 [描述 UI](/learn/describing-the-ui) 的内容,将会帮助你填补短板、理解代码。

在构建你的组件之后,即拥有一个渲染数据模型的可复用组件库。因为这是一个静态应用程序,组件仅返回 JSX。最顶层组件 (`FilterableProductTable`) 将接收你的数据模型作为其 prop。这被称之为 _单向数据流_,因为数据从树的顶层组件传递到下面的组件。

Expand Down Expand Up @@ -230,10 +231,10 @@ td {

让我们再次一条条验证它们:

1. 原始列表中的产品**作为 props 传递,所以它不是 state**
1. 原始列表中的产品 **被作为 props 传递,所以不是 state**
2. 搜索文本随着时间推移保持不变,似乎是 state,并不能被计算。
3. 复选框的值随着时间推移保持不变,似乎是 state,并不能被计算。
4. 过滤后列表中的产品**不是 state,因为可以通过被原始列表中的产品,根据搜索框文本和复选框的值进行计算**
4. 过滤后列表中的产品 **不是 state,因为可以通过被原始列表中的产品,根据搜索框文本和复选框的值进行计算**

这就意味着只有搜索文本和复选框的值是 state!非常好!

Expand All @@ -250,7 +251,7 @@ Props 和 state 是不同的,但它们可以共同工作。父组件将经常

## 步骤四: 验证 state 应该被放置在哪里 {/*step-4-identify-where-your-state-should-live*/}

在验证你应用程序中的最小 state 数据之后,你需要验证哪个组件是通过改变 state 实现可响应的,或者*拥有*这个 state。记住: React 使用单向数据流,通过组件层级结构从父组件传递数据至子组件。这可能不能立马知晓哪个组件拥有什么 state。如果你是第一次阅读此章节可能会感到有挑战性,但可以通过下面的步骤搞定它!
在验证你应用程序中的最小 state 数据之后,你需要验证哪个组件是通过改变 state 实现可响应的,或者 *拥有* 这个 state。记住React 使用单向数据流,通过组件层级结构从父组件传递数据至子组件。这可能不能立马知晓哪个组件拥有什么 state。如果你是第一次阅读此章节可能会感到有挑战性,但可以通过下面的步骤搞定它!

为你应用程序中的每一个 state:

Expand Down

0 comments on commit d9189ed

Please sign in to comment.