Skip to content

Commit 8ca88ff

Browse files
yangshunyangshun
committed
i18n: translate all qns
1 parent a329c7b commit 8ca88ff

File tree

100 files changed

+7338
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

100 files changed

+7338
-0
lines changed

‎questions/explain-one-way-data-flow-of-react-and-its-benefits/en-US.langnostic.json

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
{
2+
"frontmatter": {
3+
"title": "74dcaf9"
4+
},
5+
"content": {
6+
"source": {
7+
"locale": "en-US",
8+
"hashes": [
9+
"77da26a5",
10+
"bf2da619",
11+
"2a7816d0",
12+
"f100e86a",
13+
"62e3785",
14+
"f9a4a61e",
15+
"9b5019f0",
16+
"bb6ad948",
17+
"512d4005",
18+
"df6d0005",
19+
"c32224bc",
20+
"349bbc4a",
21+
"389d0daa",
22+
"182800d5",
23+
"117d06f9",
24+
"98a50d6b",
25+
"f9866dae",
26+
"1f4770e5",
27+
"5f3a5413"
28+
]
29+
},
30+
"targets": {
31+
"zh-CN": [
32+
"77da26a5",
33+
"bf2da619",
34+
"2a7816d0",
35+
"f100e86a",
36+
"62e3785",
37+
"f9a4a61e",
38+
"9b5019f0",
39+
"bb6ad948",
40+
"512d4005",
41+
"df6d0005",
42+
"c32224bc",
43+
"349bbc4a",
44+
"389d0daa",
45+
"182800d5",
46+
"117d06f9",
47+
"98a50d6b",
48+
"f9866dae",
49+
"1f4770e5",
50+
"5f3a5413"
51+
]
52+
}
53+
}
54+
}

