From 74e72dad6455fd08bf06e7eaa7a49dd43c49a489 Mon Sep 17 00:00:00 2001 From: Harris <67175427+thehelium@users.noreply.github.com> Date: Fri, 24 Mar 2023 15:13:24 +0800 Subject: [PATCH 01/47] translate: update reference/react/index.md --- src/content/reference/react/index.md | 60 ++++++++++++++-------------- 1 file changed, 29 insertions(+), 31 deletions(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index 650a1c3826..a66b56adfa 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -1,10 +1,10 @@ --- -title: "Built-in React Hooks" +title: "内置 React Hooks" --- -*Hooks* let you use different React features from your components. You can either use the built-in Hooks or combine them to build your own. This page lists all built-in Hooks in React. +*Hooks* 让你从你的组件中使用不同的 React 功能。你可以使用内置的 Hooks 或者结合它们来建立你自己的。本页列出了 React 中所有的内置 Hooks。 @@ -12,12 +12,10 @@ title: "Built-in React Hooks" ## State Hooks {/*state-hooks*/} -*State* lets a component ["remember" information like user input.](/learn/state-a-components-memory) For example, a form component can use state to store the input value, while an image gallery component can use state to store the selected image index. +*State* 让一个组件 ["记住" 像用户输入的信息](/learn/state-a-components-memory)，比如，要给一个组件添加状态，使用这些 Hooks 中的一个： -To add state to a component, use one of these Hooks: - -* [`useState`](/reference/react/useState) declares a state variable that you can update directly. -* [`useReducer`](/reference/react/useReducer) declares a state variable with the update logic inside a [reducer function.](/learn/extracting-state-logic-into-a-reducer) +* [`useState`](/reference/react/useState) 声明了一个你可以直接更新的状态变量。 +* [`useReducer`](/reference/react/useReducer) 声明了一个带有更新逻辑的状态变量在一个 [reducer 函数](/learn/extracting-state-logic-into-a-reducer)中。 ```js function ImageGallery() { @@ -29,9 +27,9 @@ function ImageGallery() { ## Context Hooks {/*context-hooks*/} -*Context* lets a component [receive information from distant parents without passing it as props.](/learn/passing-props-to-a-component) For example, your app's top-level component can pass the current UI theme to all components below, no matter how deep. +*Context* 让一个组件[从远处的父组件接收信息，而不需要将其作为 props 传递。](/learn/passing-props-to-a-component) 比如，app 的顶层组件可以将当前的 UI 主题传递给下面的所有组件，无论它们层级多深。 -* [`useContext`](/reference/react/useContext) reads and subscribes to a context. +* [`useContext`](/reference/react/useContext) 读取并订阅了一个上下文。 ```js function Button() { @@ -43,10 +41,10 @@ function Button() { ## Ref Hooks {/*ref-hooks*/} -*Refs* let a component [hold some information that isn't used for rendering,](/learn/referencing-values-with-refs) like a DOM node or a timeout ID. Unlike with state, updating a ref does not re-render your component. Refs are an "escape hatch" from the React paradigm. They are useful when you need to work with non-React systems, such as the built-in browser APIs. +*Ref* 让一个组件[持有一些不用于渲染的信息，](/learn/referencing-values-with-refs)如 DOM 节点或一个 timeout ID。与 state 不同的是，更新 Ref 并不会重新渲染你的组件。Ref 是 React 范式的一个 "逃生舱门"。当你需要与非 React 系统一起工作时，它们很有用，比如内置的浏览器 API。 -* [`useRef`](/reference/react/useRef) declares a ref. You can hold any value in it, but most often it's used to hold a DOM node. -* [`useImperativeHandle`](/reference/react/useImperativeHandle) lets you customize the ref exposed by your component. This is rarely used. +* [`useRef`](/reference/react/useRef) 声明了一个 Ref。你可以在其中保存任何值，但最常见的是它用来保存一个 DOM 节点。 +* [`useImperativeHandle`](/reference/react/useImperativeHandle) 可以让你自定义你的组件所暴露的 Ref。这一点很少使用。 ```js function Form() { @@ -58,9 +56,9 @@ function Form() { ## Effect Hooks {/*effect-hooks*/} -*Effects* let a component [connect to and synchronize with external systems.](/learn/synchronizing-with-effects) This includes dealing with network, browser DOM, animations, widgets written using a different UI library, and other non-React code. +*Effect* 让一个组件[连接到外部系统并与之同步。](/learn/synchronizing-with-effects)这包括处理网络、浏览器、DOM、动画、使用不同 UI 库编写的 widgets 以及其他非 React 代码。 -* [`useEffect`](/reference/react/useEffect) connects a component to an external system. +* [`useEffect`](/reference/react/useEffect) 将一个组件连接到外部系统。 ```js function ChatRoom({ roomId }) { @@ -72,23 +70,23 @@ function ChatRoom({ roomId }) { // ... ``` -Effects are an "escape hatch" from the React paradigm. Don't use Effects to orchestrate the data flow of your application. If you're not interacting with an external system, [you might not need an Effect.](/learn/you-might-not-need-an-effect) +Effect 是 React 范式的 "逃生舱门"。不要用 Effect 来协调你的应用程序的数据流。如果你不与外部系统交互，[你可能不需要 Effect。](/learn/you-might-not-need-an-effect) -There are two rarely used variations of `useEffect` with differences in timing: +`useEffect` 有两个很少使用的变体，它们在时间上有差异： -* [`useLayoutEffect`](/reference/react/useLayoutEffect) fires before the browser repaints the screen. You can measure layout here. -* [`useInsertionEffect`](/reference/react/useInsertionEffect) fires before React makes changes to the DOM. Libraries can insert dynamic CSS here. +* [`useLayoutEffect`](/reference/react/useLayoutEffect) 在浏览器重绘屏幕前启动。你可以在这里测量布局。 +* [`useInsertionEffect`](/reference/react/useInsertionEffect) 在 React 对 DOM 进行修改之前触发。Libraries 可以在这里插入动态 CSS。 --- ## Performance Hooks {/*performance-hooks*/} -A common way to optimize re-rendering performance is to skip unnecessary work. For example, you can tell React to reuse a cached calculation or to skip a re-render if the data has not changed since the previous render. +优化重新渲染性能的一个常见方法就是跳过不必要的工作。比如，你可以告诉 React 重用一个缓存的计算，或者如果数据在上一次渲染后没有变化，就跳过一次重新渲染。 -To skip calculations and unnecessary re-rendering, use one of these Hooks: +要跳过计算和不必要的重新渲染，请使用这些 Hooks 的一个： -- [`useMemo`](/reference/react/useMemo) lets you cache the result of an expensive calculation. -- [`useCallback`](/reference/react/useCallback) lets you cache a function definition before passing it down to an optimized component. +* [`useMemo`](/reference/react/useMemo) 让你缓存一个高昂的计算结果。 +* [`useCallback`](/reference/react/useCallback) 让你在将一个函数定义传递给一个优化的组件之前缓存它。 ```js function TodoList({ todos, tab, theme }) { @@ -97,25 +95,25 @@ function TodoList({ todos, tab, theme }) { } ``` -Sometimes, you can't skip re-rendering because the screen actually needs to update. In that case, you can improve performance by separating blocking updates that must be synchronous (like typing into an input) from non-blocking updates which don't need to block the user interface (like updating a chart). +有时，你不能跳过重新渲染，因为屏幕确实需要更新。在这种情况下，你可以通过将必须同步的阻塞更新（比如向输入法输入）与不需要阻塞用户界面的非阻塞更新（比如更新图表）分开以提高性能。 -To prioritize rendering, use one of these Hooks: +要确定渲染的优先级，可以使用这些 Hooks 的一个： -- [`useTransition`](/reference/react/useTransition) lets you mark a state transition as non-blocking and allow other updates to interrupt it. -- [`useDeferredValue`](/reference/react/useDeferredValue) lets you defer updating a non-critical part of the UI and let other parts update first. +* [`useTransition`](/reference/react/useTransition) 让你把一个状态转换标记为非阻塞，并允许其他更新中断它。 +* [`useDeferredValue`](/reference/react/useDeferredValue) 让你推迟更新用户界面的一个非关键部分，让其他部分更新。 --- ## Other Hooks {/*other-hooks*/} -These Hooks are mostly useful to library authors and aren't commonly used in the application code. +这些 Hooks 主要对 library 的作者有用，在应用代码中并不常用。 -- [`useDebugValue`](/reference/react/useDebugValue) lets you customize the label React DevTools displays for your custom Hook. -- [`useId`](/reference/react/useId) lets a component associate a unique ID with itself. Typically used with accessibility APIs. -- [`useSyncExternalStore`](/reference/react/useSyncExternalStore) lets a component subscribe to an external store. +* [`useDebugValue`](/reference/react/useDebugValue) 让你在 React DevTools 中为自定义 Hook 添加一个 label。 +* [`useId`](/reference/react/useId) 让组件将一个独特的 ID 与自己联系起来。通常与可访问性 API 一起使用。 +* [`useSyncExternalStore`](/reference/react/useSyncExternalStore) 让一个组件订阅一个外部 store。 --- ## Your own Hooks {/*your-own-hooks*/} -You can also [define your own custom Hooks](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component) as JavaScript functions. +你也可以在 JavaScript 函数中[定义你自己的 Hooks。](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component) From c54024536e3733ed9f6bbd0cab596a1c8ffc1b10 Mon Sep 17 00:00:00 2001 From: Harris <67175427+thehelium@users.noreply.github.com> Date: Fri, 24 Mar 2023 18:03:24 +0800 Subject: [PATCH 02/47] translate: some words updated to singular --- src/content/reference/react/index.md | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index a66b56adfa..a2f5016464 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -1,18 +1,18 @@ --- -title: "内置 React Hooks" +title: "内置 React Hook" --- -*Hooks* 让你从你的组件中使用不同的 React 功能。你可以使用内置的 Hooks 或者结合它们来建立你自己的。本页列出了 React 中所有的内置 Hooks。 +*Hook* 让你从你的组件中使用不同的 React 功能。你可以使用内置的 Hook 或者结合它们来建立你自己的。本页列出了 React 中所有的内置 Hook。 --- -## State Hooks {/*state-hooks*/} +## State Hook {/*state-hooks*/} -*State* 让一个组件 ["记住" 像用户输入的信息](/learn/state-a-components-memory)，比如，要给一个组件添加状态，使用这些 Hooks 中的一个： +*State* 让一个组件 ["记住" 像用户输入的信息](/learn/state-a-components-memory)，比如，要给一个组件添加状态，使用这些 Hook 中的一个： * [`useState`](/reference/react/useState) 声明了一个你可以直接更新的状态变量。 * [`useReducer`](/reference/react/useReducer) 声明了一个带有更新逻辑的状态变量在一个 [reducer 函数](/learn/extracting-state-logic-into-a-reducer)中。 @@ -25,7 +25,7 @@ function ImageGallery() { --- -## Context Hooks {/*context-hooks*/} +## Context Hook {/*context-hooks*/} *Context* 让一个组件[从远处的父组件接收信息，而不需要将其作为 props 传递。](/learn/passing-props-to-a-component) 比如，app 的顶层组件可以将当前的 UI 主题传递给下面的所有组件，无论它们层级多深。 @@ -39,7 +39,7 @@ function Button() { --- -## Ref Hooks {/*ref-hooks*/} +## Ref Hook {/*ref-hooks*/} *Ref* 让一个组件[持有一些不用于渲染的信息，](/learn/referencing-values-with-refs)如 DOM 节点或一个 timeout ID。与 state 不同的是，更新 Ref 并不会重新渲染你的组件。Ref 是 React 范式的一个 "逃生舱门"。当你需要与非 React 系统一起工作时，它们很有用，比如内置的浏览器 API。 @@ -54,7 +54,7 @@ function Form() { --- -## Effect Hooks {/*effect-hooks*/} +## Effect Hook {/*effect-hooks*/} *Effect* 让一个组件[连接到外部系统并与之同步。](/learn/synchronizing-with-effects)这包括处理网络、浏览器、DOM、动画、使用不同 UI 库编写的 widgets 以及其他非 React 代码。 @@ -83,7 +83,7 @@ Effect 是 React 范式的 "逃生舱门"。不要用 Effect 来协调你的应 优化重新渲染性能的一个常见方法就是跳过不必要的工作。比如，你可以告诉 React 重用一个缓存的计算，或者如果数据在上一次渲染后没有变化，就跳过一次重新渲染。 -要跳过计算和不必要的重新渲染，请使用这些 Hooks 的一个： +要跳过计算和不必要的重新渲染，请使用这些 Hook 的一个： * [`useMemo`](/reference/react/useMemo) 让你缓存一个高昂的计算结果。 * [`useCallback`](/reference/react/useCallback) 让你在将一个函数定义传递给一个优化的组件之前缓存它。 @@ -97,16 +97,16 @@ function TodoList({ todos, tab, theme }) { 有时，你不能跳过重新渲染，因为屏幕确实需要更新。在这种情况下，你可以通过将必须同步的阻塞更新（比如向输入法输入）与不需要阻塞用户界面的非阻塞更新（比如更新图表）分开以提高性能。 -要确定渲染的优先级，可以使用这些 Hooks 的一个： +要确定渲染的优先级，可以使用这些 Hook 的一个： * [`useTransition`](/reference/react/useTransition) 让你把一个状态转换标记为非阻塞，并允许其他更新中断它。 * [`useDeferredValue`](/reference/react/useDeferredValue) 让你推迟更新用户界面的一个非关键部分，让其他部分更新。 --- -## Other Hooks {/*other-hooks*/} +## 其他 Hook {/*other-hooks*/} -这些 Hooks 主要对 library 的作者有用，在应用代码中并不常用。 +这些 Hook 主要对 library 的作者有用，在应用代码中并不常用。 * [`useDebugValue`](/reference/react/useDebugValue) 让你在 React DevTools 中为自定义 Hook 添加一个 label。 * [`useId`](/reference/react/useId) 让组件将一个独特的 ID 与自己联系起来。通常与可访问性 API 一起使用。 @@ -114,6 +114,6 @@ function TodoList({ todos, tab, theme }) { --- -## Your own Hooks {/*your-own-hooks*/} +## 自己的 Hook {/*your-own-hooks*/} -你也可以在 JavaScript 函数中[定义你自己的 Hooks。](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component) +你也可以在 JavaScript 函数中[定义你自己的 Hook。](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component) From f4c22c823c2f2a9f9c51f494448ee1ed41b02c20 Mon Sep 17 00:00:00 2001 From: Harris <67175427+thehelium@users.noreply.github.com> Date: Fri, 24 Mar 2023 18:07:38 +0800 Subject: [PATCH 03/47] translate: some words updated to singular --- src/content/reference/react/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index a2f5016464..438dc6d078 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -10,7 +10,7 @@ title: "内置 React Hook" --- -## State Hook {/*state-hooks*/} +## 状态 Hook {/*state-hooks*/} *State* 让一个组件 ["记住" 像用户输入的信息](/learn/state-a-components-memory)，比如，要给一个组件添加状态，使用这些 Hook 中的一个： @@ -79,7 +79,7 @@ Effect 是 React 范式的 "逃生舱门"。不要用 Effect 来协调你的应 --- -## Performance Hooks {/*performance-hooks*/} +## 性能 Hook {/*performance-hooks*/} 优化重新渲染性能的一个常见方法就是跳过不必要的工作。比如，你可以告诉 React 重用一个缓存的计算，或者如果数据在上一次渲染后没有变化，就跳过一次重新渲染。 From af71afe16450390133133a4ed089b72434653aaf Mon Sep 17 00:00:00 2001 From: Harris <67175427+thehelium@users.noreply.github.com> Date: Sun, 26 Mar 2023 09:19:37 +0800 Subject: [PATCH 04/47] translate: update commit suggestion Co-authored-by: Xavi Lee --- src/content/reference/react/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index 438dc6d078..97c673dcd4 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -4,7 +4,7 @@ title: "内置 React Hook" -*Hook* 让你从你的组件中使用不同的 React 功能。你可以使用内置的 Hook 或者结合它们来建立你自己的。本页列出了 React 中所有的内置 Hook。 +*Hook* 让你可以在组件中使用不同的 React 功能。你可以使用内置的 Hook 或者把它们组合起来建立你自己的。本页列出了 React 中所有的内置 Hook。 From 4d3e177ad047e45613dfcd17478d0cb7fe2100e0 Mon Sep 17 00:00:00 2001 From: Harris <67175427+thehelium@users.noreply.github.com> Date: Sun, 26 Mar 2023 09:26:25 +0800 Subject: [PATCH 05/47] translate: update omissions --- src/content/reference/react/index.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index 97c673dcd4..814ba2455b 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -12,7 +12,9 @@ title: "内置 React Hook" ## 状态 Hook {/*state-hooks*/} -*State* 让一个组件 ["记住" 像用户输入的信息](/learn/state-a-components-memory)，比如，要给一个组件添加状态，使用这些 Hook 中的一个： +*State* 让一个组件 ["记住" 像用户输入的信息](/learn/state-a-components-memory)，比如，一个表单组件可以使用状态来存储输入值，而一个图片库组件可以使用状态来存储选定的图片索引。 + +要给一个组件添加状态，使用这些 Hook 中的一个： * [`useState`](/reference/react/useState) 声明了一个你可以直接更新的状态变量。 * [`useReducer`](/reference/react/useReducer) 声明了一个带有更新逻辑的状态变量在一个 [reducer 函数](/learn/extracting-state-logic-into-a-reducer)中。 From 0543ecb074d50a3cca68806004707f4cee1cbd91 Mon Sep 17 00:00:00 2001 From: Harris <67175427+thehelium@users.noreply.github.com> Date: Tue, 28 Mar 2023 15:44:46 +0800 Subject: [PATCH 06/47] translate: update the word 'state' Co-authored-by: Xavi Lee --- src/content/reference/react/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index 814ba2455b..0d80a7e1bc 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -12,7 +12,7 @@ title: "内置 React Hook" ## 状态 Hook {/*state-hooks*/} -*State* 让一个组件 ["记住" 像用户输入的信息](/learn/state-a-components-memory)，比如，一个表单组件可以使用状态来存储输入值，而一个图片库组件可以使用状态来存储选定的图片索引。 +*state* 让一个组件 [“记住”像用户输入的信息](/learn/state-a-components-memory)，比如，一个表单组件可以使用 state 来存储输入值，而一个图片库组件可以使用 state 来存储选定的图片索引。 要给一个组件添加状态，使用这些 Hook 中的一个： From 5c3357cdaaa5230220bb7a32ef45f2c334a8733b Mon Sep 17 00:00:00 2001 From: Harris <67175427+thehelium@users.noreply.github.com> Date: Tue, 28 Mar 2023 16:03:03 +0800 Subject: [PATCH 07/47] fix(words): change some words MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1. “状态” ---> ”state“ 2. “变体” ---> “变换形式” 3. “高昂的” ---> “非常高的” --- src/content/reference/react/index.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index 0d80a7e1bc..68678ca293 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -16,8 +16,8 @@ title: "内置 React Hook" 要给一个组件添加状态，使用这些 Hook 中的一个： -* [`useState`](/reference/react/useState) 声明了一个你可以直接更新的状态变量。 -* [`useReducer`](/reference/react/useReducer) 声明了一个带有更新逻辑的状态变量在一个 [reducer 函数](/learn/extracting-state-logic-into-a-reducer)中。 +* [`useState`](/reference/react/useState) 声明了一个你可以直接更新的 state 变量。 +* [`useReducer`](/reference/react/useReducer) 声明了一个带有更新逻辑的 state 变量在一个 [reducer 函数](/learn/extracting-state-logic-into-a-reducer)中。 ```js function ImageGallery() { @@ -74,7 +74,7 @@ function ChatRoom({ roomId }) { Effect 是 React 范式的 "逃生舱门"。不要用 Effect 来协调你的应用程序的数据流。如果你不与外部系统交互，[你可能不需要 Effect。](/learn/you-might-not-need-an-effect) -`useEffect` 有两个很少使用的变体，它们在时间上有差异： +`useEffect` 有两个很少使用的变换形式，它们在时间上有差异： * [`useLayoutEffect`](/reference/react/useLayoutEffect) 在浏览器重绘屏幕前启动。你可以在这里测量布局。 * [`useInsertionEffect`](/reference/react/useInsertionEffect) 在 React 对 DOM 进行修改之前触发。Libraries 可以在这里插入动态 CSS。 @@ -87,7 +87,7 @@ Effect 是 React 范式的 "逃生舱门"。不要用 Effect 来协调你的应 要跳过计算和不必要的重新渲染，请使用这些 Hook 的一个： -* [`useMemo`](/reference/react/useMemo) 让你缓存一个高昂的计算结果。 +* [`useMemo`](/reference/react/useMemo) 让你缓存一个非常高的计算结果。 * [`useCallback`](/reference/react/useCallback) 让你在将一个函数定义传递给一个优化的组件之前缓存它。 ```js From 0146f3f226f2a0593c61f6063fe779b698eca543 Mon Sep 17 00:00:00 2001 From: Harris <67175427+thehelium@users.noreply.github.com> Date: Thu, 30 Mar 2023 09:06:01 +0800 Subject: [PATCH 08/47] fix: update doc layout Co-authored-by: fw_qaq --- src/content/reference/react/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index 68678ca293..03f5f91442 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -118,4 +118,4 @@ function TodoList({ todos, tab, theme }) { ## 自己的 Hook {/*your-own-hooks*/} -你也可以在 JavaScript 函数中[定义你自己的 Hook。](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component) +你也可以在 JavaScript 函数中 [定义你自己的 Hook](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component)。 From a75761e789139c597adb356e7e5173d5827abf91 Mon Sep 17 00:00:00 2001 From: Harris <67175427+thehelium@users.noreply.github.com> Date: Thu, 30 Mar 2023 09:13:19 +0800 Subject: [PATCH 09/47] fix: update doc layout - fix the problem of hyperlink punctuation --- src/content/reference/react/index.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index 03f5f91442..e870180fdb 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -29,7 +29,7 @@ function ImageGallery() { ## Context Hook {/*context-hooks*/} -*Context* 让一个组件[从远处的父组件接收信息，而不需要将其作为 props 传递。](/learn/passing-props-to-a-component) 比如，app 的顶层组件可以将当前的 UI 主题传递给下面的所有组件，无论它们层级多深。 +*Context* 让一个组件[从远处的父组件接收信息，而不需要将其作为 props 传递](/learn/passing-props-to-a-component)。比如，app 的顶层组件可以将当前的 UI 主题传递给下面的所有组件，无论它们层级多深。 * [`useContext`](/reference/react/useContext) 读取并订阅了一个上下文。 @@ -43,7 +43,7 @@ function Button() { ## Ref Hook {/*ref-hooks*/} -*Ref* 让一个组件[持有一些不用于渲染的信息，](/learn/referencing-values-with-refs)如 DOM 节点或一个 timeout ID。与 state 不同的是，更新 Ref 并不会重新渲染你的组件。Ref 是 React 范式的一个 "逃生舱门"。当你需要与非 React 系统一起工作时，它们很有用，比如内置的浏览器 API。 +*Ref* 让一个组件[持有一些不用于渲染的信息](/learn/referencing-values-with-refs)，如 DOM 节点或一个 timeout ID。与 state 不同的是，更新 Ref 并不会重新渲染你的组件。Ref 是 React 范式的一个 "逃生舱门"。当你需要与非 React 系统一起工作时，它们很有用，比如内置的浏览器 API。 * [`useRef`](/reference/react/useRef) 声明了一个 Ref。你可以在其中保存任何值，但最常见的是它用来保存一个 DOM 节点。 * [`useImperativeHandle`](/reference/react/useImperativeHandle) 可以让你自定义你的组件所暴露的 Ref。这一点很少使用。 @@ -58,7 +58,7 @@ function Form() { ## Effect Hook {/*effect-hooks*/} -*Effect* 让一个组件[连接到外部系统并与之同步。](/learn/synchronizing-with-effects)这包括处理网络、浏览器、DOM、动画、使用不同 UI 库编写的 widgets 以及其他非 React 代码。 +*Effect* 让一个组件[连接到外部系统并与之同步](/learn/synchronizing-with-effects)。这包括处理网络、浏览器、DOM、动画、使用不同 UI 库编写的 widgets 以及其他非 React 代码。 * [`useEffect`](/reference/react/useEffect) 将一个组件连接到外部系统。 @@ -72,7 +72,7 @@ function ChatRoom({ roomId }) { // ... ``` -Effect 是 React 范式的 "逃生舱门"。不要用 Effect 来协调你的应用程序的数据流。如果你不与外部系统交互，[你可能不需要 Effect。](/learn/you-might-not-need-an-effect) +Effect 是 React 范式的 "逃生舱门"。不要用 Effect 来协调你的应用程序的数据流。如果你不与外部系统交互，[你可能不需要 Effect](/learn/you-might-not-need-an-effect)。 `useEffect` 有两个很少使用的变换形式，它们在时间上有差异： From e97c2ee22078950374571538b9b77023395581cf Mon Sep 17 00:00:00 2001 From: Harris <67175427+thehelium@users.noreply.github.com> Date: Thu, 30 Mar 2023 09:17:02 +0800 Subject: [PATCH 10/47] fix: update the sentence Co-authored-by: fw_qaq --- src/content/reference/react/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index e870180fdb..467d85a11e 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -99,7 +99,7 @@ function TodoList({ todos, tab, theme }) { 有时，你不能跳过重新渲染，因为屏幕确实需要更新。在这种情况下，你可以通过将必须同步的阻塞更新（比如向输入法输入）与不需要阻塞用户界面的非阻塞更新（比如更新图表）分开以提高性能。 -要确定渲染的优先级，可以使用这些 Hook 的一个： +要确定渲染的优先级，可以从以下 Hook 选择其中之一： * [`useTransition`](/reference/react/useTransition) 让你把一个状态转换标记为非阻塞，并允许其他更新中断它。 * [`useDeferredValue`](/reference/react/useDeferredValue) 让你推迟更新用户界面的一个非关键部分，让其他部分更新。 From 3dcf7d4958ad87c39cca6ec7783ba05f669de190 Mon Sep 17 00:00:00 2001 From: Harris <67175427+thehelium@users.noreply.github.com> Date: Sun, 9 Apr 2023 20:04:18 +0800 Subject: [PATCH 11/47] fix: update src/content/reference/react/index.md Co-authored-by: Yucohny <79147654+Yucohny@users.noreply.github.com> --- src/content/reference/react/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index 467d85a11e..a7bcd31fdf 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -29,7 +29,7 @@ function ImageGallery() { ## Context Hook {/*context-hooks*/} -*Context* 让一个组件[从远处的父组件接收信息，而不需要将其作为 props 传递](/learn/passing-props-to-a-component)。比如，app 的顶层组件可以将当前的 UI 主题传递给下面的所有组件，无论它们层级多深。 +*Context* 让一个组件 [从远处的父组件接收信息，而不需要将其作为 props 传递](/learn/passing-props-to-a-component)。比如，app 的顶层组件可以将当前的 UI 主题传递给下面的所有组件，无论它们层级多深。 * [`useContext`](/reference/react/useContext) 读取并订阅了一个上下文。 From 42f35fb6e78393779da963b4a99a11f0fc397922 Mon Sep 17 00:00:00 2001 From: Harris <67175427+thehelium@users.noreply.github.com> Date: Sun, 9 Apr 2023 20:04:27 +0800 Subject: [PATCH 12/47] fix: update src/content/reference/react/index.md Co-authored-by: Yucohny <79147654+Yucohny@users.noreply.github.com> --- src/content/reference/react/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index a7bcd31fdf..5d329d5146 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -43,7 +43,7 @@ function Button() { ## Ref Hook {/*ref-hooks*/} -*Ref* 让一个组件[持有一些不用于渲染的信息](/learn/referencing-values-with-refs)，如 DOM 节点或一个 timeout ID。与 state 不同的是，更新 Ref 并不会重新渲染你的组件。Ref 是 React 范式的一个 "逃生舱门"。当你需要与非 React 系统一起工作时，它们很有用，比如内置的浏览器 API。 +*Ref* 让一个组件 [持有一些不用于渲染的信息](/learn/referencing-values-with-refs)，如 DOM 节点或一个 timeout ID。与 state 不同的是，更新 Ref 并不会重新渲染你的组件。Ref 是 React 范式的一个 "逃生舱门"。当你需要与非 React 系统一起工作时，它们很有用，比如内置的浏览器 API。 * [`useRef`](/reference/react/useRef) 声明了一个 Ref。你可以在其中保存任何值，但最常见的是它用来保存一个 DOM 节点。 * [`useImperativeHandle`](/reference/react/useImperativeHandle) 可以让你自定义你的组件所暴露的 Ref。这一点很少使用。 From 650d0bea5abbdc03ec62a3321f50d7c2e10580d0 Mon Sep 17 00:00:00 2001 From: Harris <67175427+thehelium@users.noreply.github.com> Date: Sun, 9 Apr 2023 20:04:36 +0800 Subject: [PATCH 13/47] fix: update src/content/reference/react/index.md Co-authored-by: Yucohny <79147654+Yucohny@users.noreply.github.com> --- src/content/reference/react/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index 5d329d5146..f1deb003f5 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -72,7 +72,7 @@ function ChatRoom({ roomId }) { // ... ``` -Effect 是 React 范式的 "逃生舱门"。不要用 Effect 来协调你的应用程序的数据流。如果你不与外部系统交互，[你可能不需要 Effect](/learn/you-might-not-need-an-effect)。 +Effect 是 React 范式的“逃生舱门”。不要用 Effect 来协调你的应用程序的数据流。如果你不与外部系统交互，[你可能不需要 Effect](/learn/you-might-not-need-an-effect)。 `useEffect` 有两个很少使用的变换形式，它们在时间上有差异： From 49b6aa56ebb4ca0b217e8d2dbadf14ef31cb923b Mon Sep 17 00:00:00 2001 From: Harris <67175427+thehelium@users.noreply.github.com> Date: Tue, 11 Apr 2023 17:37:19 +0800 Subject: [PATCH 14/47] fix: update src/content/reference/react/index.md Co-authored-by: Yucohny <79147654+Yucohny@users.noreply.github.com> --- src/content/reference/react/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index f1deb003f5..c3a01388cc 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -4,7 +4,7 @@ title: "内置 React Hook" -*Hook* 让你可以在组件中使用不同的 React 功能。你可以使用内置的 Hook 或者把它们组合起来建立你自己的。本页列出了 React 中所有的内置 Hook。 +**Hook** 让你可以在组件中使用不同的 React 功能。你可以使用内置的 Hook 或者把它们组合起来建立你自己的。本页列出了 React 中所有的内置 Hook。 From f1cd8ce181ccf8acc2aaf5a15b9e7a0ebe9a39ac Mon Sep 17 00:00:00 2001 From: Harris <67175427+thehelium@users.noreply.github.com> Date: Tue, 11 Apr 2023 17:37:29 +0800 Subject: [PATCH 15/47] fix: update src/content/reference/react/index.md Co-authored-by: Yucohny <79147654+Yucohny@users.noreply.github.com> --- src/content/reference/react/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index c3a01388cc..430468cebe 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -12,7 +12,7 @@ title: "内置 React Hook" ## 状态 Hook {/*state-hooks*/} -*state* 让一个组件 [“记住”像用户输入的信息](/learn/state-a-components-memory)，比如，一个表单组件可以使用 state 来存储输入值，而一个图片库组件可以使用 state 来存储选定的图片索引。 +**state** 让一个组件 [“记住”像用户输入的信息](/learn/state-a-components-memory)，比如，一个表单组件可以使用 state 来存储输入值，而一个图片库组件可以使用 state 来存储选定的图片索引。 要给一个组件添加状态，使用这些 Hook 中的一个： From edc05ef53f405c0acc0a74a66bbfc00611baae12 Mon Sep 17 00:00:00 2001 From: Harris <67175427+thehelium@users.noreply.github.com> Date: Tue, 11 Apr 2023 17:37:44 +0800 Subject: [PATCH 16/47] fix: update src/content/reference/react/index.md Co-authored-by: Yucohny <79147654+Yucohny@users.noreply.github.com> --- src/content/reference/react/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index 430468cebe..bbbecb166d 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -46,7 +46,7 @@ function Button() { *Ref* 让一个组件 [持有一些不用于渲染的信息](/learn/referencing-values-with-refs)，如 DOM 节点或一个 timeout ID。与 state 不同的是，更新 Ref 并不会重新渲染你的组件。Ref 是 React 范式的一个 "逃生舱门"。当你需要与非 React 系统一起工作时，它们很有用，比如内置的浏览器 API。 * [`useRef`](/reference/react/useRef) 声明了一个 Ref。你可以在其中保存任何值，但最常见的是它用来保存一个 DOM 节点。 -* [`useImperativeHandle`](/reference/react/useImperativeHandle) 可以让你自定义你的组件所暴露的 Ref。这一点很少使用。 +* [`useImperativeHandle`](/reference/react/useImperativeHandle) 可以让你自定义你的组件所暴露的 ref。这一点很少使用。 ```js function Form() { From 76082d0c770e1189744498d807c0ac100abc960d Mon Sep 17 00:00:00 2001 From: Harris <67175427+thehelium@users.noreply.github.com> Date: Tue, 11 Apr 2023 17:39:30 +0800 Subject: [PATCH 17/47] fix: update src/content/reference/react/index.md Co-authored-by: Yucohny <79147654+Yucohny@users.noreply.github.com> --- src/content/reference/react/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index bbbecb166d..741e588634 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -45,7 +45,7 @@ function Button() { *Ref* 让一个组件 [持有一些不用于渲染的信息](/learn/referencing-values-with-refs)，如 DOM 节点或一个 timeout ID。与 state 不同的是，更新 Ref 并不会重新渲染你的组件。Ref 是 React 范式的一个 "逃生舱门"。当你需要与非 React 系统一起工作时，它们很有用，比如内置的浏览器 API。 -* [`useRef`](/reference/react/useRef) 声明了一个 Ref。你可以在其中保存任何值，但最常见的是它用来保存一个 DOM 节点。 +* [`useRef`](/reference/react/useRef) 声明了一个 ref。你可以在其中保存任何值，但最常见的是它用来保存一个 DOM 节点。 * [`useImperativeHandle`](/reference/react/useImperativeHandle) 可以让你自定义你的组件所暴露的 ref。这一点很少使用。 ```js From 75eb1d08f534225e002b7948df4195b2f3be5a84 Mon Sep 17 00:00:00 2001 From: Harris <67175427+thehelium@users.noreply.github.com> Date: Wed, 12 Apr 2023 15:16:53 +0800 Subject: [PATCH 18/47] fix: update src/content/reference/react/index.md Co-authored-by: fw_qaq --- src/content/reference/react/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index 741e588634..4ddf4553ae 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -17,7 +17,7 @@ title: "内置 React Hook" 要给一个组件添加状态，使用这些 Hook 中的一个： * [`useState`](/reference/react/useState) 声明了一个你可以直接更新的 state 变量。 -* [`useReducer`](/reference/react/useReducer) 声明了一个带有更新逻辑的 state 变量在一个 [reducer 函数](/learn/extracting-state-logic-into-a-reducer)中。 +* [`useReducer`](/reference/react/useReducer) 声明了一个带有更新逻辑的 state 变量在一个 [reducer 函数](/learn/extracting-state-logic-into-a-reducer) 中。 ```js function ImageGallery() { From d615019d2342af0f1ffa4e043dfcb19038987a5f Mon Sep 17 00:00:00 2001 From: Harris <67175427+thehelium@users.noreply.github.com> Date: Wed, 12 Apr 2023 15:31:58 +0800 Subject: [PATCH 19/47] fix: update src/content/reference/react/index.md Co-authored-by: fw_qaq --- src/content/reference/react/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index 4ddf4553ae..bdd4b81e5c 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -58,7 +58,7 @@ function Form() { ## Effect Hook {/*effect-hooks*/} -*Effect* 让一个组件[连接到外部系统并与之同步](/learn/synchronizing-with-effects)。这包括处理网络、浏览器、DOM、动画、使用不同 UI 库编写的 widgets 以及其他非 React 代码。 +*Effect* 让一个组件 [连接到外部系统并与之同步](/learn/synchronizing-with-effects)。这包括处理网络、浏览器、DOM、动画、使用不同 UI 库编写的 widgets 以及其他非 React 代码。 * [`useEffect`](/reference/react/useEffect) 将一个组件连接到外部系统。 From adc4ac1f4b4aa0a2e4f97c95a120698af16ea7ea Mon Sep 17 00:00:00 2001 From: Harris <67175427+thehelium@users.noreply.github.com> Date: Wed, 12 Apr 2023 15:32:21 +0800 Subject: [PATCH 20/47] fix: update src/content/reference/react/index.md Co-authored-by: fw_qaq --- src/content/reference/react/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index bdd4b81e5c..96b0b9ab6b 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -108,7 +108,7 @@ function TodoList({ todos, tab, theme }) { ## 其他 Hook {/*other-hooks*/} -这些 Hook 主要对 library 的作者有用，在应用代码中并不常用。 +这些 Hook 主要对库的作者有用，在应用代码中并不常用。 * [`useDebugValue`](/reference/react/useDebugValue) 让你在 React DevTools 中为自定义 Hook 添加一个 label。 * [`useId`](/reference/react/useId) 让组件将一个独特的 ID 与自己联系起来。通常与可访问性 API 一起使用。 From fe47727de4aeafadcfc69c28a10a7492bec15b8a Mon Sep 17 00:00:00 2001 From: Harris <67175427+thehelium@users.noreply.github.com> Date: Wed, 12 Apr 2023 15:32:32 +0800 Subject: [PATCH 21/47] fix: update src/content/reference/react/index.md Co-authored-by: fw_qaq --- src/content/reference/react/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index 96b0b9ab6b..9d78497274 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -110,7 +110,7 @@ function TodoList({ todos, tab, theme }) { 这些 Hook 主要对库的作者有用，在应用代码中并不常用。 -* [`useDebugValue`](/reference/react/useDebugValue) 让你在 React DevTools 中为自定义 Hook 添加一个 label。 +* [`useDebugValue`](/reference/react/useDebugValue) 让你在 React 开发者工具中为自定义 Hook 添加一个 label。 * [`useId`](/reference/react/useId) 让组件将一个独特的 ID 与自己联系起来。通常与可访问性 API 一起使用。 * [`useSyncExternalStore`](/reference/react/useSyncExternalStore) 让一个组件订阅一个外部 store。 From 4a269e3c58e3b0dab3e29ea074f7be40c66b0feb Mon Sep 17 00:00:00 2001 From: Harris <67175427+thehelium@users.noreply.github.com> Date: Wed, 12 Apr 2023 15:45:29 +0800 Subject: [PATCH 22/47] fix: update some strange words --- src/content/reference/react/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index 9d78497274..ce29d7245a 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -76,8 +76,8 @@ Effect 是 React 范式的“逃生舱门”。不要用 Effect 来协调你的 `useEffect` 有两个很少使用的变换形式，它们在时间上有差异： -* [`useLayoutEffect`](/reference/react/useLayoutEffect) 在浏览器重绘屏幕前启动。你可以在这里测量布局。 -* [`useInsertionEffect`](/reference/react/useInsertionEffect) 在 React 对 DOM 进行修改之前触发。Libraries 可以在这里插入动态 CSS。 +* [`useLayoutEffect`](/reference/react/useLayoutEffect) 在浏览器重新绘制屏幕前启动。在这里，你可以测量布局。 +* [`useInsertionEffect`](/reference/react/useInsertionEffect) 在 React 对 DOM 进行更改之前触发。在这里，库可以插入动态的 CSS。 --- From 8fe99430cdf3665230ce23e64f70d5ebcfd6b52d Mon Sep 17 00:00:00 2001 From: Harris <67175427+thehelium@users.noreply.github.com> Date: Thu, 20 Apr 2023 15:41:01 +0800 Subject: [PATCH 23/47] fix: update src/content/reference/react/index.md Co-authored-by: Xavi Lee --- src/content/reference/react/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index ce29d7245a..78226b26d7 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -43,7 +43,7 @@ function Button() { ## Ref Hook {/*ref-hooks*/} -*Ref* 让一个组件 [持有一些不用于渲染的信息](/learn/referencing-values-with-refs)，如 DOM 节点或一个 timeout ID。与 state 不同的是，更新 Ref 并不会重新渲染你的组件。Ref 是 React 范式的一个 "逃生舱门"。当你需要与非 React 系统一起工作时，它们很有用，比如内置的浏览器 API。 +*ref* 让一个组件 [持有一些不用于渲染的信息](/learn/referencing-values-with-refs)，如 DOM 节点或一个 timeout ID。与 state 不同的是，更新 ref 并不会重新渲染你的组件。ref 是 React 范式的一个 "逃生舱门"。当你需要与非 React 系统一起工作时，它们很有用，比如内置的浏览器 API。 * [`useRef`](/reference/react/useRef) 声明了一个 ref。你可以在其中保存任何值，但最常见的是它用来保存一个 DOM 节点。 * [`useImperativeHandle`](/reference/react/useImperativeHandle) 可以让你自定义你的组件所暴露的 ref。这一点很少使用。 From b114d3a459d8446c7036fead65e18a09e827cc2d Mon Sep 17 00:00:00 2001 From: Harris <67175427+thehelium@users.noreply.github.com> Date: Thu, 20 Apr 2023 15:41:10 +0800 Subject: [PATCH 24/47] fix: update src/content/reference/react/index.md Co-authored-by: Xavi Lee --- src/content/reference/react/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index 78226b26d7..68c29afe33 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -14,7 +14,7 @@ title: "内置 React Hook" **state** 让一个组件 [“记住”像用户输入的信息](/learn/state-a-components-memory)，比如，一个表单组件可以使用 state 来存储输入值，而一个图片库组件可以使用 state 来存储选定的图片索引。 -要给一个组件添加状态，使用这些 Hook 中的一个： +要给一个组件添加状态，可以使用这些 Hook 中的一个： * [`useState`](/reference/react/useState) 声明了一个你可以直接更新的 state 变量。 * [`useReducer`](/reference/react/useReducer) 声明了一个带有更新逻辑的 state 变量在一个 [reducer 函数](/learn/extracting-state-logic-into-a-reducer) 中。 From 7ce4bf5505ecf71a622c2040376b04d158990dbc Mon Sep 17 00:00:00 2001 From: Harris <67175427+thehelium@users.noreply.github.com> Date: Thu, 20 Apr 2023 15:41:22 +0800 Subject: [PATCH 25/47] fix: update src/content/reference/react/index.md Co-authored-by: Xavi Lee --- src/content/reference/react/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index 68c29afe33..da5eec04d0 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -29,7 +29,7 @@ function ImageGallery() { ## Context Hook {/*context-hooks*/} -*Context* 让一个组件 [从远处的父组件接收信息，而不需要将其作为 props 传递](/learn/passing-props-to-a-component)。比如，app 的顶层组件可以将当前的 UI 主题传递给下面的所有组件，无论它们层级多深。 +*context* 让一个组件 [从远处的父组件接收信息，而不需要将其作为 props 传递](/learn/passing-props-to-a-component)。比如，app 的顶层组件可以将当前的 UI 主题传递给下面的所有组件，无论它们层级多深。 * [`useContext`](/reference/react/useContext) 读取并订阅了一个上下文。 From a8ad57518f24492c1c5cac7b2765d36fdf968a8a Mon Sep 17 00:00:00 2001 From: Harris <67175427+thehelium@users.noreply.github.com> Date: Thu, 20 Apr 2023 15:41:31 +0800 Subject: [PATCH 26/47] fix: update src/content/reference/react/index.md Co-authored-by: Xavi Lee --- src/content/reference/react/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index da5eec04d0..58bebd8942 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -31,7 +31,7 @@ function ImageGallery() { *context* 让一个组件 [从远处的父组件接收信息，而不需要将其作为 props 传递](/learn/passing-props-to-a-component)。比如，app 的顶层组件可以将当前的 UI 主题传递给下面的所有组件，无论它们层级多深。 -* [`useContext`](/reference/react/useContext) 读取并订阅了一个上下文。 +* [`useContext`](/reference/react/useContext) 读取并订阅了一个 context。 ```js function Button() { From 3894dc9dbbe9f64c30cc63bfc0e4acf3b6faf377 Mon Sep 17 00:00:00 2001 From: Harris <67175427+thehelium@users.noreply.github.com> Date: Tue, 9 May 2023 13:22:56 +0800 Subject: [PATCH 27/47] fix: update the term "escape hatches" --- src/content/reference/react/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index 58bebd8942..17e9d2a555 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -43,7 +43,7 @@ function Button() { ## Ref Hook {/*ref-hooks*/} -*ref* 让一个组件 [持有一些不用于渲染的信息](/learn/referencing-values-with-refs)，如 DOM 节点或一个 timeout ID。与 state 不同的是，更新 ref 并不会重新渲染你的组件。ref 是 React 范式的一个 "逃生舱门"。当你需要与非 React 系统一起工作时，它们很有用，比如内置的浏览器 API。 +*ref* 让一个组件 [持有一些不用于渲染的信息](/learn/referencing-values-with-refs)，如 DOM 节点或一个 timeout ID。与 state 不同的是，更新 ref 并不会重新渲染你的组件。ref 是 React 范式的一个 “规避机制”。当你需要与非 React 系统一起工作时，它们很有用，比如内置的浏览器 API。 * [`useRef`](/reference/react/useRef) 声明了一个 ref。你可以在其中保存任何值，但最常见的是它用来保存一个 DOM 节点。 * [`useImperativeHandle`](/reference/react/useImperativeHandle) 可以让你自定义你的组件所暴露的 ref。这一点很少使用。 @@ -72,7 +72,7 @@ function ChatRoom({ roomId }) { // ... ``` -Effect 是 React 范式的“逃生舱门”。不要用 Effect 来协调你的应用程序的数据流。如果你不与外部系统交互，[你可能不需要 Effect](/learn/you-might-not-need-an-effect)。 +Effect 是 React 范式的“规避机制”。不要用 Effect 来协调你的应用程序的数据流。如果你不与外部系统交互，[你可能不需要 Effect](/learn/you-might-not-need-an-effect)。 `useEffect` 有两个很少使用的变换形式，它们在时间上有差异： From 621868c08ab842c814bdd6587716ff7764b56157 Mon Sep 17 00:00:00 2001 From: Harris <67175427+thehelium@users.noreply.github.com> Date: Tue, 9 May 2023 13:25:08 +0800 Subject: [PATCH 28/47] fix: update the term "escape hatch" Remove unnecessary spaces --- src/content/reference/react/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index 17e9d2a555..fd3d9d6c1f 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -43,7 +43,7 @@ function Button() { ## Ref Hook {/*ref-hooks*/} -*ref* 让一个组件 [持有一些不用于渲染的信息](/learn/referencing-values-with-refs)，如 DOM 节点或一个 timeout ID。与 state 不同的是，更新 ref 并不会重新渲染你的组件。ref 是 React 范式的一个 “规避机制”。当你需要与非 React 系统一起工作时，它们很有用，比如内置的浏览器 API。 +*ref* 让一个组件 [持有一些不用于渲染的信息](/learn/referencing-values-with-refs)，如 DOM 节点或一个 timeout ID。与 state 不同的是，更新 ref 并不会重新渲染你的组件。ref 是 React 范式的一个“规避机制”。当你需要与非 React 系统一起工作时，它们很有用，比如内置的浏览器 API。 * [`useRef`](/reference/react/useRef) 声明了一个 ref。你可以在其中保存任何值，但最常见的是它用来保存一个 DOM 节点。 * [`useImperativeHandle`](/reference/react/useImperativeHandle) 可以让你自定义你的组件所暴露的 ref。这一点很少使用。 From d79a5c2dacd01be8ecd145aaaaefa1bdecee1745 Mon Sep 17 00:00:00 2001 From: Harris <67175427+thehelium@users.noreply.github.com> Date: Fri, 19 May 2023 13:23:00 +0800 Subject: [PATCH 29/47] fix: update reviewed Co-authored-by: Xleine <919143384@qq.com> --- src/content/reference/react/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index fd3d9d6c1f..2dbe430ca9 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -12,7 +12,7 @@ title: "内置 React Hook" ## 状态 Hook {/*state-hooks*/} -**state** 让一个组件 [“记住”像用户输入的信息](/learn/state-a-components-memory)，比如，一个表单组件可以使用 state 来存储输入值，而一个图片库组件可以使用 state 来存储选定的图片索引。 +**state** 让一个组件 [“记住”用户输入的信息](/learn/state-a-components-memory)，比如，一个表单组件可以使用 state 来存储输入值，而一个图片库组件可以使用 state 来存储选定的图片索引。 要给一个组件添加状态，可以使用这些 Hook 中的一个： From ee19c8f510c41c3845c84e56cd08ae5038cd6d22 Mon Sep 17 00:00:00 2001 From: Harris <67175427+thehelium@users.noreply.github.com> Date: Fri, 19 May 2023 13:23:11 +0800 Subject: [PATCH 30/47] fix: update reviewed Co-authored-by: Xleine <919143384@qq.com> --- src/content/reference/react/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index 2dbe430ca9..142cef5957 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -14,7 +14,7 @@ title: "内置 React Hook" **state** 让一个组件 [“记住”用户输入的信息](/learn/state-a-components-memory)，比如，一个表单组件可以使用 state 来存储输入值，而一个图片库组件可以使用 state 来存储选定的图片索引。 -要给一个组件添加状态，可以使用这些 Hook 中的一个： +要给一个组件添加状态，可以使用下面的 Hook： * [`useState`](/reference/react/useState) 声明了一个你可以直接更新的 state 变量。 * [`useReducer`](/reference/react/useReducer) 声明了一个带有更新逻辑的 state 变量在一个 [reducer 函数](/learn/extracting-state-logic-into-a-reducer) 中。 From 8642915dd857c62b041eea7f32b31ff9b0390d04 Mon Sep 17 00:00:00 2001 From: Harris <67175427+thehelium@users.noreply.github.com> Date: Fri, 19 May 2023 13:23:29 +0800 Subject: [PATCH 31/47] fix: update reviewed Co-authored-by: Xleine <919143384@qq.com> --- src/content/reference/react/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index 142cef5957..fa3bf579de 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -31,7 +31,7 @@ function ImageGallery() { *context* 让一个组件 [从远处的父组件接收信息，而不需要将其作为 props 传递](/learn/passing-props-to-a-component)。比如，app 的顶层组件可以将当前的 UI 主题传递给下面的所有组件，无论它们层级多深。 -* [`useContext`](/reference/react/useContext) 读取并订阅了一个 context。 +* [`useContext`](/reference/react/useContext) 读取并订阅一个 context。 ```js function Button() { From 9c9bb83da4df97ba71734adb53221212b242c762 Mon Sep 17 00:00:00 2001 From: Harris <67175427+thehelium@users.noreply.github.com> Date: Fri, 19 May 2023 13:23:51 +0800 Subject: [PATCH 32/47] fix: update reviewed Co-authored-by: Xleine <919143384@qq.com> --- src/content/reference/react/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index fa3bf579de..55dc4a5d39 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -45,7 +45,7 @@ function Button() { *ref* 让一个组件 [持有一些不用于渲染的信息](/learn/referencing-values-with-refs)，如 DOM 节点或一个 timeout ID。与 state 不同的是，更新 ref 并不会重新渲染你的组件。ref 是 React 范式的一个“规避机制”。当你需要与非 React 系统一起工作时，它们很有用，比如内置的浏览器 API。 -* [`useRef`](/reference/react/useRef) 声明了一个 ref。你可以在其中保存任何值，但最常见的是它用来保存一个 DOM 节点。 +* [`useRef`](/reference/react/useRef) 声明一个 ref。你可以在其中保存任何值，但最常见的是它用来保存一个 DOM 节点。 * [`useImperativeHandle`](/reference/react/useImperativeHandle) 可以让你自定义你的组件所暴露的 ref。这一点很少使用。 ```js From 94262b3dba5e173416412e3cc9ed712e99efc80d Mon Sep 17 00:00:00 2001 From: Harris <67175427+thehelium@users.noreply.github.com> Date: Fri, 19 May 2023 13:24:14 +0800 Subject: [PATCH 33/47] fix: update reviewed Co-authored-by: Xleine <919143384@qq.com> --- src/content/reference/react/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index 55dc4a5d39..11f32f4c34 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -46,7 +46,7 @@ function Button() { *ref* 让一个组件 [持有一些不用于渲染的信息](/learn/referencing-values-with-refs)，如 DOM 节点或一个 timeout ID。与 state 不同的是，更新 ref 并不会重新渲染你的组件。ref 是 React 范式的一个“规避机制”。当你需要与非 React 系统一起工作时，它们很有用，比如内置的浏览器 API。 * [`useRef`](/reference/react/useRef) 声明一个 ref。你可以在其中保存任何值，但最常见的是它用来保存一个 DOM 节点。 -* [`useImperativeHandle`](/reference/react/useImperativeHandle) 可以让你自定义你的组件所暴露的 ref。这一点很少使用。 +* [`useImperativeHandle`](/reference/react/useImperativeHandle) 可以让你自定义组件所暴露的 ref。一般很少使用。 ```js function Form() { From a8ee6b9635a6cbe61bb964b96eb413df37d6bfaa Mon Sep 17 00:00:00 2001 From: Harris <67175427+thehelium@users.noreply.github.com> Date: Fri, 19 May 2023 13:24:33 +0800 Subject: [PATCH 34/47] fix: update reviewed Co-authored-by: Xleine <919143384@qq.com> --- src/content/reference/react/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index 11f32f4c34..2e76a04bee 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -74,7 +74,7 @@ function ChatRoom({ roomId }) { Effect 是 React 范式的“规避机制”。不要用 Effect 来协调你的应用程序的数据流。如果你不与外部系统交互，[你可能不需要 Effect](/learn/you-might-not-need-an-effect)。 -`useEffect` 有两个很少使用的变换形式，它们在时间上有差异： +`useEffect` 有两个很少使用的变换形式，它们在时机上有一些差异： * [`useLayoutEffect`](/reference/react/useLayoutEffect) 在浏览器重新绘制屏幕前启动。在这里，你可以测量布局。 * [`useInsertionEffect`](/reference/react/useInsertionEffect) 在 React 对 DOM 进行更改之前触发。在这里，库可以插入动态的 CSS。 From a74e9068db19ee96a373f818a079b54e28b96a56 Mon Sep 17 00:00:00 2001 From: Harris <67175427+thehelium@users.noreply.github.com> Date: Fri, 19 May 2023 13:25:16 +0800 Subject: [PATCH 35/47] fix: update reviewed Co-authored-by: Xleine <919143384@qq.com> --- src/content/reference/react/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index 2e76a04bee..eecdbd29f0 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -76,7 +76,7 @@ Effect 是 React 范式的“规避机制”。不要用 Effect 来协调你的 `useEffect` 有两个很少使用的变换形式，它们在时机上有一些差异： -* [`useLayoutEffect`](/reference/react/useLayoutEffect) 在浏览器重新绘制屏幕前启动。在这里，你可以测量布局。 +* [`useLayoutEffect`](/reference/react/useLayoutEffect) 在浏览器重新绘制屏幕前执行。在这里，你可以测量布局。 * [`useInsertionEffect`](/reference/react/useInsertionEffect) 在 React 对 DOM 进行更改之前触发。在这里，库可以插入动态的 CSS。 --- From 9090cc43ab9e8024ff47457c47496df3c71b89e6 Mon Sep 17 00:00:00 2001 From: Harris <67175427+thehelium@users.noreply.github.com> Date: Fri, 19 May 2023 13:25:35 +0800 Subject: [PATCH 36/47] fix: update reviewed Co-authored-by: Xleine <919143384@qq.com> --- src/content/reference/react/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index eecdbd29f0..2b1ca65c77 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -83,7 +83,7 @@ Effect 是 React 范式的“规避机制”。不要用 Effect 来协调你的 ## 性能 Hook {/*performance-hooks*/} -优化重新渲染性能的一个常见方法就是跳过不必要的工作。比如，你可以告诉 React 重用一个缓存的计算，或者如果数据在上一次渲染后没有变化，就跳过一次重新渲染。 +优化重新渲染性能的一个常见方法就是跳过不必要的工作。比如，你可以告诉 React 重用一个缓存的计算结果，或者如果数据在上一次渲染后没有变化，就跳过这次重新渲染。 要跳过计算和不必要的重新渲染，请使用这些 Hook 的一个： From 4b38404d6fa3c494c678a4080c216177bceed48b Mon Sep 17 00:00:00 2001 From: Harris <67175427+thehelium@users.noreply.github.com> Date: Fri, 19 May 2023 13:25:53 +0800 Subject: [PATCH 37/47] fix: update reviewed Co-authored-by: Xleine <919143384@qq.com> --- src/content/reference/react/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index 2b1ca65c77..622535fa23 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -85,7 +85,7 @@ Effect 是 React 范式的“规避机制”。不要用 Effect 来协调你的 优化重新渲染性能的一个常见方法就是跳过不必要的工作。比如，你可以告诉 React 重用一个缓存的计算结果，或者如果数据在上一次渲染后没有变化，就跳过这次重新渲染。 -要跳过计算和不必要的重新渲染，请使用这些 Hook 的一个： +要跳过计算和不必要的重新渲染，请使用这些 Hook： * [`useMemo`](/reference/react/useMemo) 让你缓存一个非常高的计算结果。 * [`useCallback`](/reference/react/useCallback) 让你在将一个函数定义传递给一个优化的组件之前缓存它。 From 4b60acc8491f0db75c0eb409a5633d1f58acc1c3 Mon Sep 17 00:00:00 2001 From: Harris <67175427+thehelium@users.noreply.github.com> Date: Fri, 19 May 2023 13:26:15 +0800 Subject: [PATCH 38/47] fix: update reviewed Co-authored-by: Xleine <919143384@qq.com> --- src/content/reference/react/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index 622535fa23..bd39a1ad12 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -87,7 +87,7 @@ Effect 是 React 范式的“规避机制”。不要用 Effect 来协调你的 要跳过计算和不必要的重新渲染，请使用这些 Hook： -* [`useMemo`](/reference/react/useMemo) 让你缓存一个非常高的计算结果。 +* [`useMemo`](/reference/react/useMemo) 让你缓存一个代价非常高的计算结果。 * [`useCallback`](/reference/react/useCallback) 让你在将一个函数定义传递给一个优化的组件之前缓存它。 ```js From 769973877822c47a45abca5ebe475922d972cce9 Mon Sep 17 00:00:00 2001 From: Harris <67175427+thehelium@users.noreply.github.com> Date: Fri, 19 May 2023 13:26:45 +0800 Subject: [PATCH 39/47] fix: update reviewed Co-authored-by: Xleine <919143384@qq.com> --- src/content/reference/react/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index bd39a1ad12..3f55e2c782 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -97,7 +97,7 @@ function TodoList({ todos, tab, theme }) { } ``` -有时，你不能跳过重新渲染，因为屏幕确实需要更新。在这种情况下，你可以通过将必须同步的阻塞更新（比如向输入法输入）与不需要阻塞用户界面的非阻塞更新（比如更新图表）分开以提高性能。 +有时，你不能跳过重新渲染，因为屏幕确实需要更新。在这种情况下，你可以通过将必须同步的阻塞更新（比如使用输入法输入内容）与不需要阻塞用户界面的非阻塞更新（比如更新图表）分开以提高性能。 要确定渲染的优先级，可以从以下 Hook 选择其中之一： From e33f7ec6c9df4ffb55bd1f2ec65440f2323b2afc Mon Sep 17 00:00:00 2001 From: Harris <67175427+thehelium@users.noreply.github.com> Date: Fri, 19 May 2023 13:27:19 +0800 Subject: [PATCH 40/47] fix: update reviewed Co-authored-by: Xleine <919143384@qq.com> --- src/content/reference/react/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index 3f55e2c782..a94124a320 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -99,7 +99,7 @@ function TodoList({ todos, tab, theme }) { 有时，你不能跳过重新渲染，因为屏幕确实需要更新。在这种情况下，你可以通过将必须同步的阻塞更新（比如使用输入法输入内容）与不需要阻塞用户界面的非阻塞更新（比如更新图表）分开以提高性能。 -要确定渲染的优先级，可以从以下 Hook 选择其中之一： +要确定渲染的优先级，可以使用以下 Hook： * [`useTransition`](/reference/react/useTransition) 让你把一个状态转换标记为非阻塞，并允许其他更新中断它。 * [`useDeferredValue`](/reference/react/useDeferredValue) 让你推迟更新用户界面的一个非关键部分，让其他部分更新。 From 89df8d31e56f96dc5a6d88865739491f29807aa4 Mon Sep 17 00:00:00 2001 From: Harris <67175427+thehelium@users.noreply.github.com> Date: Fri, 19 May 2023 13:27:30 +0800 Subject: [PATCH 41/47] fix: update reviewed Co-authored-by: Xleine <919143384@qq.com> --- src/content/reference/react/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index a94124a320..f382d898f5 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -110,7 +110,7 @@ function TodoList({ todos, tab, theme }) { 这些 Hook 主要对库的作者有用，在应用代码中并不常用。 -* [`useDebugValue`](/reference/react/useDebugValue) 让你在 React 开发者工具中为自定义 Hook 添加一个 label。 +* [`useDebugValue`](/reference/react/useDebugValue) 让你在 React 开发者工具中为自定义 Hook 添加一个标签。 * [`useId`](/reference/react/useId) 让组件将一个独特的 ID 与自己联系起来。通常与可访问性 API 一起使用。 * [`useSyncExternalStore`](/reference/react/useSyncExternalStore) 让一个组件订阅一个外部 store。 From 0a09a153bf3b976959d5f29d93300d197a7cd5b7 Mon Sep 17 00:00:00 2001 From: Harris <67175427+thehelium@users.noreply.github.com> Date: Fri, 19 May 2023 13:27:42 +0800 Subject: [PATCH 42/47] fix: update reviewed Co-authored-by: Xleine <919143384@qq.com> --- src/content/reference/react/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index f382d898f5..737876be12 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -111,7 +111,7 @@ function TodoList({ todos, tab, theme }) { 这些 Hook 主要对库的作者有用，在应用代码中并不常用。 * [`useDebugValue`](/reference/react/useDebugValue) 让你在 React 开发者工具中为自定义 Hook 添加一个标签。 -* [`useId`](/reference/react/useId) 让组件将一个独特的 ID 与自己联系起来。通常与可访问性 API 一起使用。 +* [`useId`](/reference/react/useId) 让组件绑定一个唯一 ID。通常与可访问性 API 一起使用。 * [`useSyncExternalStore`](/reference/react/useSyncExternalStore) 让一个组件订阅一个外部 store。 --- From 7a2e4d853b17656eae5feb578181c7b6c2f75011 Mon Sep 17 00:00:00 2001 From: Harris <67175427+thehelium@users.noreply.github.com> Date: Fri, 19 May 2023 13:27:50 +0800 Subject: [PATCH 43/47] fix: update reviewed Co-authored-by: Xleine <919143384@qq.com> --- src/content/reference/react/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index 737876be12..14b5dd1ff0 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -116,6 +116,6 @@ function TodoList({ todos, tab, theme }) { --- -## 自己的 Hook {/*your-own-hooks*/} +## 自定义 Hook {/*your-own-hooks*/} 你也可以在 JavaScript 函数中 [定义你自己的 Hook](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component)。 From 184000a6c9ac6b17f749b18bce20e6636c66469a Mon Sep 17 00:00:00 2001 From: Yucohny <79147654+Yucohny@users.noreply.github.com> Date: Mon, 19 Jun 2023 18:28:47 +0800 Subject: [PATCH 44/47] Update src/content/reference/react/index.md --- src/content/reference/react/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index 14b5dd1ff0..f2fc0cc086 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -85,7 +85,7 @@ Effect 是 React 范式的“规避机制”。不要用 Effect 来协调你的 优化重新渲染性能的一个常见方法就是跳过不必要的工作。比如，你可以告诉 React 重用一个缓存的计算结果，或者如果数据在上一次渲染后没有变化，就跳过这次重新渲染。 -要跳过计算和不必要的重新渲染，请使用这些 Hook： +你可以使用这些 Hook 跳过计算和不必要的重新渲染： * [`useMemo`](/reference/react/useMemo) 让你缓存一个代价非常高的计算结果。 * [`useCallback`](/reference/react/useCallback) 让你在将一个函数定义传递给一个优化的组件之前缓存它。 From df0681d92b4cd045d20c125d8c275ff64c6f66bd Mon Sep 17 00:00:00 2001 From: Yucohny <79147654+Yucohny@users.noreply.github.com> Date: Mon, 19 Jun 2023 18:28:56 +0800 Subject: [PATCH 45/47] Update src/content/reference/react/index.md --- src/content/reference/react/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index f2fc0cc086..87113bbbc3 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -112,7 +112,7 @@ function TodoList({ todos, tab, theme }) { * [`useDebugValue`](/reference/react/useDebugValue) 让你在 React 开发者工具中为自定义 Hook 添加一个标签。 * [`useId`](/reference/react/useId) 让组件绑定一个唯一 ID。通常与可访问性 API 一起使用。 -* [`useSyncExternalStore`](/reference/react/useSyncExternalStore) 让一个组件订阅一个外部 store。 +* [`useSyncExternalStore`](/reference/react/useSyncExternalStore) 允许一个组件订阅一个外部 store。 --- From a8c5d6aa8240158ca8dff6cf0ab8f06f955310fb Mon Sep 17 00:00:00 2001 From: Yucohny <79147654+Yucohny@users.noreply.github.com> Date: Mon, 19 Jun 2023 18:29:03 +0800 Subject: [PATCH 46/47] Update src/content/reference/react/index.md --- src/content/reference/react/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index 87113bbbc3..1c2a582982 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -110,7 +110,7 @@ function TodoList({ todos, tab, theme }) { 这些 Hook 主要对库的作者有用，在应用代码中并不常用。 -* [`useDebugValue`](/reference/react/useDebugValue) 让你在 React 开发者工具中为自定义 Hook 添加一个标签。 +* [`useDebugValue`](/reference/react/useDebugValue) 允许你在 React 开发者工具中为自定义 Hook 添加一个标签。 * [`useId`](/reference/react/useId) 让组件绑定一个唯一 ID。通常与可访问性 API 一起使用。 * [`useSyncExternalStore`](/reference/react/useSyncExternalStore) 允许一个组件订阅一个外部 store。 From cd04727e9a87b61292d491df42383a7e34028e76 Mon Sep 17 00:00:00 2001 From: Yucohny <79147654+Yucohny@users.noreply.github.com> Date: Mon, 19 Jun 2023 18:29:10 +0800 Subject: [PATCH 47/47] Update src/content/reference/react/index.md --- src/content/reference/react/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index 1c2a582982..089ba3fcc3 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -111,7 +111,7 @@ function TodoList({ todos, tab, theme }) { 这些 Hook 主要对库的作者有用，在应用代码中并不常用。 * [`useDebugValue`](/reference/react/useDebugValue) 允许你在 React 开发者工具中为自定义 Hook 添加一个标签。 -* [`useId`](/reference/react/useId) 让组件绑定一个唯一 ID。通常与可访问性 API 一起使用。 +* [`useId`](/reference/react/useId) 允许组件绑定一个唯一 ID。通常与可访问性 API 一起使用。 * [`useSyncExternalStore`](/reference/react/useSyncExternalStore) 允许一个组件订阅一个外部 store。 ---