fix conflict

Author: loveloki

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

@@ -568,11 +568,7 @@ label { display: block; margin-top: 10px; }
 
 </Sandpack>
 
-<<<<<<< HEAD
 你可以将 Effect Event 看成和事件处理函数相似的东西。主要区别是事件处理函数只在响应用户交互的时候运行，而 Effect Event 是你在 Effect 中触发的。Effect Event 让你在 Effect 响应性和不应是响应式的代码间“打破链条”。
-=======
-You can think of Effect Events as being very similar to event handlers. The main difference is that event handlers run in response to user interactions, whereas Effect Events are triggered by you from Effects. Effect Events let you "break the chain" between the reactivity of Effects and code that should not be reactive.
->>>>>>> 38b52cfdf059b2efc5ee3223a758efe00319fcc7
 
 ### 使用 Effect Event 读取最新的 props 和 state {/*reading-latest-props-and-state-with-effect-events*/}
 

src/content/reference/react/useOptimistic.md

@@ -20,56 +20,28 @@ const [optimisticState, setOptimistic] = useOptimistic(value, reducer?);
 
 ### `useOptimistic(value, reducer?)` {/*useoptimistic*/}
 
-<<<<<<< HEAD
-`useOptimistic` 是一个 React Hook，它允许你在进行异步操作时显示不同 state。它接受 state 作为参数，并返回该 state 的副本，在异步操作（如网络请求）期间可以不同。你需要提供一个函数，该函数接受当前 state 和操作的输入，并返回在操作挂起期间要使用的乐观状态。
-
-这个状态被称为“乐观”状态是因为通常用于立即向用户呈现执行操作的结果，即使实际上操作需要一些时间来完成。
-=======
-Call `useOptimistic` at the top level of your component to create optimistic state for a value.
->>>>>>> 38b52cfdf059b2efc5ee3223a758efe00319fcc7
+在组件的顶层调用 `useOptimistic` 来创建一个乐观状态。
 
 ```js
 import { useOptimistic } from 'react';
 
-<<<<<<< HEAD
-function AppContainer() {
-  const [optimisticState, addOptimistic] = useOptimistic(
-    state,
-    // 更新函数
-    (currentState, optimisticValue) => {
-      // 使用乐观值
-      // 合并并返回新 state
-    }
-  );
-=======
 function MyComponent({name, todos}) {
   const [optimisticAge, setOptimisticAge] = useOptimistic(28);
   const [optimisticName, setOptimisticName] = useOptimistic(name);
   const [optimisticTodos, setOptimisticTodos] = useOptimistic(todos, todoReducer);
   // ...
->>>>>>> 38b52cfdf059b2efc5ee3223a758efe00319fcc7
 }
 ```
 
 [参阅下方更多示例](#usage)。
 
 #### 参数 {/*parameters*/}
 
-<<<<<<< HEAD
-* `state`：初始时和没有挂起操作时要返回的值。
-* `updateFn(currentState, optimisticValue)`：一个函数，接受当前 state 和传递给 `addOptimistic` 的乐观值，并返回结果乐观状态。它必须是一个纯函数。`updateFn` 接受两个参数：`currentState` 和 `optimisticValue`。返回值将是 `currentState` 和 `optimisticValue` 的合并值。
-
-=======
-* `value`: The value returned when there are no pending Actions.
+* `value`: 当没有待处理的操作时返回的值。
 * **optional** `reducer(currentState, action)`: The reducer function that specifies how the optimistic state gets updated. It must be pure, should take the current state and reducer action arguments, and should return the next optimistic state.
->>>>>>> 38b52cfdf059b2efc5ee3223a758efe00319fcc7
 
 #### 返回值 {/*returns*/}
 
-<<<<<<< HEAD
-* `optimisticState`：结果乐观状态。除非有操作挂起，否则它等于 `state`，在这种情况下，它等于 `updateFn` 返回的值。
-* `addOptimistic`：触发乐观更新时调用的 dispatch 函数。它接受一个可以是任何类型的参数 `optimisticValue`，并以 `state` 和 `optimisticValue` 作为参数来调用 `updateFn`。
-=======
 `useOptimistic` returns an array with exactly two values:
 
 1. `optimisticState`: The current optimistic state. It is equal to `value` unless an Action is pending, in which case it is equal to the state returned by `reducer` (or the value passed to the set function if no `reducer` was provided).
@@ -167,19 +139,11 @@ The `value` argument to `useOptimistic` determines what displays after the Actio
 If the Action throws an error, the Transition still ends, and React renders with whatever `value` currently is. Since the parent typically only updates `value` on success, a failure means `value` hasn't changed, so the UI shows what it showed before the optimistic update. You can catch the error to show a message to the user.
 
 </DeepDive>
->>>>>>> 38b52cfdf059b2efc5ee3223a758efe00319fcc7
 
 ---
 
 ## 用法 {/*usage*/}
 
-<<<<<<< HEAD
-### 乐观地更新表单 {/*optimistically-updating-with-forms*/}
-
-`useOptimistic` Hook 提供了一种在后台操作（如网络请求）完成之前乐观地更新用户界面的方式。在表单的上下文中，这种技术有助于使应用程序在感觉上响应地更加快速。当用户提交表单时，界面立即更新为预期的结果，而不是等待服务器的响应来反映更改。
-
-例如，当用户在表单中输入消息并点击“发送”按钮时，`useOptimistic` Hook 允许消息立即出现在列表中，并带有“发送中……”标签，即使消息实际上还没有发送到服务器。这种“乐观”方法给人一种快速和响应灵敏的印象。然后，表单在后台尝试真正发送消息。一旦服务器确认消息已收到，“发送中……”标签就会被移除。
-=======
 ### Adding optimistic state to a component {/*adding-optimistic-state-to-a-component*/}
 
 Call `useOptimistic` at the top level of your component to declare one or more optimistic states.
@@ -242,7 +206,6 @@ For an example, see: [Using optimistic state in Action props](#using-optimistic-
 In an [Action prop](/reference/react/useTransition#exposing-action-props-from-components), you can call the optimistic setter directly without `startTransition`.
 
 This example sets optimistic state inside a `<form>` `submitAction` prop:
->>>>>>> 38b52cfdf059b2efc5ee3223a758efe00319fcc7
 
 <Sandpack>
 
@@ -657,36 +620,6 @@ export default function TodoList({ todos, addTodoAction }) {
   }
 
   return (
-<<<<<<< HEAD
-    <>
-      <form action={formAction} ref={formRef}>
-        <input type="text" name="message" placeholder="你好！" />
-        <button type="submit">发送</button>
-      </form>
-      {optimisticMessages.map((message, index) => (
-        <div key={index}>
-          {message.text}
-          {!!message.sending && <small>（发送中……）</small>}
-        </div>
-      ))}
-      
-    </>
-  );
-}
-
-export default function App() {
-  const [messages, setMessages] = useState([
-    { text: "你好，在这儿！", sending: false, key: 1 }
-  ]);
-  async function sendMessageAction(formData) {
-    const sentMessage = await deliverMessage(formData.get("message"));
-    startTransition(() => {
-      setMessages((messages) => [{ text: sentMessage }, ...messages]);
-    })
-  }
-  return <Thread messages={messages} sendMessageAction={sendMessageAction} />;
-}
-=======
     <div>
       <button onClick={() => handleAddTodo('New todo')}>Add Todo</button>
       <ul>
@@ -699,7 +632,6 @@ export default function App() {
     </div>
   );
 }
->>>>>>> 38b52cfdf059b2efc5ee3223a758efe00319fcc7
 ```
 
 ```js src/actions.js hidden