‎questions/explain-one-way-data-flow-of-react-and-its-benefits/zh-CN.mdx

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
---
2+
title: 解释 React 的单向数据流及其优势
3+
---
4+
5+
## TL;DR
6+
7+
在 React 中，单向数据流意味着 React 应用程序中的数据以单个方向流动，从父组件到子组件。这使得数据流可预测且更易于调试。主要优点包括提高可维护性、更易于调试和更好的性能。
8+
9+
***
10+
11+
## React 的单向数据流及其优势
12+
13+
### 什么是单向数据流？
14+
15+
在 React 中，单向数据流是指数据以单个方向流动，从父组件到子组件的概念。这是通过使用 `props` 实现的。父组件通过 `props` 将数据传递给子组件，子组件只能读取这些 `props`，但不能修改它们。如果子组件需要反馈给父组件，它会通过调用从父组件作为 prop 传递下来的函数来实现。
16+
17+
### 示例
18+
19+
这是一个简单的示例，用于说明单向数据流：
20+
21+
```jsx
22+
// ParentComponent.jsx
23+
import React, { useState } from 'react';
24+
import ChildComponent from './ChildComponent';
25+
26+
const ParentComponent = () => {
27+
const [data, setData] = useState('Hello from Parent');
28+
29+
const handleChange = (newData) => {
30+
setData(newData);
31+
};
32+
33+
return (
34+
<div>
35+
<h1>{data}</h1>
36+
<ChildComponent data={data} onChange={handleChange} />
37+
</div>
38+
);
39+
};
40+
41+
export default ParentComponent;
42+
43+
// ChildComponent.jsx
44+
import React from 'react';
45+
46+
const ChildComponent = ({ data, onChange }) => {
47+
return (
48+
<div>
49+
<p>{data}</p>
50+
<button onClick={() => onChange('Hello from Child')}>Change Data</button>
51+
</div>
52+
);
53+
};
54+
55+
export default ChildComponent;
56+
```
57+
58+
在此示例中，`ParentComponent` 通过 `props` 将 `data` 和 `handleChange` 函数传递给 `ChildComponent`。`ChildComponent` 可以读取 `data` 并调用 `onChange` 以反馈给父组件。
59+
60+
### 单向数据流的优势
61+
62+
#### 提高可维护性
63+
64+
单向数据流使应用程序结构更具可预测性，更易于理解。由于数据以单个方向流动，因此更容易跟踪数据随时间的变化，从而使代码库更易于维护。
65+
66+
#### 更易于调试
67+
68+
使用单向数据流，更容易查明可能发生错误的地点。由于数据只能从父级流向子级，因此您可以跟踪数据流并更快地确定问题来源。
69+
70+
#### 更好的性能
71+
72+
单向数据流可以带来更好的性能，因为它降低了数据管理的复杂性。React 的协调算法可以通过比较当前状态和先前状态来有效地更新 DOM，从而最大限度地减少所需的更新次数。
73+
74+
## 延伸阅读
75+
76+
* [React 组件和 props 文档](https://reactjs.org/docs/components-and-props.html)
77+
* [React 状态和生命周期文档](https://reactjs.org/docs/state-and-lifecycle.html)
78+
* [React 提升状态文档](https://reactjs.org/docs/lifting-state-up.html)

‎questions/explain-server-side-rendering-of-react-applications-and-its-benefits/en-US.langnostic.json

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
{
2+
"frontmatter": {
3+
"title": "37afa3e3"
4+
},
5+
"content": {
6+
"source": {
7+
"locale": "en-US",
8+
"hashes": [
9+
"77da26a5",
10+
"6a72a7b0",
11+
"2a7816d0",
12+
"efa46a08",
13+
"25841bc3",
14+
"66abf5fd",
15+
"4e8ede6c",
16+
"43069d97",
17+
"4ef53dec",
18+
"e6f2ba5a",
19+
"80a31f50",
20+
"474b69f9",
21+
"4ebf4dcc",
22+
"ced6ae25",
23+
"26104a22",
24+
"45bdfffe",
25+
"71c88e09",
26+
"264e4c2c",
27+
"4fddd280",
28+
"7e9fbf0a",
29+
"1f4770e5",
30+
"b9da6017"
31+
]
32+
},
33+
"targets": {
34+
"zh-CN": [
35+
"77da26a5",
36+
"6a72a7b0",
37+
"2a7816d0",
38+
"efa46a08",
39+
"25841bc3",
40+
"66abf5fd",
41+
"4e8ede6c",
42+
"43069d97",
43+
"4ef53dec",
44+
"e6f2ba5a",
45+
"80a31f50",
46+
"474b69f9",
47+
"4ebf4dcc",
48+
"ced6ae25",
49+
"26104a22",
50+
"45bdfffe",
51+
"71c88e09",
52+
"264e4c2c",
53+
"4fddd280",
54+
"7e9fbf0a",
55+
"1f4770e5",
56+
"b9da6017"
57+
]
58+
}
59+
}
60+
}

‎questions/explain-server-side-rendering-of-react-applications-and-its-benefits/zh-CN.mdx

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
---
2+
title: 解释 React 应用程序的服务器端渲染及其优势？
3+
---
4+
5+
## 总结
6+
7+
React 中的服务器端渲染 (SSR) 涉及在服务器上渲染 React 组件，并将完全渲染的 HTML 发送到客户端。这种方法可以改善初始加载时间和 SEO。服务器处理初始渲染，客户端通过 React 的水合过程接管。好处包括更快的初始页面加载、更好的 SEO 以及在较慢设备上的改进性能。
8+
9+
***
10+
11+
## 什么是 React 应用程序的服务器端渲染？
12+
13+
### 定义
14+
15+
服务器端渲染 (SSR) 是一种技术，服务器渲染 React 应用程序的初始 HTML 并将其发送到客户端。这与客户端渲染 (CSR) 形成对比，在客户端渲染中，浏览器下载一个最小的 HTML 页面，并使用 JavaScript 渲染内容。
16+
17+
### 工作原理
18+
19+
1. **初始请求**：当用户请求页面时，服务器处理此请求。
20+
2. **在服务器上渲染**：服务器使用 React 将组件渲染成 HTML。
21+
3. **将 HTML 发送到客户端**：服务器将完全渲染的 HTML 发送到客户端。
22+
4. **水合**：加载 HTML 后，React 接管并绑定事件处理程序，使页面具有交互性。
23+
24+
### 代码示例
25+
26+
这是一个使用 `Next.js` 的基本示例，这是一个支持开箱即用的 SSR 的流行 React 框架：
27+
28+
```javascript
29+
import React from 'react';
30+
31+
const Home = ({ data }) => (
32+
<div>
33+
<h1>欢迎来到我的 SSR React 应用程序</h1>
34+
<p>来自服务器的数据：{data}</p>
35+
</div>
36+
);
37+
38+
export async function getServerSideProps() {
39+
// 从 API 或数据库中获取数据
40+
const data = await fetchDataFromAPI();
41+
return { props: { data } };
42+
}
43+
44+
export default Home;
45+
```
46+
47+
## 服务器端渲染的优势
48+
49+
### 改进的初始加载时间
50+
51+
* **更快的内容显示**：由于服务器发送完全渲染的 HTML，用户看到内容的显示速度比 CSR 快，在 CSR 中，浏览器必须先下载并执行 JavaScript 才能渲染。
52+
53+
### 更好的 SEO
54+
55+
* **搜索引擎索引**：搜索引擎可以轻松地索引完全渲染的 HTML，从而改善应用程序的 SEO。这对于内容丰富的网站尤其重要。
56+
57+
### 在较慢设备上的性能
58+
59+
* **减少客户端处理**：SSR 减少了需要在客户端处理的 JavaScript 量，这对于使用较慢设备或网络状况不佳的用户来说是有益的。
60+
61+
### 增强的用户体验
62+
63+
* **感知性能**：用户会觉得应用程序更快，因为他们可以更快地看到内容，即使 JavaScript 仍在后台加载。
64+
65+
## 延伸阅读
66+
67+
* [React 中的服务器端渲染](https://reactjs.org/docs/react-dom-server.html)

‎questions/explain-static-generation-of-react-applications-and-its-benefits/en-US.langnostic.json

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
{
2+
"frontmatter": {
3+
"title": "17b3b8ce"
4+
},
5+
"content": {
6+
"source": {
7+
"locale": "en-US",
8+
"hashes": [
9+
"77da26a5",
10+
"2d11528a",
11+
"2a7816d0",
12+
"669c4f4e",
13+
"4fff29f",
14+
"f58033a",
15+
"db71e64",
16+
"36b185d3",
17+
"10cb0bd1",
18+
"905cf287",
19+
"8673c68",
20+
"357266f3",
21+
"65de325c",
22+
"3808017f",
23+
"4351478",
24+
"f9fe0b22",
25+
"dc4b812c",
26+
"74adc395",
27+
"eacab160",
28+
"8cc0201c",
29+
"6e0b9e77",
30+
"1f4770e5",
31+
"dd0ff6d9"
32+
]
33+
},
34+
"targets": {
35+
"zh-CN": [
36+
"77da26a5",
37+
"2d11528a",
38+
"2a7816d0",
39+
"669c4f4e",
40+
"4fff29f",
41+
"f58033a",
42+
"db71e64",
43+
"36b185d3",
44+
"10cb0bd1",
45+
"905cf287",
46+
"8673c68",
47+
"357266f3",
48+
"65de325c",
49+
"3808017f",
50+
"4351478",
51+
"f9fe0b22",
52+
"dc4b812c",
53+
"74adc395",
54+
"eacab160",
55+
"8cc0201c",
56+
"6e0b9e77",
57+
"1f4770e5",
58+
"dd0ff6d9"
59+
]
60+
}
61+
}
62+
}

0 commit comments

Comments
 (0)