Skip to content

Commit

Permalink
merging all conflicts
Browse files Browse the repository at this point in the history
  • Loading branch information
react-translations-bot committed Sep 30, 2024
2 parents c71df0a + fe37c42 commit a73dc91
Show file tree
Hide file tree
Showing 11 changed files with 1,224 additions and 1,078 deletions.
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@
},
"dependencies": {
"@codesandbox/sandpack-react": "2.13.5",
"@docsearch/css": "3.0.0-alpha.41",
"@docsearch/react": "3.0.0-alpha.41",
"@docsearch/css": "^3.6.1",
"@docsearch/react": "^3.6.1",
"@headlessui/react": "^1.7.0",
"@radix-ui/react-context-menu": "^2.1.5",
"body-scroll-lock": "^3.1.3",
Expand Down
12 changes: 11 additions & 1 deletion src/components/Search.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,17 @@ export function Search({
onOpen,
onClose,
searchParameters = {
hitsPerPage: 5,
hitsPerPage: 30,
attributesToHighlight: [
'hierarchy.lvl0',
'hierarchy.lvl1',
'hierarchy.lvl2',
'hierarchy.lvl3',
'hierarchy.lvl4',
'hierarchy.lvl5',
'hierarchy.lvl6',
'content',
],
},
}: SearchProps) {
useDocSearchKeyboardEvents({isOpen, onOpen, onClose});
Expand Down
5 changes: 5 additions & 0 deletions src/content/community/conferences.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,11 @@ October 18, 2024. In-person in Brussels, Belgium (hybrid event)

[Website](https://www.react.brussels/) - [Twitter](https://x.com/BrusselsReact)

### reactjsday 2024 {/*reactjsday-2024*/}
October 25, 2024. In-person in Verona, Italy + online (hybrid event)

[Website](https://2024.reactjsday.it/) - [Twitter](https://x.com/reactjsday) - [Facebook](https://www.facebook.com/GrUSP/) - [YouTube](https://www.youtube.com/c/grusp)

### React Advanced London 2024 {/*react-advanced-london-2024*/}
October 25 & 28, 2024. In-person in London, UK + online (hybrid event)

Expand Down
8 changes: 4 additions & 4 deletions src/content/reference/react/useCallback.md
Original file line number Diff line number Diff line change
Expand Up @@ -711,7 +711,7 @@ function ChatRoom({ roomId }) {

useEffect(() => {
const options = createOptions();
const connection = createConnection();
const connection = createConnection(options);
connection.connect();
// ...
```
Expand All @@ -722,7 +722,7 @@ function ChatRoom({ roomId }) {
```js {6}
useEffect(() => {
const options = createOptions();
const connection = createConnection();
const connection = createConnection(options);
connection.connect();
return () => connection.disconnect();
}, [createOptions]); // 🔴 问题:这个依赖在每一次渲染中都会发生改变
Expand All @@ -744,7 +744,7 @@ function ChatRoom({ roomId }) {

useEffect(() => {
const options = createOptions();
const connection = createConnection();
const connection = createConnection(options);
connection.connect();
return () => connection.disconnect();
}, [createOptions]); // ✅ 仅当 createOptions 更改时更改
Expand All @@ -766,7 +766,7 @@ function ChatRoom({ roomId }) {
}

const options = createOptions();
const connection = createConnection();
const connection = createConnection(options);
connection.connect();
return () => connection.disconnect();
}, [roomId]); // ✅ 仅当 roomId 更改时更改
Expand Down
81 changes: 81 additions & 0 deletions src/content/reference/react/useMemo.md
Original file line number Diff line number Diff line change
Expand Up @@ -1056,7 +1056,88 @@ label {

---

<<<<<<< HEAD
### 记忆另一个 Hook 的依赖 {/*memoizing-a-dependency-of-another-hook*/}
=======
### Preventing an Effect from firing too often {/*preventing-an-effect-from-firing-too-often*/}

Sometimes, you might want to use a value inside an [Effect:](/learn/synchronizing-with-effects)

```js {4-7,10}
function ChatRoom({ roomId }) {
const [message, setMessage] = useState('');

const options = {
serverUrl: 'https://localhost:1234',
roomId: roomId
}

useEffect(() => {
const connection = createConnection(options);
connection.connect();
// ...
```
This creates a problem. [Every reactive value must be declared as a dependency of your Effect.](/learn/lifecycle-of-reactive-effects#react-verifies-that-you-specified-every-reactive-value-as-a-dependency) However, if you declare `options` as a dependency, it will cause your Effect to constantly reconnect to the chat room:
```js {5}
useEffect(() => {
const connection = createConnection(options);
connection.connect();
return () => connection.disconnect();
}, [options]); // 🔴 Problem: This dependency changes on every render
// ...
```
To solve this, you can wrap the object you need to call from an Effect in `useMemo`:
```js {4-9,16}
function ChatRoom({ roomId }) {
const [message, setMessage] = useState('');

const options = useMemo(() => {
return {
serverUrl: 'https://localhost:1234',
roomId: roomId
};
}, [roomId]); // ✅ Only changes when roomId changes

useEffect(() => {
const options = createOptions();
const connection = createConnection(options);
connection.connect();
return () => connection.disconnect();
}, [options]); // ✅ Only changes when createOptions changes
// ...
```
This ensures that the `options` object is the same between re-renders if `useMemo` returns the cached object.
However, since `useMemo` is performance optimization, not a semantic guarantee, React may throw away the cached value if [there is a specific reason to do that](#caveats). This will also cause the effect to re-fire, **so it's even better to remove the need for a function dependency** by moving your object *inside* the Effect:
```js {5-8,13}
function ChatRoom({ roomId }) {
const [message, setMessage] = useState('');

useEffect(() => {
const options = { // ✅ No need for useMemo or object dependencies!
serverUrl: 'https://localhost:1234',
roomId: roomId
}

const connection = createConnection(options);
connection.connect();
return () => connection.disconnect();
}, [roomId]); // ✅ Only changes when roomId changes
// ...
```
Now your code is simpler and doesn't need `useMemo`. [Learn more about removing Effect dependencies.](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect)
### Memoizing a dependency of another Hook {/*memoizing-a-dependency-of-another-hook*/}
>>>>>>> fe37c42e0b51167d7f3c98593f50de997d666266
假设你有一个计算函数依赖于直接在组件主体中创建的对象:
Expand Down
6 changes: 6 additions & 0 deletions src/content/reference/react/useReducer.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,14 @@ function MyComponent() {
#### 注意事项 {/*caveats*/}
<<<<<<< HEAD
* `useReducer` 是一个 Hook,所以只能在 **组件的顶层作用域** 或自定义 Hook 中调用,而不能在循环或条件语句中调用。如果你有这种需求,可以创建一个新的组件,并把 state 移入其中。
* 严格模式下 React 会 **调用两次 reducer 和初始化函数**,这可以 [帮助你发现意外的副作用](#my-reducer-or-initializer-function-runs-twice)。这只是开发模式下的行为,并不会影响生产环境。只要 reducer 和初始化函数是纯函数(理应如此)就不会改变你的逻辑。其中一个调用结果会被忽略。
=======
* `useReducer` is a Hook, so you can only call it **at the top level of your component** or your own Hooks. You can't call it inside loops or conditions. If you need that, extract a new component and move the state into it.
* The `dispatch` function has a stable identity, so you will often see it omitted from effect dependencies, but including it will not cause the effect to fire. If the linter lets you omit a dependency without errors, it is safe to do. [Learn more about removing Effect dependencies.](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect)
* In Strict Mode, React will **call your reducer and initializer twice** in order to [help you find accidental impurities.](#my-reducer-or-initializer-function-runs-twice) This is development-only behavior and does not affect production. If your reducer and initializer are pure (as they should be), this should not affect your logic. The result from one of the calls is ignored.
>>>>>>> fe37c42e0b51167d7f3c98593f50de997d666266
---
Expand Down
6 changes: 6 additions & 0 deletions src/content/reference/react/useState.md
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,13 @@ function handleClick() {
* React 会 [批量处理状态更新](/learn/queueing-a-series-of-state-updates)。它会在所有 **事件处理函数运行** 并调用其 `set` 函数后更新屏幕。这可以防止在单个事件期间多次重新渲染。在某些罕见情况下,你需要强制 React 更早地更新屏幕,例如访问 DOM,你可以使用 [`flushSync`](/reference/react-dom/flushSync)。
<<<<<<< HEAD
* 在渲染期间,只允许在当前渲染组件内部调用 `set` 函数。React 将丢弃其输出并立即尝试使用新状态重新渲染。这种方式很少需要,但你可以使用它来存储 **先前渲染中的信息**。[请参见下面的示例](#storing-information-from-previous-renders)。
=======
* The `set` function has a stable identity, so you will often see it omitted from effect dependencies, but including it will not cause the effect to fire. If the linter lets you omit a dependency without errors, it is safe to do. [Learn more about removing Effect dependencies.](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect)
* Calling the `set` function *during rendering* is only allowed from within the currently rendering component. React will discard its output and immediately attempt to render it again with the new state. This pattern is rarely needed, but you can use it to **store information from the previous renders**. [See an example below.](#storing-information-from-previous-renders)
>>>>>>> fe37c42e0b51167d7f3c98593f50de997d666266
* 在严格模式中,React 将 **两次调用你的更新函数**,以帮助你找到 [意外的不纯性](#my-initializer-or-updater-function-runs-twice)。这只是开发时的行为,不影响生产。如果你的更新函数是纯函数(本该是这样),就不应影响该行为。其中一次调用的结果将被忽略。
Expand Down
6 changes: 6 additions & 0 deletions src/content/reference/react/useTransition.md
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,13 @@ function TabContainer() {

* 传递给 `startTransition` 的函数必须是同步的。React 会立即执行此函数,并将在其执行期间发生的所有状态更新标记为 transition。如果在其执行期间,尝试稍后执行状态更新(例如在一个定时器中执行状态更新),这些状态更新不会被标记为 transition。

<<<<<<< HEAD
* 标记为 Transition 的状态更新将被其他状态更新打断。例如在 Transition 中更新图表组件,并在图表组件仍在重新渲染时继续在输入框中输入,React 将首先处理输入框的更新,之后再重新启动对图表组件的渲染工作。
=======
* The `startTransition` function has a stable identity, so you will often see it omitted from effect dependencies, but including it will not cause the effect to fire. If the linter lets you omit a dependency without errors, it is safe to do. [Learn more about removing Effect dependencies.](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect)

* A state update marked as a Transition will be interrupted by other state updates. For example, if you update a chart component inside a Transition, but then start typing into an input while the chart is in the middle of a re-render, React will restart the rendering work on the chart component after handling the input update.
>>>>>>> fe37c42e0b51167d7f3c98593f50de997d666266
* Transition 更新不能用于控制文本输入。

Expand Down
2 changes: 1 addition & 1 deletion src/siteConfig.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ exports.siteConfig = {
twitterUrl: 'https://twitter.com/reactjs',
algolia: {
appId: '1FCF9AYYAT',
apiKey: 'e8451218980a351815563de007648b00',
apiKey: '1b7ad4e1c89e645e351e59d40544eda1',
indexName: 'beta-react',
},
};
3 changes: 2 additions & 1 deletion src/utils/finishedTranslations.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,5 +11,6 @@ export const finishedTranslations = [
'es',
'fr',
'ja',
'tr'
'tr',
'ko'
];
Loading

0 comments on commit a73dc91

Please sign in to comment.