diff --git a/postcss.config.js b/postcss.config.js index 427294522a..d55c43c909 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -17,4 +17,4 @@ module.exports = { }, }, }, -} +}; diff --git a/public/js/jsfiddle-integration-babel.js b/public/js/jsfiddle-integration-babel.js index 006c79c8a8..56059472ff 100644 --- a/public/js/jsfiddle-integration-babel.js +++ b/public/js/jsfiddle-integration-babel.js @@ -4,12 +4,14 @@ // Do not delete or move this file. // Many fiddles reference it so we have to keep it here. -(function() { +(function () { var tag = document.querySelector( 'script[type="application/javascript;version=1.7"]' ); if (!tag || tag.textContent.indexOf('window.onload=function(){') !== -1) { - alert('Bad JSFiddle configuration, please fork the original React JSFiddle'); + alert( + 'Bad JSFiddle configuration, please fork the original React JSFiddle' + ); } tag.setAttribute('type', 'text/babel'); tag.textContent = tag.textContent.replace(/^\/\/>>>>>> 5138e605225b24d25701a1a1f68daa90499122a4 diff --git a/src/content/learn/reusing-logic-with-custom-hooks.md b/src/content/learn/reusing-logic-with-custom-hooks.md index 3a12c1c274..82914785c8 100644 --- a/src/content/learn/reusing-logic-with-custom-hooks.md +++ b/src/content/learn/reusing-logic-with-custom-hooks.md @@ -1333,7 +1333,11 @@ export function useOnlineStatus() { 在上述示例中，`useOnlineStatus` 借助一组 [`useState`](/reference/react/useState) 和 [`useEffect`](/reference/react/useEffect) 实现。但这不是最好的解决方案。它有许多边界用例没有考虑到。例如，它认为当组件加载时，`isOnline` 已经为 `true`，但是如果网络已经离线的话这就是错误的。你可以使用浏览器的 [`navigator.onLine`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/onLine) API 来检查，但是在生成初始 HTML 的服务端直接使用它是没用的。简而言之这段代码可以改进。 +<<<<<<< HEAD 幸运的是，React 18 包含了一个叫做 [`useSyncExternalStore`](/reference/react/useSyncExternalStore) 的专用 API，它可以解决你所有这些问题。这里展示了如何利用这个新 API 来重写你的 `useOnlineStatus` Hook： +======= +React includes a dedicated API called [`useSyncExternalStore`](/reference/react/useSyncExternalStore) which takes care of all of these problems for you. Here is your `useOnlineStatus` Hook, rewritten to take advantage of this new API: +>>>>>>> 5138e605225b24d25701a1a1f68daa90499122a4 diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index 642391edc6..8cf56d8582 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -2247,7 +2247,11 @@ body { +<<<<<<< HEAD 当你在传递给 `map` 的函数中遍历 `history` 数组时，`squares` 参数遍历 `history` 的每个元素，`move` 参数遍历每个数组索引：`0` 、`1`、`2`……（在大多数情况下，你需要数组元素，但要渲染落子列表，你只需要索引。） +======= +As you iterate through the `history` array inside the function you passed to `map`, the `squares` argument goes through each element of `history`, and the `move` argument goes through each array index: `0`, `1`, `2`, …. (In most cases, you'd need the actual array elements, but to render a list of moves you will only need indexes.) +>>>>>>> 5138e605225b24d25701a1a1f68daa90499122a4 对于井字棋游戏历史中的每一步，你创建一个列表项 `
  • `，其中包含一个按钮 `; @@ -411,22 +379,6 @@ export default function App() { } ``` -```json package.json hidden -{ - "dependencies": { - "react": "canary", - "react-dom": "canary", - "react-scripts": "latest" - }, - "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test --env=jsdom", - "eject": "react-scripts eject" - } -} -``` - ### `captureOwnerStack` is not available {/*captureownerstack-is-not-available*/} diff --git a/src/content/reference/react/useSyncExternalStore.md b/src/content/reference/react/useSyncExternalStore.md index 606a909d5c..e65346b605 100644 --- a/src/content/reference/react/useSyncExternalStore.md +++ b/src/content/reference/react/useSyncExternalStore.md @@ -405,14 +405,20 @@ function getSnapshot() { 这里的 `subscribe` 函数是在组件 **内部** 定义的，所以它每次渲染都不同： -```js {4-7} +```js {2-5} function ChatIndicator() { +<<<<<<< HEAD const isOnline = useSyncExternalStore(subscribe, getSnapshot); // 🚩 总是不同的函数，所以 React 每次重新渲染都会重新订阅 +======= + // 🚩 Always a different function, so React will resubscribe on every re-render +>>>>>>> 5138e605225b24d25701a1a1f68daa90499122a4 function subscribe() { // ... } + + const isOnline = useSyncExternalStore(subscribe, getSnapshot); // ... } @@ -420,28 +426,39 @@ function ChatIndicator() { 如果重新渲染时你传一个不同的 `subscribe` 函数，React 会重新订阅你的 store。如果这造成了性能问题，因而你想避免重新订阅，就把 `subscribe` 函数移到外面： -```js {6-9} -function ChatIndicator() { - const isOnline = useSyncExternalStore(subscribe, getSnapshot); +```js {1-4} +// ✅ Always the same function, so React won't need to resubscribe +function subscribe() { // ... } +<<<<<<< HEAD // ✅ 总是相同的函数，所以 React 不需要重新订阅 function subscribe() { +======= +function ChatIndicator() { + const isOnline = useSyncExternalStore(subscribe, getSnapshot); +>>>>>>> 5138e605225b24d25701a1a1f68daa90499122a4 // ... } ``` 或者，把 `subscribe` 包在 [`useCallback`](/reference/react/useCallback) 里面以便只在某些参数改变时重新订阅： -```js {4-8} +```js {2-5} function ChatIndicator({ userId }) { +<<<<<<< HEAD const isOnline = useSyncExternalStore(subscribe, getSnapshot); // ✅ 只要 userId 不变，都是同一个函数 +======= + // ✅ Same function as long as userId doesn't change +>>>>>>> 5138e605225b24d25701a1a1f68daa90499122a4 const subscribe = useCallback(() => { // ... }, [userId]); + + const isOnline = useSyncExternalStore(subscribe, getSnapshot); // ... }