docs(cn): translate content/blog/2018-03-27-update-on-async-rendering.md

examples/update-on-async-rendering/adding-event-listeners-after.js

@@ -7,14 +7,14 @@ class ExampleComponent extends React.Component {
   // highlight-line
   // highlight-range{1-18}
   componentDidMount() {
-    // Event listeners are only safe to add after mount,
-    // So they won't leak if mount is interrupted or errors.
+    // 事件监听器只有在挂载后添加才是安全的，
+    // 因此，如果挂载中断或错误，它们不会泄漏。
     this.props.dataSource.subscribe(
       this.handleSubscriptionChange
     );
 
-    // External values could change between render and mount,
-    // In some cases it may be important to handle this case.
+    // 外部值可能在渲染和挂载期间改变，
+    // 在某些情况下，处理这种情况很重要。
     if (
       this.state.subscribedValue !==
       this.props.dataSource.value

examples/update-on-async-rendering/adding-event-listeners-before.js

@@ -6,7 +6,7 @@ class ExampleComponent extends React.Component {
       subscribedValue: this.props.dataSource.value,
     });
 
-    // This is not safe; it can leak!
+    // 这是不安全的，它会导致内存泄漏！
     this.props.dataSource.subscribe(
       this.handleSubscriptionChange
     );

examples/update-on-async-rendering/adding-event-listeners-create-subscription.js

@@ -2,7 +2,7 @@ import {createSubscription} from 'create-subscription';
 
 const Subscription = createSubscription({
   getCurrentValue(sourceProp) {
-    // Return the current value of the subscription (sourceProp).
+    // 返回订阅的当前值（sourceProp）。
     return sourceProp.value;
   },
 
@@ -11,19 +11,19 @@ const Subscription = createSubscription({
       callback(sourceProp.value);
     }
 
-    // Subscribe (e.g. add an event listener) to the subscription (sourceProp).
-    // Call callback(newValue) whenever a subscription changes.
+    // 订阅（例如：向订阅（sourceProp）添加事件监听器。
+    // 每当订阅发生变化时，调用回调函数（新值）。
     sourceProp.subscribe(handleSubscriptionChange);
 
-    // Return an unsubscribe method.
+    // 返回取消订阅方法。
     return function unsubscribe() {
       sourceProp.unsubscribe(handleSubscriptionChange);
     };
   },
 });
 
-// Rather than passing the subscribable source to our ExampleComponent,
-// We could just pass the subscribed value directly:
+// 我们可以直接传递订阅的值，
+// 而不是将可订阅的源传递给我们的 ExampleComponent：
 <Subscription source={dataSource}>
   {value => <ExampleComponent subscribedValue={value} />}
 </Subscription>;

examples/update-on-async-rendering/fetching-external-data-after.js

@@ -22,9 +22,9 @@ class ExampleComponent extends React.Component {
 
   render() {
     if (this.state.externalData === null) {
-      // Render loading state ...
+      // 渲染加载状态 ...
     } else {
-      // Render real UI ...
+      // 渲染真实 UI ...
     }
   }
 }

examples/update-on-async-rendering/fetching-external-data-before.js

@@ -22,9 +22,9 @@ class ExampleComponent extends React.Component {
 
   render() {
     if (this.state.externalData === null) {
-      // Render loading state ...
+      // 渲染加载状态 ...
     } else {
-      // Render real UI ...
+      // 渲染真实 UI ...
     }
   }
 }

examples/update-on-async-rendering/react-dom-properties-before-update-after.js

@@ -3,8 +3,8 @@ class ScrollingList extends React.Component {
 
   // highlight-range{1-10}
   getSnapshotBeforeUpdate(prevProps, prevState) {
-    // Are we adding new items to the list?
-    // Capture the scroll position so we can adjust scroll later.
+    // 我们正在向列表中添加新项吗？
+    // 捕获滚动位置，以便我们稍后可以调整滚动位置。
     if (prevProps.list.length < this.props.list.length) {
       return (
         this.listRef.scrollHeight - this.listRef.scrollTop
@@ -15,9 +15,9 @@ class ScrollingList extends React.Component {
 
   // highlight-range{1-8}
   componentDidUpdate(prevProps, prevState, snapshot) {
-    // If we have a snapshot value, we've just added new items.
-    // Adjust scroll so these new items don't push the old ones out of view.
-    // (snapshot here is the value returned from getSnapshotBeforeUpdate)
+    // 如果我们刚刚添加了新项，并且有了快照值。
+    // 调整滚动位置，以便这些新项不会把旧项挤出视图。
+    // （此处的快照是从 getSnapshotBeforeUpdate 返回的值）
     if (snapshot !== null) {
       this.listRef.scrollTop =
         this.listRef.scrollHeight - snapshot;
@@ -27,7 +27,7 @@ class ScrollingList extends React.Component {
   render() {
     return (
       <div ref={this.setListRef}>
-        {/* ...contents... */}
+        {/* ...内容... */}
       </div>
     );
   }

examples/update-on-async-rendering/react-dom-properties-before-update-before.js

@@ -4,8 +4,8 @@ class ScrollingList extends React.Component {
 
   // highlight-range{1-8}
   componentWillUpdate(nextProps, nextState) {
-    // Are we adding new items to the list?
-    // Capture the scroll position so we can adjust scroll later.
+    // 我们正在向列表中添加新项吗？
+    // 捕获滚动位置，以便我们稍后可以调整滚动位置。
     if (this.props.list.length < nextProps.list.length) {
       this.previousScrollOffset =
         this.listRef.scrollHeight - this.listRef.scrollTop;
@@ -14,8 +14,8 @@ class ScrollingList extends React.Component {
 
   // highlight-range{1-10}
   componentDidUpdate(prevProps, prevState) {
-    // If previousScrollOffset is set, we've just added new items.
-    // Adjust scroll so these new items don't push the old ones out of view.
+    // 如果我们刚刚添加了新项，并且设置了 previousScrollOffset。
+    // 调整滚动位置，以便这些新项不会把旧项挤出视图。
     if (this.previousScrollOffset !== null) {
       this.listRef.scrollTop =
         this.listRef.scrollHeight -
@@ -27,7 +27,7 @@ class ScrollingList extends React.Component {
   render() {
     return (
       <div ref={this.setListRef}>
-        {/* ...contents... */}
+        {/* ...内容... */}
       </div>
     );
   }

examples/update-on-async-rendering/updating-external-data-when-props-change-after.js

@@ -6,16 +6,16 @@ class ExampleComponent extends React.Component {
 
   // highlight-range{1-13}
   static getDerivedStateFromProps(props, state) {
-    // Store prevId in state so we can compare when props change.
-    // Clear out previously-loaded data (so we don't render stale stuff).
+    // 保存 prevId 在 state 中，以便我们在 props 变化时进行对比。
+    // 清除之前加载的数据（这样我们就不会渲染旧的内容）。
     if (props.id !== state.prevId) {
       return {
         externalData: null,
         prevId: props.id,
       };
     }
 
-    // No state update necessary
+    // 无需更新 state
     return null;
   }
 
@@ -38,9 +38,9 @@ class ExampleComponent extends React.Component {
 
   render() {
     if (this.state.externalData === null) {
-      // Render loading state ...
+      // 渲染加载状态 ...
     } else {
-      // Render real UI ...
+      // 渲染真实 UI ...
     }
   }
 

examples/update-on-async-rendering/updating-external-data-when-props-change-before.js

@@ -24,9 +24,9 @@ class ExampleComponent extends React.Component {
 
   render() {
     if (this.state.externalData === null) {
-      // Render loading state ...
+      // 渲染加载状态 ...
     } else {
-      // Render real UI ...
+      // 渲染真实 UI ...
     }
   }
 

examples/update-on-async-rendering/updating-state-from-props-after.js

@@ -1,7 +1,7 @@
 // After
 class ExampleComponent extends React.Component {
-  // Initialize state in constructor,
-  // Or with a property initializer.
+  // 在构造函数中初始化 state，
+  // 或者使用属性初始化器。
   // highlight-range{1-4}
   state = {
     isScrollingDown: false,
@@ -17,7 +17,7 @@ class ExampleComponent extends React.Component {
       };
     }
 
-    // Return null to indicate no change to state.
+    // 返回 null 表示无需更新 state。
     return null;
   }
 }

examples/update-on-async-rendering/using-react-lifecycles-compat.js

@@ -5,11 +5,11 @@ import {polyfill} from 'react-lifecycles-compat';
 class ExampleComponent extends React.Component {
   // highlight-next-line
   static getDerivedStateFromProps(props, state) {
-    // Your state update logic here ...
+    // 此处为 state 更新的逻辑 ...
   }
 }
 
-// Polyfill your component to work with older versions of React:
+// polyfill 你的组件，以便兼容旧版本的 React：
 // highlight-next-line
 polyfill(ExampleComponent);