Skip to content

Commit 5da256c

Browse files
liaoyongfuliaoyongfu
committed
doc: 翻译33到50题
1 parent 7f3834f commit 5da256c

File tree

1 file changed

+95
-63
lines changed

1 file changed

+95
-63
lines changed

‎README.md‎

Lines changed: 95 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050
|31 | [createElement 和 cloneElement 有什么区别？](#createelement-和-cloneelement-有什么区别) |
5151
|32 | [在 React 中的提升状态是什么？](#在-react-中的提升状态是什么) |
5252
|33 | [组件生命周期的不同阶段是什么？](#组件生命周期的不同阶段是什么) |
53-
|34 | [What are the lifecycle methods of React?](#what-are-the-lifecycle-methods-of-react) |
53+
|34 | [React 生命周期方法有哪些?](#react-生命周期方法有哪些?) |
5454
|35 | [What are Higher-Order Components?](#what-are-higher-order-components) |
5555
|36 | [How to create props proxy for HOC component?](#how-to-create-props-proxy-for-hoc-component) |
5656
|37 | [What is context?](#what-is-context) |
@@ -912,33 +912,35 @@
912912
Before 16.3
913913

914914
- **componentWillMount:** 在组件`render()`前执行，用于根组件中的应用程序级别配置。应该避免在该方法中引入任何的副作用或订阅。
915-
- **componentDidMount:** Executed after first rendering and here all AJAX requests, DOM or state updates, and set up event listeners should occur.
916-
- **componentWillReceiveProps:** Executed when particular prop updates to trigger state transitions.
917-
- **shouldComponentUpdate:** Determines if the component will be updated or not. By default it returns `true`. If you are sure that the component doesn't need to render after state or props are updated, you can return false value. It is a great place to improve performance as it allows you to prevent a re-render if component receives new prop.
918-
- **componentWillUpdate:** Executed before re-rendering the component when there are props & state changes confirmed by `shouldComponentUpdate()` which returns true.
919-
- **componentDidUpdate:** Mostly it is used to update the DOM in response to prop or state changes.
920-
- **componentWillUnmount:** It will be used to cancel any outgoing network requests, or remove all event listeners associated with the component.
915+
- **componentDidMount:** 首次渲染后调用，所有得 Ajax 请求、DOM 或状态更新、设置事件监听器都应该在此处发生。
916+
- **componentWillReceiveProps:** 在组件接收到新属性前调用，若你需要更新状态响应属性改变（例如，重置它），你可能需对比`this.props`和`nextProps`并在该方法中使用`this.setState()`处理状态改变。
917+
- **shouldComponentUpdate:** 确定组件是否应该更新。 默认情况下，它返回`true`。 如果您确定在更新状态或属性后不需要渲染组件，则可以返回`false`值。 它是一个提高性能的好地方，因为它允许您在组件接收新属性时阻止重新渲染。
918+
- **componentWillUpdate:** 当`shouldComponentUpdate`返回`true`后重新渲染组件之前执行，注意你不能在这调用`this.setState()`
919+
- **componentDidUpdate:** 它主要用于更新 DOM 以响应 prop 或 state 更改。 如果`shouldComponentUpdate()`返回`false`，则不会触发。
920+
- **componentWillUnmount:** 当一个组件被从 DOM 中移除时，该方法被调用，取消网络请求或者移除与该组件相关的事件监听程序等应该在这里进行。
921921

922-
35. ### What are Higher-Order Components?
922+
35. ### 什么是高阶组件（HOC）?
923923

924-
A *higher-order component* (*HOC*) is a function that takes a component and returns a new component. Basically, it's a pattern that is derived from React's compositional nature.
924+
*高阶组件*(*HOC*)就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件，它只是一种模式，这种模式是由`react`自身的组合性质必然产生的。
925925

926-
We call them **pure components** because they can accept any dynamically provided child component but they won't modify or copy any behavior from their input components.
926+
我们将它们称为**纯组件**，因为它们可以接受任何动态提供的子组件，但它们不会修改或复制其输入组件中的任何行为。
927927

928928
```javascript
929929
const EnhancedComponent = higherOrderComponent(WrappedComponent)
930930
```
931931

932-
HOC can be used for many use cases:
932+
HOC 有很多用例：
933933

934-
1. Code reuse, logic and bootstrap abstraction.
935-
2. Render hijacking.
936-
3. State abstraction and manipulation.
937-
4. Props manipulation.
934+
1. 代码复用，逻辑抽象化
935+
2. 渲染劫持
936+
3. 抽象化和操作状态（`state`）
937+
4. 操作属性（`props`）
938+
939+
> 译注：更详细用法请参考[高阶组件的使用](https://react.docschina.org/docs/higher-order-components.html)
938940

939-
36. ### How to create props proxy for HOC component?
941+
36. ### 如何为高阶组件创建属性代理？
940942

941-
You can add/edit props passed to the component using *props proxy* pattern like this:
943+
你可以使用*属性代理*模式向输入组件增加或编辑属性（props）：
942944

943945
```jsx harmony
944946
function HOC(WrappedComponent) {
@@ -949,28 +951,56 @@
949951
footer: false,
950952
showFeatureX: false,
951953
showFeatureY: true
952-
}
954+
};
953955

954956
return <WrappedComponent {...this.props} {...newProps} />
955957
}
956958
}
957959
}
958960
```
959961
960-
37. ### What is context?
962+
37. ### 什么是上下文（Context）?
961963
962-
*Context* provides a way to pass data through the component tree without having to pass props down manually at every level. For example, authenticated user, locale preference, UI theme need to be accessed in the application by many components.
964+
*Context* 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递`props`。比如，需要在应用中许多组件需要访问登录用户信息、地区偏好、UI主题等。
963965
964-
```javascript
965-
const {Provider, Consumer} = React.createContext(defaultValue)
966+
```jsx harmony
967+
// 创建一个 theme Context, 默认 theme 的值为 light
968+
const ThemeContext = React.createContext('light');
969+
970+
function ThemedButton(props) {
971+
// ThemedButton 组件从 context 接收 theme
972+
return (
973+
<ThemeContext.Consumer>
974+
{theme => <Button {...props} theme={theme} />}
975+
</ThemeContext.Consumer>
976+
);
977+
}
978+
979+
// 中间组件
980+
function Toolbar(props) {
981+
return (
982+
<div>
983+
<ThemedButton />
984+
</div>
985+
);
986+
}
987+
988+
class App extends React.Component {
989+
render() {
990+
return (
991+
<ThemeContext.Provider value="dark">
992+
<Toolbar />
993+
</ThemeContext.Provider>
994+
);
995+
}
996+
}
966997
```
967998
968-
38. ### What is children prop?
999+
38. ### children 属性是什么?
9691000
970-
*Children* is a prop (`this.prop.children`) that allow you to pass components as data to other components, just like any other prop you use. Component tree put between component's opening and closing tag will be passed to that component as `children` prop.
1001+
*Children* 是一个属性（`this.props.chldren`），它允许您将组件作为数据传递给其他组件，就像您使用的任何其他组件一样。在组件的开始和结束标记之间放置的组件树将作为`children`属性传递给该组件。
9711002
972-
There are a number of methods available in the React API to work with this prop. These include `React.Children.map`, `React.Children.forEach`, `React.Children.count`, `React.Children.only`, `React.Children.toArray`.
973-
A simple usage of children prop looks as below,
1003+
React API 中有许多方法中提供了这个不透明数据结构的方法，包括：`React.Children.map`、`React.Children.forEach`、`React.Children.count`、`React.Children.only`、`React.Children.toArray`。
9741004
9751005
```jsx harmony
9761006
const MyDiv = React.createClass({
@@ -988,34 +1018,34 @@
9881018
)
9891019
```
9901020
991-
39. ### How to write comments in React?
1021+
39. ### 怎样在 React 中写注释?
9921022
993-
The comments in React/JSX are similar to JavaScript Multiline comments but are wrapped in curly braces.
1023+
React/JSX 中的注释类似于 JavaScript 的多行注释，但是是用大括号括起来。
9941024
995-
**Single-line comments:**
1025+
**单行注释：**
9961026
9971027
```jsx harmony
9981028
<div>
999-
{/* Single-line comments(In vanilla JavaScript, the single-line comments are represented by double slash(//)) */}
1029+
{/* 单行注释（在原生 JavaScript 中，单行注释用双斜杠（//）表示） */}
10001030
{`Welcome ${user}, let's play React`}
10011031
</div>
10021032
```
10031033
1004-
**Multi-line comments:**
1034+
**多行注释：**
10051035
10061036
```jsx harmony
10071037
<div>
1008-
{/* Multi-line comments for more than
1009-
one line */}
1038+
{/* 多行注释超过
1039+
一行 */}
10101040
{`Welcome ${user}, let's play React`}
10111041
</div>
10121042
```
10131043
1014-
40. ### What is the purpose of using super constructor with props argument?
1044+
40. ### 构造函数使用带 props 参数的目的是什么？
10151045
1016-
A child class constructor cannot make use of `this` reference until `super()` method has been called. The same applies for ES6 sub-classes as well. The main reason of passing props parameter to `super()` call is to access `this.props` in your child constructors.
1046+
在调用`super()`方法之前，子类构造函数不能使用`this`引用。这同样适用于ES6子类。将`props`参数传递给`super()`的主要原因是为了在子构造函数中访问`this.props`。
10171047
1018-
**Passing props:**
1048+
**带 props 参数:**
10191049
10201050
```javascript
10211051
class MyComponent extends React.Component {
@@ -1027,7 +1057,7 @@
10271057
}
10281058
```
10291059
1030-
**Not passing props:**
1060+
**不带 props 参数:**
10311061
10321062
```javascript
10331063
class MyComponent extends React.Component {
@@ -1047,25 +1077,25 @@
10471077
}
10481078
```
10491079
1050-
The above code snippets reveals that `this.props` is different only within the constructor. It would be the same outside the constructor.
1080+
上面的代码片段显示`this.props`仅在构造函数中有所不同。 它在构造函数之外是相同的。
10511081
1052-
41. ### What is reconciliation?
1082+
41. ### 什么是调解？
10531083
1054-
When a component's props or state change, React decides whether an actual DOM update is necessary by comparing the newly returned element with the previously rendered one. When they are not equal, React will update the DOM. This process is called *reconciliation*.
1084+
当组件的`props`或`state`发生更改时，React 通过将新返回的元素与先前呈现的元素进行比较来确定是否需要实际的 DOM 更新。当它们不相等时，React 将更新 DOM 。此过程称为*reconciliation*。
10551085
1056-
42. ### How to set state with a dynamic key name?
1086+
42. ### 如何使用动态属性名设置 state ？
10571087
1058-
If you are using ES6 or the Babel transpiler to transform your JSX code then you can accomplish this with *computed property names*.
1088+
如果您使用 ES6 或 Babel 转换器来转换您的 JSX 代码，那么您可以使用*计算属性名称*来完成此操作。
10591089
10601090
```javascript
10611091
handleInputChange(event) {
10621092
this.setState({ [event.target.id]: event.target.value })
10631093
}
10641094
```
10651095
1066-
43. ### What would be the common mistake of function being called every time the component renders?
1096+
43. ### 每次组件渲染时调用函数的常见错误是什么？
10671097
1068-
You need to make sure that function is not being called while passing the function as a parameter.
1098+
您需要确保在将函数作为参数传递时未调用该函数。
10691099
10701100
```jsx harmony
10711101
render() {
@@ -1074,7 +1104,7 @@
10741104
}
10751105
```
10761106
1077-
Instead, pass the function itself without parenthesis:
1107+
相反地，传递函数本身应该没有括号：
10781108
10791109
```jsx harmony
10801110
render() {
@@ -1083,23 +1113,23 @@
10831113
}
10841114
```
10851115
1086-
44. ### Why is it necessary to capitalize component names?
1116+
44. ### 为什么有组件名称要首字母大写？
10871117
1088-
It is necessary because components are not DOM elements, they are constructors. Also, in JSX lowercase tag names are referring to HTML elements, not components.
1118+
这是必要的，因为组件不是 DOM 元素，它们是构造函数。 此外，在 JSX 中，小写标记名称是指 HTML 元素，而不是组件。
10891119
1090-
45. ### Why React uses `className` over `class` attribute?
1120+
45. ### 为什么 React 使用`className`而不是`class`属性？
10911121
1092-
`class` is a keyword in JavaSript, and JSX is an extension of JavaScript. That's the principal reason why React uses `className` instead of `class`. Pass a string as the `className` prop.
1122+
`class`是 JavaScript 中的关键字，而 JSX 是JavaScript的扩展。这就是为什么 React 使用`className`而不是`class`的主要原因。传递一个字符串作为`className`属性。
10931123
10941124
```jsx harmony
10951125
render() {
10961126
return <span className={'menu navigation-menu'}>{'Menu'}</span>
10971127
}
10981128
```
10991129
1100-
46. ### What are fragments?
1130+
46. ### 什么是 Fragments ？
11011131
1102-
It's common pattern in React which is used for a component to return multiple elements. *Fragments* let you group a list of children without adding extra nodes to the DOM.
1132+
它是 React 中的常见模式，用于组件返回多个元素。*Fragments*可以让你聚合一个子元素列表，而无需向 DOM 添加额外节点。
11031133
11041134
```jsx harmony
11051135
render() {
@@ -1113,7 +1143,7 @@
11131143
}
11141144
```
11151145
1116-
There is also a *shorter syntax*, but it's not supported in many tools:
1146+
以下是简介语法，但是在一些工具中还不支持：
11171147
11181148
```jsx harmony
11191149
render() {
@@ -1126,30 +1156,32 @@
11261156
)
11271157
}
11281158
```
1159+
1160+
> 译注：`React 16` 以前，`render` 函数的返回必须有一个根节点，否则报错。
11291161
1130-
47. ### Why fragments are better than container divs?
1162+
47. ### 为什么使用 Fragments 比使用容器 div 更好？
11311163
1132-
1. Fragments are a bit faster and use less memory by not creating an extra DOM node. This only has a real benefit on very large and deep trees.
1133-
2. Some CSS mechanisms like *Flexbox* and *CSS Grid* have a special parent-child relationships, and adding divs in the middle makes it hard to keep the desired layout.
1134-
3. The DOM Inspector is less cluttered.
1164+
1. 通过不创建额外的 DOM 节点，Fragments 更快并且使用更少的内存。这在非常大而深的节点树时很有好处。
1165+
2. 一些 CSS 机制如*Flexbox*和*CSS Grid*具有特殊的父子关系，如果在中间添加 div 将使得很难保持所需的结构。
1166+
3. 在 DOM 审查器中不会那么的杂乱
11351167
1136-
48. ### What are portals in React?
1168+
48. ### 在 React 中什么是 Portal ？
11371169
1138-
*Portal* is a recommended way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
1170+
*Portal* 提供了一种很好的将子节点渲染到父组件以外的 DOM 节点的方式。
11391171
11401172
```javascript
11411173
ReactDOM.createPortal(child, container)
11421174
```
11431175
1144-
The first argument is any render-able React child, such as an element, string, or fragment. The second argument is a DOM element.
1176+
第一个参数是任何可渲染的 React 子节点，例如元素，字符串或片段。第二个参数是 DOM 元素。
11451177
1146-
49. ### What are stateless components?
1178+
49. ### 什么是无状态组件？
11471179
1148-
If the behaviour is independent of its state then it can be a stateless component. You can use either a function or a class for creating stateless components. But unless you need to use a lifecycle hook in your components, you should go for function components. There are a lot of benefits if you decide to use function components here; they are easy to write, understand, and test, a little faster, and you can avoid the `this` keyword altogether.
1180+
如果行为独立于其状态，则它可以是无状态组件。您可以使用函数或类来创建无状态组件。但除非你需要在组件中使用生命周期钩子，否则你应该选择函数组件。无状态组件有很多好处： 它们易于编写，理解和测试，速度更快，而且您可以完全避免使用`this`关键字。
11491181
1150-
50. ### What are stateful components?
1182+
50. ### 什么是有状态组件？
11511183
1152-
If the behaviour of a component is dependent on the *state* of the component then it can be termed as stateful component. These *stateful components* are always *class components* and have a state that gets initialized in the `constructor`.
1184+
如果组件的行为依赖于组件的*state*，那么它可以被称为有状态组件。这些*有状态组件*总是*类组件*，并且具有在`constructor`中初始化的状态。
11531185

11541186
```javascript
11551187
class App extends Component {

0 commit comments

Comments
 (0)