You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: beta/src/pages/learn/describing-the-ui.md
+50-47
Original file line number
Diff line number
Diff line change
@@ -1,29 +1,34 @@
1
1
---
2
-
title: Describing the UI
2
+
title: 描述用户界面
3
+
translators:
4
+
- ChelesteWang
5
+
- QC-L
6
+
- KnowsCount
7
+
- lyj505
3
8
---
4
9
5
10
<Intro>
6
11
7
-
React is a JavaScript library for rendering user interfaces (UI). UI is built from small units like buttons, text, and images. React lets you combine them into reusable, nestable *components.* From web sites to phone apps, everything on the screen can be broken down into components. In this chapter, you'll learn to create, customize, and conditionally display React components.
12
+
React 是一个用于构建用户界面（UI）的 JavaScript 库，用户界面由按钮、文本和图像等小单元内容构建而成。React 帮助你把它们组合成可重用、可嵌套的 *组件*。从 web 端网站到移动端应用，屏幕上的所有内容都可以被分解成组件。在本章节中，你将学习如何创建、定制以及有条件地显示 React 组件。
8
13
9
14
</Intro>
10
15
11
16
<YouWillLearnisChapter={true}>
12
17
13
-
*[How to write your first React component](/learn/your-first-component)
14
-
*[When and how to create multi-file components](/learn/importing-and-exporting-components)
15
-
*[How to add markup to JavaScript with JSX](/learn/writing-markup-with-jsx)
16
-
*[How to use curly braces with JSX to access JavaScript functionality from your components](/learn/javascript-in-jsx-with-curly-braces)
17
-
*[How to configure components with props](/learn/passing-props-to-a-component)
18
-
*[How to conditionally render components](/learn/conditional-rendering)
19
-
*[How to render multiple components at a time](/learn/rendering-lists)
20
-
*[How to avoid confusing bugs by keeping components pure](/learn/keeping-components-pure)
## Your first component {/*your-first-component*/}
29
+
## 你的第一个组件 {/*your-first-component*/}
25
30
26
-
React applications are built from isolated pieces of UI called "components". A React component is a JavaScript function that you can sprinkle with markup. Components can be as small as a button, or as large as an entire page. Here is a `Gallery`component rendering three `Profile`components:
## Importing and exporting components {/*importing-and-exporting-components*/}
65
-
66
-
You can declare many components in one file, but large files can get difficult to navigate. To solve this, you can *export* a component into its own file, and then *import* that component from another file:
## Writing markup with JSX {/*writing-markup-with-jsx*/}
122
+
## 使用 JSX 编写标记 {/*writing-markup-with-jsx*/}
120
123
121
-
Each React component is a JavaScript function that may contain some markup that React renders into the browser. React components use a syntax extension called JSX to represent that markup. JSX looks a lot like HTML, but it is a bit stricter and can display dynamic information.
JSX lets you write HTML-like markup inside a JavaScript file, keeping rendering logic and content in the same place. Sometimes you will want to add a little JavaScript logic or reference a dynamic property inside that markup. In this situation, you can use curly braces in your JSX to "open a window" to JavaScript:
React components use *props* to communicate with each other. Every parent component can pass some information to its child components by giving them props. Props might remind you of HTML attributes, but you can pass any JavaScript value through them, including objects, arrays, functions, and even JSX!
Your components will often need to display different things depending on different conditions. In React, you can conditionally render JSX using JavaScript syntax like `if`statements, `&&`, and`? :`operators.
You will often want to display multiple similar components from a collection of data. You can use JavaScript's `filter()`and`map()`with React to filter and transform your array of data into an array of components.
For each array item, you will need to specify a `key`. Usually, you will want to use an IDfrom the database as a `key`. KeysletReact keep track of each item's place in the list even if the list changes.
372
+
对于数组的每个元素项，你需要指定一个 `key`。通常你需要使用数据库中的 ID 作为 `key`。即使列表发生了变化，React 也可以通过 key 来跟踪每个元素在列表中的位置。
370
373
371
374
<Sandpack>
372
375
@@ -458,18 +461,18 @@ h2 { font-size: 20px; }
458
461
459
462
<LearnMorepath="/learn/rendering-lists">
460
463
461
-
Read**[Rendering Lists](/learn/rendering-lists)**to learn how to render a list of components, and how to choose a key.
## Keeping components pure {/*keeping-components-pure*/}
468
+
## 保持组件的纯粹 {/*keeping-components-pure*/}
466
469
467
-
Some JavaScript functions are “pure.” A pure function:
470
+
有些 JavaScript 函数是 "纯粹" 的。纯函数的基本定义：
468
471
469
-
***Minds its own business.** It does not change any objects or variables that existed before it was called.
470
-
***Same inputs, same output.** Given the same inputs, a pure function should always return the same result.
472
+
***管好自己的事**。 在函数调用前，它不会改变任何已经存在的对象或变量。
473
+
***输入相同，输出也相同**。 在输入相同的情况下，对纯函数来说应总是返回相同的结果。
471
474
472
-
By strictly only writing your components as pure functions, you can avoid an entire class of baffling bugs and unpredictable behavior as your codebase grows. Here is an example of an impure component:
0 commit comments