docs(cn): translate content/docs/context.md into Chinese (#87)

Author: 橡树上

content/docs/context.md

@@ -6,10 +6,9 @@ class App extends React.Component {
 
 function Toolbar(props) {
   // highlight-range{1-4,7}
-  // The Toolbar component must take an extra "theme" prop
-  // and pass it to the ThemedButton. This can become painful
-  // if every single button in the app needs to know the theme
-  // because it would have to be passed through all components.
+  // Toolbar 组件接受一个额外的“theme”属性，然后传递给 ThemedButton 组件。
+  // 如果应用中每一个单独的按钮都需要知道 theme 的值，这会是件很麻烦的事，
+  // 因为必须将这个值层层传递所有组件。
   return (
     <div>
       <ThemedButton theme={props.theme} />

examples/context/motivation-problem.js

@@ -1,15 +1,14 @@
 // highlight-range{1-4}
-// Context lets us pass a value deep into the component tree
-// without explicitly threading it through every component.
-// Create a context for the current theme (with "light" as the default).
+// Context 可以让我们无须明确地传遍每一个组件，就能将值深入传递进组件树。
+// 为当前的 theme 创建一个 context（“light”为默认值）。
 const ThemeContext = React.createContext('light');
 
 class App extends React.Component {
   render() {
     // highlight-range{1-3,5}
-    // Use a Provider to pass the current theme to the tree below.
-    // Any component can read it, no matter how deep it is.
-    // In this example, we're passing "dark" as the current value.
+    // 使用一个 Provider 来将当前的 theme 传递给以下的组件树。
+    // 无论多深，任何组件都能读取这个值。
+    // 在这个例子中，我们将 “dark” 作为当前的值传递下去。
     return (
       <ThemeContext.Provider value="dark">
         <Toolbar />
@@ -19,8 +18,7 @@ class App extends React.Component {
 }
 
 // highlight-range{1,2}
-// A component in the middle doesn't have to
-// pass the theme down explicitly anymore.
+// 中间的组件再也不必指明往下传递 theme 了。
 function Toolbar(props) {
   return (
     <div>
@@ -31,9 +29,9 @@ function Toolbar(props) {
 
 class ThemedButton extends React.Component {
   // highlight-range{1-3,6}
-  // Assign a contextType to read the current theme context.
-  // React will find the closest theme Provider above and use its value.
-  // In this example, the current theme is "dark".
+  // 指定 contextType 读取当前的 theme context。
+  // React 会往上找到最近的 theme Provider，然后使用它的值。
+  // 在这个例子中，当前的 theme 值为 “dark”。
   static contextType = ThemeContext;
   render() {
     return <Button theme={this.context} />;

examples/context/motivation-solution.js

@@ -1,7 +1,7 @@
-// Theme context, default to light theme
+// Theme context，默认的 theme 是 “light” 值
 const ThemeContext = React.createContext('light');
 
-// Signed-in user context
+// 用户登录 context
 const UserContext = React.createContext({
   name: 'Guest',
 });
@@ -10,7 +10,7 @@ class App extends React.Component {
   render() {
     const {signedInUser, theme} = this.props;
 
-    // App component that provides initial context values
+    // 提供初始 context 值的 App 组件
     // highlight-range{2-3,5-6}
     return (
       <ThemeContext.Provider value={theme}>
@@ -31,7 +31,7 @@ function Layout() {
   );
 }
 
-// A component may consume multiple contexts
+// 一个组件可能会消费多个 context
 function Content() {
   // highlight-range{2-10}
   return (

examples/context/multiple-contexts.js

@@ -1,7 +1,7 @@
 import {ThemeContext, themes} from './theme-context';
 import ThemedButton from './themed-button';
 
-// An intermediate component that uses the ThemedButton
+// 一个使用 ThemedButton 的中间组件
 function Toolbar(props) {
   return (
     <ThemedButton onClick={props.changeTheme}>
@@ -28,10 +28,9 @@ class App extends React.Component {
   }
 
   render() {
-    //highlight-range{1-3}
-    // The ThemedButton button inside the ThemeProvider
-    // uses the theme from state while the one outside uses
-    // the default dark theme
+    // highlight-range{1-3}
+    // 在 ThemeProvider 内部的 ThemedButton 按钮组件使用 state 中的 theme 值，
+    // 而外部的组件使用默认的 theme 值
     //highlight-range{3-5,7}
     return (
       <Page>

examples/context/theme-detailed-app.js

@@ -11,5 +11,5 @@ export const themes = {
 
 // highlight-range{1-3}
 export const ThemeContext = React.createContext(
-  themes.dark // default value
+  themes.dark // 默认值
 );

examples/context/theme-detailed-theme-context.js

@@ -15,8 +15,7 @@ class App extends React.Component {
     };
 
     // highlight-range{1-2,5}
-    // State also contains the updater function so it will
-    // be passed down into the context provider
+    // State 也包含了更新函数，因此它会被传递进 context provider。
     this.state = {
       theme: themes.light,
       toggleTheme: this.toggleTheme,
@@ -25,7 +24,7 @@ class App extends React.Component {
 
   render() {
     // highlight-range{1,3}
-    // The entire state is passed to the provider
+    // 整个 state 都被传递进 provider
     return (
       <ThemeContext.Provider value={this.state}>
         <Content />

examples/context/updating-nested-context-app.js

@@ -1,5 +1,4 @@
-// Make sure the shape of the default value passed to
-// createContext matches the shape that the consumers expect!
+// 确保传递给 createContext 的默认值数据结构是调用的组件（consumers）所能匹配的！
 // highlight-range{2-3}
 export const ThemeContext = React.createContext({
   theme: themes.dark,

examples/context/updating-nested-context-context.js

@@ -2,8 +2,7 @@ import {ThemeContext} from './theme-context';
 
 function ThemeTogglerButton() {
   // highlight-range{1-2,5}
-  // The Theme Toggler Button receives not only the theme
-  // but also a toggleTheme function from the context
+  // Theme Toggler 按钮不仅仅只获取 theme 值，它也从 context 中获取到一个 toggleTheme 函数
   return (
     <ThemeContext.Consumer>
       {({theme, toggleTheme}) => (