Skip to content

Commit ee81baa

Browse files
committed
docs(en): merging all conflicts
2 parents 278f926 + 2571aee commit ee81baa

File tree

6 files changed

+123
-1
lines changed

6 files changed

+123
-1
lines changed

src/content/learn/removing-effect-dependencies.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1240,7 +1240,11 @@ export default function Timer() {
12401240
12411241
</Sandpack>
12421242
1243+
<<<<<<< HEAD
12431244
你不应在 Effect 中读取 `count`,而是将 `c => c + 1` 指令(“增加此数字!”)传递给 React。React 将在下一次渲染时执行它。由于你不再需要读取 Effect 中 `count` 的值,因此你可以将 Effect 的依赖保持为空(`[]`)。这可以防止 Effect 在每次执行时重新创建定时器 interval。
1245+
=======
1246+
Instead of reading `count` inside the Effect, you pass a `c => c + 1` instruction ("increment this number!") to React. React will apply it on the next render. And since you don't need to read the value of `count` inside your Effect anymore, you can keep your Effect's dependencies empty (`[]`). This prevents your Effect from re-creating the interval on every tick.
1247+
>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
12441248
12451249
</Solution>
12461250

src/content/learn/reusing-logic-with-custom-hooks.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -820,7 +820,11 @@ export default function ChatRoom({ roomId }) {
820820
// ...
821821
```
822822
823+
<<<<<<< HEAD
823824
并把它作为输入传给另一个 Hook:
825+
=======
826+
and passing it as an input to another Hook:
827+
>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
824828
825829
```js {6}
826830
export default function ChatRoom({ roomId }) {

src/content/learn/separating-events-from-effects.md

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -973,6 +973,23 @@ Effect Event 是 Effect 代码的非响应式“片段”。他们应该在使
973973
974974
<Sandpack>
975975
976+
```json package.json hidden
977+
{
978+
"dependencies": {
979+
"react": "experimental",
980+
"react-dom": "experimental",
981+
"react-scripts": "latest"
982+
},
983+
"scripts": {
984+
"start": "react-scripts start",
985+
"build": "react-scripts build",
986+
"test": "react-scripts test --env=jsdom",
987+
"eject": "react-scripts eject"
988+
}
989+
}
990+
```
991+
992+
976993
```js
977994
import { useState, useEffect } from 'react';
978995

@@ -1026,6 +1043,22 @@ button { margin: 10px; }
10261043
10271044
<Sandpack>
10281045
1046+
```json package.json hidden
1047+
{
1048+
"dependencies": {
1049+
"react": "experimental",
1050+
"react-dom": "experimental",
1051+
"react-scripts": "latest"
1052+
},
1053+
"scripts": {
1054+
"start": "react-scripts start",
1055+
"build": "react-scripts build",
1056+
"test": "react-scripts test --env=jsdom",
1057+
"eject": "react-scripts eject"
1058+
}
1059+
}
1060+
```
1061+
10291062
```js
10301063
import { useState, useEffect } from 'react';
10311064

src/content/reference/react-dom/preinit.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ function AppRoot() {
4444

4545
#### 参数 {/*parameters*/}
4646

47+
<<<<<<< HEAD
4748
* `href`:字符串,要下载并执行的资源的 URL。
4849
* `options`:对象,可以包含以下属性:
4950
* `as`:必需的字符串,表示资源的类型,可能的值包括 `script``style`
@@ -52,6 +53,16 @@ function AppRoot() {
5253
* `integrity`:字符串,为资源的加密哈希,用于 [验证其真实性](https://developer.mozilla.org/zh-CN/docs/Web/Security/Subresource_Integrity)
5354
* `nonce`:字符串,表示使用严格内容安全策略时允许资源的 [加密随机数](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/nonce)
5455
* `fetchPriority`:字符串,表示建议获取资源的相对优先级,可能的值为 `auto`(默认值)、`high``low`
56+
=======
57+
* `href`: a string. The URL of the resource you want to download and execute.
58+
* `options`: an object. It contains the following properties:
59+
* `as`: a required string. The type of resource. Its possible values are `script` and `style`.
60+
* `precedence`: a string. Required with stylesheets. Says where to insert the stylesheet relative to others. Stylesheets with higher precedence can override those with lower precedence. The possible values are `reset`, `low`, `medium`, `high`.
61+
* `crossOrigin`: a string. The [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) to use. Its possible values are `anonymous` and `use-credentials`.
62+
* `integrity`: a string. A cryptographic hash of the resource, to [verify its authenticity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity).
63+
* `nonce`: a string. A cryptographic [nonce to allow the resource](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) when using a strict Content Security Policy.
64+
* `fetchPriority`: a string. Suggests a relative priority for fetching the resource. The possible values are `auto` (the default), `high`, and `low`.
65+
>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
5566
5667
#### 返回值 {/*returns*/}
5768

src/content/reference/react-dom/static/prerender.md

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ async function handler(request) {
4949
5050
* `reactNode`:需要渲染为 HTML 的 React 节点。例如,一个像 `<App />` 的 JSX 节点。它应表示整个文档,因此 App 组件应渲染 `<html>` 标签。
5151
52+
<<<<<<< HEAD
5253
* **可选** `options`:一个包含静态生成选项的对象。
5354
* **可选** `bootstrapScriptContent`:如果指定,此字符串将被放置在一个内联的 `<script>` 标签中。
5455
* **可选** `bootstrapScripts`:一个字符串 URL 的数组,用于在页面上生成 `<script>` 标签。使用此选项包含调用 [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) 的 `<script>`。如果不希望在客户端运行 React,可以省略此选项。
@@ -58,6 +59,17 @@ async function handler(request) {
5859
* **可选** `onError`:每当发生服务器错误时触发的回调,无论是 [可恢复的](/reference/react-dom/server/renderToReadableStream#recovering-from-errors-outside-the-shell) 还是 [不可恢复的](/reference/react-dom/server/renderToReadableStream#recovering-from-errors-inside-the-shell)。默认情况下,它只调用 `console.error`。如果你重写它用来 [记录崩溃报告](/reference/react-dom/server/renderToReadableStream#logging-crashes-on-the-server) ,请确保仍然调用 `console.error`。你还可以使用它在 shell 被生成之前 [调整状态码](/reference/react-dom/server/renderToReadableStream#setting-the-status-code)。
5960
* **可选** `progressiveChunkSize`:每个块的字节数。[阅读更多关于默认启发式的信息。](https://github.com/facebook/react/blob/14c2be8dac2d5482fda8a0906a31d239df8551fc/packages/react-server/src/ReactFizzServer.js#L210-L225)
6061
* **可选** `signal`:一个 [中止信号](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal),允许你 [中止服务器渲染](/reference/react-dom/server/renderToReadableStream#aborting-server-rendering) 并在客户端渲染剩余内容。
62+
=======
63+
* **optional** `options`: An object with static generation options.
64+
* **optional** `bootstrapScriptContent`: If specified, this string will be placed in an inline `<script>` tag.
65+
* **optional** `bootstrapScripts`: An array of string URLs for the `<script>` tags to emit on the page. Use this to include the `<script>` that calls [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot) Omit it if you don't want to run React on the client at all.
66+
* **optional** `bootstrapModules`: Like `bootstrapScripts`, but emits [`<script type="module">`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) instead.
67+
* **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page. Must be the same prefix as passed to [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot#parameters)
68+
* **optional** `namespaceURI`: A string with the root [namespace URI](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS#important_namespace_uris) for the stream. Defaults to regular HTML. Pass `'http://www.w3.org/2000/svg'` for SVG or `'http://www.w3.org/1998/Math/MathML'` for MathML.
69+
* **optional** `onError`: A callback that fires whenever there is a server error, whether [recoverable](/reference/react-dom/server/renderToReadableStream#recovering-from-errors-outside-the-shell) or [not.](/reference/react-dom/server/renderToReadableStream#recovering-from-errors-inside-the-shell) By default, this only calls `console.error`. If you override it to [log crash reports,](/reference/react-dom/server/renderToReadableStream#logging-crashes-on-the-server) make sure that you still call `console.error`. You can also use it to [adjust the status code](/reference/react-dom/server/renderToReadableStream#setting-the-status-code) before the shell is emitted.
70+
* **optional** `progressiveChunkSize`: The number of bytes in a chunk. [Read more about the default heuristic.](https://github.com/facebook/react/blob/14c2be8dac2d5482fda8a0906a31d239df8551fc/packages/react-server/src/ReactFizzServer.js#L210-L225)
71+
* **optional** `signal`: An [abort signal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that lets you [abort prerendering](#aborting-prerendering) and render the rest on the client.
72+
>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
6173
6274
#### 返回值 {/*returns*/}
6375
@@ -66,7 +78,9 @@ async function handler(request) {
6678
- `prelude`:一个 [Web Stream](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) 的 HTML。你可以使用此流以块的形式发送响应,或者将整个流读取为字符串。
6779
- 如果渲染失败,Promise 将被拒绝。[使用此方法输出一个回退 shell。](/reference/react-dom/server/renderToReadableStream#recovering-from-errors-inside-the-shell)
6880
81+
#### Caveats {/*caveats*/}
6982
83+
`nonce` is not an available option when prerendering. Nonces must be unique per request and if you use nonces to secure your application with [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) it would be inappropriate and insecure to include the a nonce value in the prerender itself.
7084
7185
7286
<Note>
@@ -287,7 +301,35 @@ Suspense **无法** 检测在 Effect 或事件处理程序中获取的数据。
287301
288302
---
289303
304+
<<<<<<< HEAD
290305
## 疑难解答 {/*troubleshooting*/}
306+
=======
307+
### Aborting prerendering {/*aborting-prerendering*/}
308+
309+
You can force the prerender to "give up" after a timeout:
310+
311+
```js {2-5,11}
312+
async function renderToString() {
313+
const controller = new AbortController();
314+
setTimeout(() => {
315+
controller.abort()
316+
}, 10000);
317+
318+
try {
319+
// the prelude will contain all the HTML that was prerendered
320+
// before the controller aborted.
321+
const {prelude} = await prerender(<App />, {
322+
signal: controller.signal,
323+
});
324+
//...
325+
```
326+
327+
Any Suspense boundaries with incomplete children will be included in the prelude in the fallback state.
328+
329+
---
330+
331+
## Troubleshooting {/*troubleshooting*/}
332+
>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
291333
292334
### 我的流要等到整个应用渲染完成后才会启动。 {/*my-stream-doesnt-start-until-the-entire-app-is-rendered*/}
293335

src/content/reference/react-dom/static/prerenderToNodeStream.md

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to
5858
* **optional** `namespaceURI`: A string with the root [namespace URI](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS#important_namespace_uris) for the stream. Defaults to regular HTML. Pass `'http://www.w3.org/2000/svg'` for SVG or `'http://www.w3.org/1998/Math/MathML'` for MathML.
5959
* **optional** `onError`: A callback that fires whenever there is a server error, whether [recoverable](/reference/react-dom/server/renderToPipeableStream#recovering-from-errors-outside-the-shell) or [not.](/reference/react-dom/server/renderToPipeableStream#recovering-from-errors-inside-the-shell) By default, this only calls `console.error`. If you override it to [log crash reports,](/reference/react-dom/server/renderToPipeableStream#logging-crashes-on-the-server) make sure that you still call `console.error`. You can also use it to [adjust the status code](/reference/react-dom/server/renderToPipeableStream#setting-the-status-code) before the shell is emitted.
6060
* **optional** `progressiveChunkSize`: The number of bytes in a chunk. [Read more about the default heuristic.](https://github.com/facebook/react/blob/14c2be8dac2d5482fda8a0906a31d239df8551fc/packages/react-server/src/ReactFizzServer.js#L210-L225)
61-
* **optional** `signal`: An [abort signal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that lets you [abort server rendering](/reference/react-dom/server/renderToPipeableStream#aborting-server-rendering) and render the rest on the client.
61+
* **optional** `signal`: An [abort signal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that lets you [abort prerendering](#aborting-prerendering) and render the rest on the client.
6262
6363
#### Returns {/*returns*/}
6464
@@ -67,6 +67,10 @@ On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to
6767
- `prelude`: a [Node.js Stream.](https://nodejs.org/api/stream.html) of HTML. You can use this stream to send a response in chunks, or you can read the entire stream into a string.
6868
- If rendering fails, the Promise will be rejected. [Use this to output a fallback shell.](/reference/react-dom/server/renderToPipeableStream#recovering-from-errors-inside-the-shell)
6969
70+
#### Caveats {/*caveats*/}
71+
72+
`nonce` is not an available option when prerendering. Nonces must be unique per request and if you use nonces to secure your application with [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) it would be inappropriate and insecure to include the a nonce value in the prerender itself.
73+
7074
<Note>
7175
7276
### When should I use `prerenderToNodeStream`? {/*when-to-use-prerender*/}
@@ -285,6 +289,30 @@ Suspense-enabled data fetching without the use of an opinionated framework is no
285289
286290
---
287291
292+
### Aborting prerendering {/*aborting-prerendering*/}
293+
294+
You can force the prerender to "give up" after a timeout:
295+
296+
```js {2-5,11}
297+
async function renderToString() {
298+
const controller = new AbortController();
299+
setTimeout(() => {
300+
controller.abort()
301+
}, 10000);
302+
303+
try {
304+
// the prelude will contain all the HTML that was prerendered
305+
// before the controller aborted.
306+
const {prelude} = await prerenderToNodeStream(<App />, {
307+
signal: controller.signal,
308+
});
309+
//...
310+
```
311+
312+
Any Suspense boundaries with incomplete children will be included in the prelude in the fallback state.
313+
314+
---
315+
288316
## Troubleshooting {/*troubleshooting*/}
289317
290318
### My stream doesn't start until the entire app is rendered {/*my-stream-doesnt-start-until-the-entire-app-is-rendered*/}

0 commit comments

Comments
 (0)