From f11140a0a6c6154eac21029606fec292fb3edfa8 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Fri, 5 May 2017 18:06:15 +0100 Subject: [PATCH] Rebuild website --- docs/optimizing-performance.html | 4 ++-- tutorial/tutorial.html | 24 +++++++++++++++++++----- 2 files changed, 21 insertions(+), 7 deletions(-) diff --git a/docs/optimizing-performance.html b/docs/optimizing-performance.html index 2a3f6833f5..f7293f9716 100644 --- a/docs/optimizing-performance.html +++ b/docs/optimizing-performance.html @@ -218,7 +218,7 @@ This section is only relevant if you configure Webpack directly.

In the development mode, you can visualize how components mount, update, and unmount, using the performance tools in supported browsers. For example:

-

React components in Chrome timeline

+

React components in Chrome timeline

To do this in Chrome:

@@ -251,7 +251,7 @@ This section is only relevant if you configure Webpack directly.

Here's a subtree of components. For each one, SCU indicates what shouldComponentUpdate returned, and vDOMEq indicates whether the rendered React elements were equivalent. Finally, the circle's color indicates whether the component had to be reconciled or not.

-
+

Since shouldComponentUpdate returned false for the subtree rooted at C2, React did not attempt to render C2, and thus didn't even have to invoke shouldComponentUpdate on C4 and C5.

diff --git a/tutorial/tutorial.html b/tutorial/tutorial.html index 7470885edd..e9d65c92ad 100644 --- a/tutorial/tutorial.html +++ b/tutorial/tutorial.html @@ -461,6 +461,8 @@ } render() { + const status = 'Next player: X'; + return ( <div> <div className="status">{status}</div> @@ -574,6 +576,7 @@ render() { const status = 'Next player: X'; + return ( <div> <div className="status">{status}</div> @@ -743,7 +746,7 @@ {this.renderSquare(8)} </div> </div> - : ); + ); } } @@ -772,7 +775,9 @@ return null; } -

You can call it in Board's render function to check if anyone has won the game and make the status text show "Winner: [X/O]" when someone wins:

+

You can call it in Board's render function to check if anyone has won the game and make the status text show "Winner: [X/O]" when someone wins.

+ +

Replace the status declaration in Board's render with this code:

  render() {
     const winner = calculateWinner(this.state.squares);
     let status;
@@ -886,8 +891,17 @@
   }
 
   render() {
+    const winner = calculateWinner(this.state.squares);
+    let status;
+    if (winner) {
+      status = 'Winner: ' + winner;
+    } else {
+      status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
+    }
+
     return (
       <div>
+        <div className="status">{status}</div>
         <div className="board-row">
           {this.renderSquare(0)}
           {this.renderSquare(1)}
@@ -940,9 +954,9 @@
 
Since Game is now rendering the status, we can delete <div className="status">{status}</div> and the code calculating the status from the Board's render function:

 
  render() {
     return (
-      <div>
-        <div className="board-row">
-          {this.renderSquare(0)}
+      <div>
+        <div className="board-row">
+          {this.renderSquare(0)}
           {this.renderSquare(1)}
           {this.renderSquare(2)}
         </div>