Skip to content

Commit

Permalink
docs(cn): improve learn/think-in-react translation (#1341)
Browse files Browse the repository at this point in the history
  • Loading branch information
ZhaoTim authored Oct 15, 2023
1 parent 42cc2a1 commit 29dfb82
Showing 1 changed file with 2 additions and 2 deletions.
4 changes: 2 additions & 2 deletions src/content/learn/thinking-in-react.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,15 +34,15 @@ JSON API 返回如下的数据:

<img src="/images/docs/s_thinking-in-react_ui.png" width="300" style={{margin: '0 auto'}} />

仅需跟随下面的五步,即可使用 React 中实现 UI。
仅需跟随下面的五步,即可使用 React 来实现 UI。

## 步骤一:将 UI 拆解为组件层级结构 {/*step-1-break-the-ui-into-a-component-hierarchy*/}

一开始,在绘制原型中的每个组件和子组件周围绘制盒子并命名它们。如果你与设计师一起工作,他们可能早已在其设计工具中对这些组件进行了命名。检查一下它们!

取决于你的使用背景,可以考虑通过不同的方式将设计分割为组件:

* **程序设计**——使用同样的技术决定你是否应该创建一个新的函数或者对象。这一技术即 [单一功能原理](https://en.wikipedia.org/wiki/Single_responsibility_principle),也就是说,一个组件理想得仅做一件事情。但随着功能的持续增长,它应该被分解为更小的子组件。
* **程序设计**——使用同样的技术决定你是否应该创建一个新的函数或者对象。这一技术即 [单一功能原理](https://en.wikipedia.org/wiki/Single_responsibility_principle),也就是说,一个组件理想情况下应仅做一件事情。但随着功能的持续增长,它应该被分解为更小的子组件。
* **CSS**——思考你将把类选择器用于何处。(然而,组件并没有那么细的粒度。)
* **设计**——思考你将如何组织布局的层级。

Expand Down

0 comments on commit 29dfb82

Please sign in to comment.