`'s `color` to red without impacting `background-color`. Similarly, **different React contexts don't override each other.** Each context that you make with `createContext()` is completely separate from other ones, and ties together components using and providing *that particular* context. One component may use or provide many different contexts without a problem.
+在 CSS 中，不同屬性的 `color` 和 `background-color` 不會彼此覆蓋。你可以設置所有的 `
` 都為 `color` 紅色，還不會影響 `background-color`。類似地， **不同的 React context 不會彼此覆蓋。** 你用 `createContext()` 創建的每個 context 都和其他 context 完全分離，只有使用和提供 *那個特定的* context 才會聯繫到一起。一個 component 可以毫無問題地使用或者是提供不同的 context。
-## Before you use context {/*before-you-use-context*/}
+## 在你使用 context 之前 {/*before-you-use-context*/}
-Context is very tempting to use! However, this also means it's too easy to overuse it. **Just because you need to pass some props several levels deep doesn't mean you should put that information into context.**
+使用 Context 看起來非常誘人！然而，這也意味著它很容易被過度使用。 **若你只是想將一些 props 逐層傳遞多個層級，這並不意味著你需要把這些信息放到 context 中。**
-Here's a few alternatives you should consider before using context:
+在你使用 context 之前，這裡有一些可供你選擇的代替方案:
-1. **Start by [passing props.](/learn/passing-props-to-a-component)** If your components are not trivial, it's not unusual to pass a dozen props down through a dozen components. It may feel like a slog, but it makes it very clear which components use which data! The person maintaining your code will be glad you've made the data flow explicit with props.
-2. **Extract components and [pass JSX as `children`](/learn/passing-props-to-a-component#passing-jsx-as-children) to them.** If you pass some data through many layers of intermediate components that don't use that data (and only pass it further down), this often means that you forgot to extract some components along the way. For example, maybe you pass data props like `posts` to visual components that don't use them directly, like `
`. Instead, make `Layout` take `children` as a prop, and render `
`. This reduces the number of layers between the component specifying the data and the one that needs it.
+1. **從 [傳遞 props 開始。](/learn/passing-props-to-a-component)** 如果你的 component 看起來不起眼，那麼通過十幾個 component 向下傳遞一堆 props 並不少見。這有點像是在埋頭苦幹，但是這樣做可以讓哪些 component 用了哪些數據變得十分清晰！維護你代碼的人會很高興你用 props 傳遞數據，這會讓數據流變得更加清晰。
+2. **抽象 component 並 [把 JSX 作為 `children`](/learn/passing-props-to-a-component#passing-jsx-as-children) 傳給它們。** 如果你通過很多層不使用該數據的中間 component （並且只會向下傳遞）來傳遞數據。舉個例子，你可能想把一些像 `posts` 的 props 數據傳遞到不會直接使用這個參數的 component，比如說 `
`。更好的方式是，讓 `Layout` 把 `children` 當做一個參數，然後渲染 `
`。這樣就減少了定義數據的 component 和使用數據的 component 之間的層級。
-If neither of these approaches works well for you, consider context.
+如果這兩種替代方案都不適合你，再考慮使用 context。
-## Use cases for context {/*use-cases-for-context*/}
+## Context 的使用場景 {/*use-cases-for-context*/}
-* **Theming:** If your app lets the user change its appearance (e.g. dark mode), you can put a context provider at the top of your app, and use that context in components that need to adjust their visual look.
-* **Current account:** Many components might need to know the currently logged in user. Putting it in context makes it convenient to read it anywhere in the tree. Some apps also let you operate multiple accounts at the same time (e.g. to leave a comment as a different user). In those cases, it can be convenient to wrap a part of the UI into a nested provider with a different current account value.
-* **Routing:** Most routing solutions use context internally to hold the current route. This is how every link "knows" whether it's active or not. If you build your own router, you might want to do it too.
-* **Managing state:** As your app grows, you might end up with a lot of state closer to the top of your app. Many distant components below may want to change it. It is common to [use a reducer together with context](/learn/scaling-up-with-reducer-and-context) to manage complex state and pass it down to distant components without too much hassle.
+* **主題:** 如果你的應用允許用戶更改其外觀（例如 dark mode），你可以在應用頂層定義一個 context provider，並在需要調整其外觀的 component 中使用該 context。
+* **當前賬戶:** 許多 component 可能需要知道當前登錄的用戶信息。把它放到 context 中可以方便在樹中任何為止讀取它。某些應用還允許你同時操作多個賬戶（例如，以不同用戶的身份發表評論）。在這些情況下，將 UI 的一部分包裹到具有不同賬戶數據的 provider 中會很方便。
+* **路由:** 大多數路由解決方案在其內部使用 context 來保存當前路由。這就是每個鏈接「知道」它是否處於活動狀態的方式。如果你創建自己的路由，你可能也會這麼做。
+* **state 管理:** 隨著你的應用的開發，最終在靠近應用頂部的為止可能會有很多 state。許多遙遠的下層 component 可能想要修改它們。通常 [將 reducer 與 context 搭配使用](/learn/scaling-up-with-reducer-and-context) 來管理複雜的 state 並將其傳遞給深層的 component 來避免過多的麻煩。
-Context is not limited to static values. If you pass a different value on the next render, React will update all the components reading it below! This is why context is often used in combination with state.
+Context 不局限於靜態值。如果你在下一次渲染時傳遞不同的值，React 將會更新所有讀取它的下層 component ！這就是 context 經常和 state 結合使用的原因。
-In general, if some information is needed by distant components in different parts of the tree, it's a good indication that context will help you.
+通常來說，如果樹中不同部分的遠距離 component 需要傳遞某些信息，使用 context 是一個很好的選擇。
-* Context lets a component provide some information to the entire tree below it.
-* To pass context:
- 1. Create and export it with `export const MyContext = createContext(defaultValue)`.
- 2. Pass it to the `useContext(MyContext)` Hook to read it in any child component, no matter how deep.
- 3. Wrap children into `` to provide it from a parent.
-* Context passes through any components in the middle.
-* Context lets you write components that "adapt to their surroundings".
-* Before you use context, try passing props or passing JSX as `children`.
+* Context 讓一個 component 向其下整個樹的 component 提供信息。
+* 傳遞 context 的步驟:
+ 1. 通過 `export const MyContext = createContext(defaultValue)` 創建並 export context。
+ 2. 在無論層級多深的任何 child component 中，把 context 傳遞給 `useContext(MyContext)` Hook 來讀取它。
+ 3. 在 parent 中把 children 包裹在 `` 中來提供 context。
+* Context 會穿過在中間的所有 component。
+* Context 讓你寫出「適應周圍環境的」 component。
+* 在你使用 context 之前，先嘗試下傳遞 props 或者將 JSX 作為 `children` 傳遞。
-#### Replace prop drilling with context {/*replace-prop-drilling-with-context*/}
+#### 用 context 代替 prop 逐級傳遞 {/*replace-prop-drilling-with-context*/}
-In this example, toggling the checkbox changes the `imageSize` prop passed to each ``. The checkbox state is held in the top-level `App` component, but each `` needs to be aware of it.
+該示例中，切換復選框狀態會修改傳入的每個 `` 的 `imageSize` 參數。復選框的 state 保存在頂層的 `App` component 中，但每個 `` 都需要注意它。
-Currently, `App` passes `imageSize` to `List`, which passes it to each `Place`, which passes it to the `PlaceImage`. Remove the `imageSize` prop, and instead pass it from the `App` component directly to `PlaceImage`.
+现在， `App` 将 `imageSize` 傳遞給 `List`，再將其傳遞給每個 `Place`，`Place` 又將其傳遞給 `PlaceImage`。刪除 `imageSize` 參數，然後在 `App` component 中直接將其傳遞給 `PlaceImage`。
-You can declare context in `Context.js`.
+你可以在 `Context.js` 中聲明 context。
@@ -1157,7 +1157,7 @@ li {
-Note how components in the middle don't need to pass `imageSize` anymore.
+注意，中間的 component 不再需要傳遞 `imageSize`。