diff --git a/.github/workflows/analyze_comment.yml b/.github/workflows/analyze_comment.yml index b7fb0996da..7c5af46dcb 100644 --- a/.github/workflows/analyze_comment.yml +++ b/.github/workflows/analyze_comment.yml @@ -6,6 +6,14 @@ on: types: - completed +<<<<<<< HEAD +======= +permissions: + contents: read + issues: write + pull-requests: write + +>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91 jobs: comment: runs-on: ubuntu-latest diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js index a5736b5d5b..344342045f 100644 --- a/src/components/Layout/HomeContent.js +++ b/src/components/Layout/HomeContent.js @@ -1153,7 +1153,7 @@ async function Talks({ confId }) { } right={ - + - + } /> ); diff --git a/src/components/Layout/Page.tsx b/src/components/Layout/Page.tsx index ec3a6eba0c..c3224e5174 100644 --- a/src/components/Layout/Page.tsx +++ b/src/components/Layout/Page.tsx @@ -82,11 +82,9 @@ export function Page({ 'max-w-7xl mx-auto', section === 'blog' && 'lg:flex lg:flex-col lg:items-center' )}> - - - {children} - - + + {children} + {!isBlogIndex && (
- + logo by @sawaratsuki1004 )); return ( - +
{sequential ? (
    @@ -369,7 +369,7 @@ function IllustrationBlock({ )}
- + ); } diff --git a/src/content/blog/2024/12/05/react-19.md b/src/content/blog/2024/12/05/react-19.md index 81e97683be..47db8817d3 100644 --- a/src/content/blog/2024/12/05/react-19.md +++ b/src/content/blog/2024/12/05/react-19.md @@ -410,7 +410,11 @@ function MyInput({placeholder, ref}) { +<<<<<<< HEAD 在类组件中，`ref` 不作为 props 传递，因为它们引用的是组件实例。这意味着，如果你在类组件中需要访问 `ref`，你需要使用 `React.forwardRef` 或者 `React.createRef`。 +======= +`ref`s passed to classes are not passed as props since they reference the component instance. +>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91 diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md index a2bcd196e4..a97f3d5b42 100644 --- a/src/content/community/conferences.md +++ b/src/content/community/conferences.md @@ -45,6 +45,11 @@ September 2-4, 2025. Wrocław, Poland. [Website](https://www.reactuniverseconf.com/) - [Twitter](https://twitter.com/react_native_eu) - [LinkedIn](https://www.linkedin.com/events/reactuniverseconf7163919537074118657/) +### React Alicante 2025 {/*react-alicante-2025*/} +October 2-4, 2025. Alicante, Spain. + +[Website](https://reactalicante.es/) - [Twitter](https://x.com/ReactAlicante) - [Bluesky](https://bsky.app/profile/reactalicante.es) - [YouTube](https://www.youtube.com/channel/UCaSdUaITU1Cz6PvC97A7e0w) + ### React Conf 2025 {/*react-conf-2025*/} October 7-8, 2025. Henderson, Nevada, USA and free livestream diff --git a/src/content/community/meetups.md b/src/content/community/meetups.md index 81fc5c2104..b4da5cdffb 100644 --- a/src/content/community/meetups.md +++ b/src/content/community/meetups.md @@ -88,6 +88,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet * [Delhi NCR](https://www.meetup.com/React-Delhi-NCR/) * [Mumbai](https://reactmumbai.dev) * [Pune](https://www.meetup.com/ReactJS-and-Friends/) +* [Rajasthan](https://reactrajasthan.com) ## Indonesia {/*indonesia*/} * [Indonesia](https://www.meetup.com/reactindonesia/) diff --git a/src/content/learn/keeping-components-pure.md b/src/content/learn/keeping-components-pure.md index a6b162af8a..843f65bccf 100644 --- a/src/content/learn/keeping-components-pure.md +++ b/src/content/learn/keeping-components-pure.md @@ -179,7 +179,7 @@ function Cup({ guest }) { } export default function TeaGathering() { - let cups = []; + const cups = []; for (let i = 1; i <= 12; i++) { cups.push(); } @@ -249,7 +249,7 @@ export default function TeaGathering() { ```js src/Clock.js active export default function Clock({ time }) { - let hours = time.getHours(); + const hours = time.getHours(); if (hours >= 0 && hours <= 6) { document.getElementById('time').className = 'night'; } else { @@ -311,7 +311,7 @@ body > * { ```js src/Clock.js active export default function Clock({ time }) { - let hours = time.getHours(); + const hours = time.getHours(); let className; if (hours >= 0 && hours <= 6) { className = 'night'; @@ -610,14 +610,14 @@ export default function StoryTray({ stories }) { import { useState, useEffect } from 'react'; import StoryTray from './StoryTray.js'; -let initialStories = [ +const initialStories = [ {id: 0, label: "Ankit's Story" }, {id: 1, label: "Taylor's Story" }, ]; export default function App() { - let [stories, setStories] = useState([...initialStories]) - let time = useTime(); + const [stories, setStories] = useState([...initialStories]) + const time = useTime(); // 临时解决方案：防止在阅读文档时内存无限制增长。 // 我们在这里违反了自己的规则。 @@ -706,14 +706,14 @@ export default function StoryTray({ stories }) { import { useState, useEffect } from 'react'; import StoryTray from './StoryTray.js'; -let initialStories = [ +const initialStories = [ {id: 0, label: "Ankit's Story" }, {id: 1, label: "Taylor's Story" }, ]; export default function App() { - let [stories, setStories] = useState([...initialStories]) - let time = useTime(); + const [stories, setStories] = useState([...initialStories]) + const time = useTime(); // 临时解决方案：防止在阅读文档时内存无限制增长。 // 我们在这里违反了自己的规则。 @@ -773,8 +773,13 @@ li { ```js src/StoryTray.js active export default function StoryTray({ stories }) { +<<<<<<< HEAD // 复制数组！ let storiesToDisplay = stories.slice(); +======= + // Copy the array! + const storiesToDisplay = stories.slice(); +>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91 // 不影响原始数组： storiesToDisplay.push({ @@ -798,14 +803,14 @@ export default function StoryTray({ stories }) { import { useState, useEffect } from 'react'; import StoryTray from './StoryTray.js'; -let initialStories = [ +const initialStories = [ {id: 0, label: "Ankit's Story" }, {id: 1, label: "Taylor's Story" }, ]; export default function App() { - let [stories, setStories] = useState([...initialStories]) - let time = useTime(); + const [stories, setStories] = useState([...initialStories]) + const time = useTime(); // 临时解决方案：防止在阅读文档时内存无限制增长。 // 我们在这里违反了自己的规则。 diff --git a/src/content/learn/managing-state.md b/src/content/learn/managing-state.md index 60d61d633c..fcfc3773c3 100644 --- a/src/content/learn/managing-state.md +++ b/src/content/learn/managing-state.md @@ -744,9 +744,9 @@ export default function Section({ children }) { const level = useContext(LevelContext); return (
- + {children} - +
); } @@ -839,13 +839,11 @@ export function TasksProvider({ children }) { ); return ( - - + + {children} - - + + ); } diff --git a/src/content/learn/preserving-and-resetting-state.md b/src/content/learn/preserving-and-resetting-state.md index b1b26c7fcf..fda51635aa 100644 --- a/src/content/learn/preserving-and-resetting-state.md +++ b/src/content/learn/preserving-and-resetting-state.md @@ -676,7 +676,11 @@ label { +<<<<<<< HEAD 当你勾选复选框后计数器的 state 被重置了。虽然你渲染了一个 `Counter`，但是 `div` 的第一个子组件从 `div` 变成了 `section`。当子组件 `div` 从 DOM 中被移除的时候，它底下的整棵树（包含 `Counter` 以及它的 state）也都被销毁了。 +======= +The counter state gets reset when you click the checkbox. Although you render a `Counter`, the first child of the `div` changes from a `section` to a `div`. When the child `section` was removed from the DOM, the whole tree below it (including the `Counter` and its state) was destroyed as well. +>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91 diff --git a/src/content/learn/referencing-values-with-refs.md b/src/content/learn/referencing-values-with-refs.md index f0334bad12..1af0e342d7 100644 --- a/src/content/learn/referencing-values-with-refs.md +++ b/src/content/learn/referencing-values-with-refs.md @@ -467,7 +467,11 @@ export default function Toggle() { #### 修复防抖 {/*fix-debouncing*/} +<<<<<<< HEAD 在这个例子中，所有按钮点击处理器都是 ["防抖的"](https://redd.one/blog/debounce-vs-throttle)。 要了解这意味着什么，请按下其中一个按钮。注意消息在一秒后显示。如果你在等待消息时按下按钮，计时器将重置。因此如果你多次快速单击同一个按钮，则直到你停止单击 **之后** 1 秒钟，该消息才会显示。防抖可以让你将一些动作推迟到用户“停止动作”之后。 +======= +In this example, all button click handlers are ["debounced".](https://kettanaito.com/blog/debounce-vs-throttle) To see what this means, press one of the buttons. Notice how the message appears a second later. If you press the button while waiting for the message, the timer will reset. So if you keep clicking the same button fast many times, the message won't appear until a second *after* you stop clicking. Debouncing lets you delay some action until the user "stops doing things". +>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91 这个例子可以正常运行，但并不完全符合预期。按钮不是独立的。要查看问题，请单击其中一个按钮，然后立即单击另一个按钮。你本来期望在延迟之后，你会看到两个按钮的消息。但只有最后一个按钮的消息出现了。第一个按钮的消息丢失了。 diff --git a/src/content/learn/scaling-up-with-reducer-and-context.md b/src/content/learn/scaling-up-with-reducer-and-context.md index 52cc9b4621..1ea5fb889e 100644 --- a/src/content/learn/scaling-up-with-reducer-and-context.md +++ b/src/content/learn/scaling-up-with-reducer-and-context.md @@ -466,11 +466,11 @@ export default function TaskApp() { const [tasks, dispatch] = useReducer(tasksReducer, initialTasks); // ... return ( - - + + ... - - + + ); } ``` @@ -514,8 +514,8 @@ export default function TaskApp() { } return ( - - + +

Day off in Kyoto

- - + + ); } @@ -681,13 +681,13 @@ ul, li { margin: 0; padding: 0; } 现在你不需要将 tasks 和事件处理程序在组件树中传递： ```js {4-5} - - + +

Day off in Kyoto

- - + + ``` 相反，任何需要 tasks 的组件都可以从 `TaskContext` 中读取它： @@ -735,13 +735,13 @@ export default function TaskApp() { ); return ( - - + +

Day off in Kyoto

- - + + ); } @@ -926,11 +926,11 @@ export function TasksProvider({ children }) { const [tasks, dispatch] = useReducer(tasksReducer, initialTasks); return ( - - + + {children} - - + + ); } ``` @@ -968,11 +968,11 @@ export function TasksProvider({ children }) { ); return ( - - + + {children} - - + + ); } @@ -1179,11 +1179,11 @@ export function TasksProvider({ children }) { ); return ( - - + + {children} - - + + ); } @@ -1368,4 +1368,3 @@ ul, li { margin: 0; padding: 0; } - 你可以在你的应用程序中大量使用 context 和 reducer 的组合。 - diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index f023d54c64..e9b7bfe340 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -260,9 +260,9 @@ export default function MyApp() { const [theme, setTheme] = useState('light'); return ( - + - + ) } @@ -310,9 +310,9 @@ export default function MyApp() { const object = useMemo(() => ({ kind: "complex" }), []); return ( - + - + ) } diff --git a/src/content/reference/react-dom/createPortal.md b/src/content/reference/react-dom/createPortal.md index b309cfb9ec..b57dc17d8c 100644 --- a/src/content/reference/react-dom/createPortal.md +++ b/src/content/reference/react-dom/createPortal.md @@ -240,7 +240,11 @@ export default function ModalContent({ onClose }) { 使用 portal 时，确保应用程序的无障碍性非常重要。例如，你可能需要管理键盘焦点，以便用户可以自然进出 portal。 +<<<<<<< HEAD 创建模态对话框时，请遵循 [WAI-ARIA 模态实践指南](https://www.w3.org/WAI/ARIA/apg/#dialog_modal)。如果你使用了社区包，请确保它具有无障碍性，并遵循这些指南。 +======= +Follow the [WAI-ARIA Modal Authoring Practices](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal) when creating modals. If you use a community package, ensure that it is accessible and follows these guidelines. +>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91 diff --git a/src/content/reference/react-dom/static/prerender.md b/src/content/reference/react-dom/static/prerender.md index 2a11634e62..1c3b98a57a 100644 --- a/src/content/reference/react-dom/static/prerender.md +++ b/src/content/reference/react-dom/static/prerender.md @@ -68,7 +68,7 @@ async function handler(request) { #### Caveats {/*caveats*/} -`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. +`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 nonce value in the prerender itself. @@ -231,7 +231,7 @@ async function renderToString() { const {prelude} = await prerender(, { bootstrapScripts: ['/main.js'] }); - + const reader = prelude.getReader(); let content = ''; while (true) { @@ -318,7 +318,13 @@ async function renderToString() { ### 我的流要等到整个应用渲染完成后才会启动。 {/*my-stream-doesnt-start-until-the-entire-app-is-rendered*/} +<<<<<<< HEAD `prerender` 的响应会等待整个应用渲染完成，包括所有 Suspense 边界的内容加载完成后，才会解析。这种设计适用于静态站点生成（SSG），并不支持在内容加载时进行流式加载。 如果需要在内容加载时进行流式加载，可以使用类似 [renderToReadableStream](/reference/react-dom/server/renderToReadableStream) 的流式服务器渲染 API。 - \ No newline at end of file + +======= +The `prerender` response waits for the entire app to finish rendering, including waiting for all Suspense boundaries to resolve, before resolving. It is designed for static site generation (SSG) ahead of time and does not support streaming more content as it loads. + +To stream content as it loads, use a streaming server render API like [renderToReadableStream](/reference/react-dom/server/renderToReadableStream). +>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91 diff --git a/src/content/reference/react-dom/static/prerenderToNodeStream.md b/src/content/reference/react-dom/static/prerenderToNodeStream.md index fb8073ef07..cc99c52d4e 100644 --- a/src/content/reference/react-dom/static/prerenderToNodeStream.md +++ b/src/content/reference/react-dom/static/prerenderToNodeStream.md @@ -69,7 +69,7 @@ On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to #### Caveats {/*caveats*/} -`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. +`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 nonce value in the prerender itself. @@ -95,7 +95,7 @@ app.use('/', async (request, response) => { const { prelude } = await prerenderToNodeStream(, { bootstrapScripts: ['/main.js'], }); - + response.setHeader('Content-Type', 'text/plain'); prelude.pipe(response); }); @@ -232,7 +232,7 @@ async function renderToString() { const {prelude} = await prerenderToNodeStream(, { bootstrapScripts: ['/main.js'] }); - + return new Promise((resolve, reject) => { let data = ''; prelude.on('data', chunk => { @@ -320,4 +320,3 @@ Any Suspense boundaries with incomplete children will be included in the prelude The `prerenderToNodeStream` response waits for the entire app to finish rendering, including waiting for all Suspense boundaries to resolve, before resolving. It is designed for static site generation (SSG) ahead of time and does not support streaming more content as it loads. To stream content as it loads, use a streaming server render API like [renderToPipeableStream](/reference/react-dom/server/renderToPipeableStream). - diff --git a/src/content/reference/react/Component.md b/src/content/reference/react/Component.md index f83eba3c2b..04ab56d72d 100644 --- a/src/content/reference/react/Component.md +++ b/src/content/reference/react/Component.md @@ -1814,9 +1814,9 @@ function Form() { export default function MyApp() { return ( - +
- + ) } ``` @@ -1900,9 +1900,9 @@ function Form() { export default function MyApp() { return ( - + - + ) } ``` diff --git a/src/content/reference/react/apis.md b/src/content/reference/react/apis.md index bba46bdae8..d279cc966c 100644 --- a/src/content/reference/react/apis.md +++ b/src/content/reference/react/apis.md @@ -13,12 +13,20 @@ translators: --- +<<<<<<< HEAD * [`createContext`](/reference/react/createContext) API 可以创建一个 context，你可以将其提供给子组件，通常会与 [`useContext`](/reference/react/useContext) 一起配合使用。 * [`forwardRef`](/reference/react/forwardRef) 允许组件将 DOM 节点作为 ref 暴露给父组件。 * [`lazy`](/reference/react/lazy) 允许你延迟加载组件，直到该组件需要第一次被渲染。 * [`memo`](/reference/react/memo) 允许你在 props 没有变化的情况下跳过组件的重渲染。通常 [`useMemo`](/reference/react/useMemo) 与 [`useCallback`](/reference/react/useCallback) 会一起配合使用。 * [`startTransition`](/reference/react/startTransition) 允许你可以标记一个状态更新是不紧急的。类似于 [`useTransition`](/reference/react/useTransition)。 * [`act`](/reference/react/act) 允许你在测试中包装渲染和交互，以确保在断言之前已完成更新。 +======= +* [`createContext`](/reference/react/createContext) lets you define and provide context to the child components. Used with [`useContext`.](/reference/react/useContext) +* [`lazy`](/reference/react/lazy) lets you defer loading a component's code until it's rendered for the first time. +* [`memo`](/reference/react/memo) lets your component skip re-renders with same props. Used with [`useMemo`](/reference/react/useMemo) and [`useCallback`.](/reference/react/useCallback) +* [`startTransition`](/reference/react/startTransition) lets you mark a state update as non-urgent. Similar to [`useTransition`.](/reference/react/useTransition) +* [`act`](/reference/react/act) lets you wrap renders and interactions in tests to ensure updates have processed before making assertions. +>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91 --- diff --git a/src/content/reference/react/cloneElement.md b/src/content/reference/react/cloneElement.md index 4050402dad..25457b94de 100644 --- a/src/content/reference/react/cloneElement.md +++ b/src/content/reference/react/cloneElement.md @@ -414,9 +414,9 @@ export default function List({ items, renderItem }) { {items.map((item, index) => { const isHighlighted = index === selectedIndex; return ( - + {renderItem(item)} - + ); })} ``` @@ -472,12 +472,12 @@ export default function List({ items, renderItem }) { {items.map((item, index) => { const isHighlighted = index === selectedIndex; return ( - {renderItem(item)} - + ); })}
diff --git a/src/content/reference/react/createContext.md b/src/content/reference/react/createContext.md index 9ba3f58c09..df84ab0c47 100644 --- a/src/content/reference/react/createContext.md +++ b/src/content/reference/react/createContext.md @@ -38,14 +38,22 @@ const ThemeContext = createContext('light'); `createContext` 返回一个上下文对象。 +<<<<<<< HEAD **该上下文对象本身不包含任何信息**。它只表示其他组件读取或提供的那个上下文。一般来说，在组件上方使用 [`SomeContext.Provider`](#provider) 指定上下文的值，并在被包裹的下方组件内调用 [`useContext(SomeContext)`](/reference/react/useContext) 读取它。上下文对象有一些属性： * `SomeContext.Provider` 让你为被它包裹的组件提供上下文的值。 * `SomeContext.Consumer` 是一个很少会用到的备选方案，它用于读取上下文的值。 +======= +**The context object itself does not hold any information.** It represents _which_ context other components read or provide. Typically, you will use [`SomeContext`](#provider) in components above to specify the context value, and call [`useContext(SomeContext)`](/reference/react/useContext) in components below to read it. The context object has a few properties: + +* `SomeContext` lets you provide the context value to components. +* `SomeContext.Consumer` is an alternative and rarely used way to read the context value. +* `SomeContext.Provider` is a legacy way to provide the context value before React 19. +>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91 --- -### `SomeContext.Provider` {/*provider*/} +### `SomeContext` Provider {/*provider*/} 用上下文 provider 包裹组件，以为里面所有的组件指定一个上下文的值： @@ -54,13 +62,21 @@ function App() { const [theme, setTheme] = useState('light'); // …… return ( - + - + ); } ``` + + +Starting in React 19, you can render `` as a provider. + +In older versions of React, use ``. + + + #### Props {/*provider-props*/} * `value`：该值为想传递给所有处于这个 provider 内读取该上下文的组件，无论它们处于多深的层级。上下文的值可以为任何类型。provider 内的组件可通过调用 [`useContext(SomeContext)`](/reference/react/useContext) 获取上方距离它最近的上下文 provider 的 `value`。 @@ -141,11 +157,11 @@ function App() { // ... return ( - - + + - - + + ); } ``` @@ -187,11 +203,11 @@ import { ThemeContext, AuthContext } from './Contexts.js'; function App() { // ... return ( - - + + - - + + ); } ``` @@ -213,5 +229,9 @@ const ThemeContext = createContext('light'); 该值永远不会发生改变。当 React 无法找到匹配的 provider 时，该值会被作为后备方案。 +<<<<<<< HEAD 要想使上下文的值随时间变化，[添加状态并使用一个上下文 provider 包裹组件](/reference/react/useContext#updating-data-passed-via-context)。 +======= +To make context change over time, [add state and wrap components in a context provider.](/reference/react/useContext#updating-data-passed-via-context) +>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91 diff --git a/src/content/reference/react/legacy.md b/src/content/reference/react/legacy.md index 3cbc40c89e..62cca6a70a 100644 --- a/src/content/reference/react/legacy.md +++ b/src/content/reference/react/legacy.md @@ -27,9 +27,18 @@ title: "过时的 React API" 这些 API 在 React 19 中被移除。 +<<<<<<< HEAD * [`createFactory`](https://18.react.dev/reference/react/createFactory)：使用 JSX 来替代。 * 类组件：[`static contextTypes`](https://18.react.dev//reference/react/Component#static-contexttypes): 使用 [`static contextType`](#static-contexttype) 来替代。 * 类组件：[`static childContextTypes`](https://18.react.dev//reference/react/Component#static-childcontexttypes): 使用 [`static contextType`](#static-contexttype) 来替代。 * 类组件：[`static getChildContext`](https://18.react.dev//reference/react/Component#getchildcontext): 使用 [`Context.Provider`](/reference/react/createContext#provider) 来替代。 * 类组件：[`static propTypes`](https://18.react.dev//reference/react/Component#static-proptypes): 使用 [TypeScript](https://www.typescriptlang.org/) 等类型系统来替代。 * 类组件：[`this.refs`](https://18.react.dev//reference/react/Component#refs): 使用 [`createRef`](/reference/react/createRef) 来替代。 +======= +* [`createFactory`](https://18.react.dev/reference/react/createFactory): use JSX instead. +* Class Components: [`static contextTypes`](https://18.react.dev//reference/react/Component#static-contexttypes): use [`static contextType`](#static-contexttype) instead. +* Class Components: [`static childContextTypes`](https://18.react.dev//reference/react/Component#static-childcontexttypes): use [`static contextType`](#static-contexttype) instead. +* Class Components: [`static getChildContext`](https://18.react.dev//reference/react/Component#getchildcontext): use [`Context`](/reference/react/createContext#provider) instead. +* Class Components: [`static propTypes`](https://18.react.dev//reference/react/Component#static-proptypes): use a type system like [TypeScript](https://www.typescriptlang.org/) instead. +* Class Components: [`this.refs`](https://18.react.dev//reference/react/Component#refs): use [`createRef`](/reference/react/createRef) instead. +>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91 diff --git a/src/content/reference/react/memo.md b/src/content/reference/react/memo.md index 6eeac9ac5b..ca9e00ef42 100644 --- a/src/content/reference/react/memo.md +++ b/src/content/reference/react/memo.md @@ -226,12 +226,12 @@ export default function MyApp() { } return ( - + - + ); } diff --git a/src/content/reference/react/use.md b/src/content/reference/react/use.md index cecded1755..7825e9a8e8 100644 --- a/src/content/reference/react/use.md +++ b/src/content/reference/react/use.md @@ -74,9 +74,9 @@ function Button() { ```js [[1, 3, "ThemeContext"], [2, 3, "\\"dark\\""], [1, 5, "ThemeContext"]] function MyPage() { return ( - + - + ); } @@ -116,9 +116,9 @@ const ThemeContext = createContext(null); export default function MyApp() { return ( - + - + ) } diff --git a/src/content/reference/react/useContext.md b/src/content/reference/react/useContext.md index d3d68f38d7..5d93d37777 100644 --- a/src/content/reference/react/useContext.md +++ b/src/content/reference/react/useContext.md @@ -38,13 +38,23 @@ function MyComponent() { #### 返回值 {/*returns*/} +<<<<<<< HEAD `useContext` 为调用组件返回 context 的值。它被确定为传递给树中调用组件上方最近的 `SomeContext.Provider` 的 `value`。如果没有这样的 provider，那么返回值将会是为创建该 context 传递给 [`createContext`](/reference/react/createContext) 的 `defaultValue`。返回的值始终是最新的。如果 context 发生变化，React 会自动重新渲染读取 context 的组件。 +======= +`useContext` returns the context value for the calling component. It is determined as the `value` passed to the closest `SomeContext` above the calling component in the tree. If there is no such provider, then the returned value will be the `defaultValue` you have passed to [`createContext`](/reference/react/createContext) for that context. The returned value is always up-to-date. React automatically re-renders components that read some context if it changes. +>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91 #### 注意事项 {/*caveats*/} +<<<<<<< HEAD * 组件中的 `useContext()` 调用不受 **同一** 组件返回的 provider 的影响。相应的 `` 需要位于调用 `useContext()` 的组件 **之上**。 * 从 provider 接收到不同的 `value` 开始，React 自动重新渲染使用了该特定 context 的所有子级。先前的值和新的值会使用 [`Object.is`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/is) 来做比较。使用 [`memo`](/reference/react/memo) 来跳过重新渲染并不妨碍子级接收到新的 context 值。 * 如果你的构建系统在输出中产生重复的模块（可能发生在符号链接中），这可能会破坏 context。通过 context 传递数据只有在用于传递 context 的 `SomeContext` 和用于读取数据的 `SomeContext` 是完全相同的对象时才有效，这是由 `===` 比较决定的。 +======= +* `useContext()` call in a component is not affected by providers returned from the *same* component. The corresponding `` **needs to be *above*** the component doing the `useContext()` call. +* React **automatically re-renders** all the children that use a particular context starting from the provider that receives a different `value`. The previous and the next values are compared with the [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison. Skipping re-renders with [`memo`](/reference/react/memo) does not prevent the children receiving fresh context values. +* If your build system produces duplicates modules in the output (which can happen with symlinks), this can break context. Passing something via context only works if `SomeContext` that you use to provide context and `SomeContext` that you use to read it are ***exactly* the same object**, as determined by a `===` comparison. +>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91 --- @@ -70,9 +80,9 @@ function Button() { ```js [[1, 3, "ThemeContext"], [2, 3, "\\"dark\\""], [1, 5, "ThemeContext"]] function MyPage() { return ( - + - + ); } @@ -98,9 +108,9 @@ const ThemeContext = createContext(null); export default function MyApp() { return ( - + - + ) } @@ -183,14 +193,14 @@ function Button({ children }) { function MyPage() { const [theme, setTheme] = useState('dark'); return ( - + - + ); } ``` @@ -213,7 +223,7 @@ const ThemeContext = createContext(null); export default function MyApp() { const [theme, setTheme] = useState('light'); return ( - + - + ) } @@ -317,14 +327,14 @@ const CurrentUserContext = createContext(null); export default function MyApp() { const [currentUser, setCurrentUser] = useState(null); return ( - - + ); } @@ -411,8 +421,8 @@ export default function MyApp() { const [theme, setTheme] = useState('light'); const [currentUser, setCurrentUser] = useState(null); return ( - - + Use dark mode - - + + ) } @@ -596,16 +606,16 @@ export default function MyApp() { function MyProviders({ children, theme, setTheme }) { const [currentUser, setCurrentUser] = useState(null); return ( - - + {children} - - + + ); } @@ -775,11 +785,11 @@ export function TasksProvider({ children }) { ); return ( - - + + {children} - - + + ); } @@ -978,9 +988,9 @@ export default function MyApp() { const [theme, setTheme] = useState('light'); return ( <> - + - + - +