Hướng dẫn codewars javascript beginner - codewars javascript mới bắt đầu

Hướng dẫn này không giả định bất kỳ kiến ​​thức phản ứng hiện có.

Trước khi chúng tôi bắt đầu hướng dẫn

Chúng tôi sẽ xây dựng một trò chơi nhỏ trong hướng dẫn này. Bạn có thể bị cám dỗ bỏ qua nó vì bạn không xây dựng các trò chơi - nhưng cho nó một cơ hội. Các kỹ thuật mà bạn sẽ học trong hướng dẫn là cơ bản để xây dựng bất kỳ ứng dụng phản ứng nào và làm chủ nó sẽ cho bạn hiểu sâu sắc về React.You might be tempted to skip it because you’re not building games — but give it a chance. The techniques you’ll learn in the tutorial are fundamental to building any React app, and mastering it will give you a deep understanding of React.

Mẹo

Hướng dẫn này được thiết kế cho những người thích học bằng cách làm. Nếu bạn thích học các khái niệm từ đầu, hãy xem hướng dẫn từng bước của chúng tôi. Bạn có thể tìm thấy hướng dẫn này và hướng dẫn bổ sung cho nhau.learn by doing. If you prefer learning concepts from the ground up, check out our step-by-step guide. You might find this tutorial and the guide complementary to each other.

Hướng dẫn được chia thành một số phần:

• Thiết lập cho hướng dẫn sẽ cho bạn một điểm khởi đầu để làm theo hướng dẫn.a starting point to follow the tutorial.
• Tổng quan sẽ dạy cho bạn các nguyên tắc cơ bản của React: các thành phần, đạo cụ và trạng thái.the fundamentals of React: components, props, and state.
• Hoàn thành trò chơi sẽ dạy cho bạn các kỹ thuật phổ biến nhất trong phát triển phản ứng.the most common techniques in React development.
• Thêm thời gian du hành sẽ cung cấp cho bạn một cái nhìn sâu sắc hơn về những điểm mạnh độc đáo của React.a deeper insight into the unique strengths of React.

Bạn không cần phải hoàn thành tất cả các phần cùng một lúc để có được giá trị từ hướng dẫn này. Cố gắng đi xa nhất có thể - ngay cả khi nó có một hoặc hai phần.

Chúng ta đang xây dựng gì?

Trong hướng dẫn này, chúng tôi sẽ chỉ ra cách xây dựng một trò chơi Tic-Tac-Toe tương tác với React.

Bạn có thể thấy những gì chúng tôi sẽ xây dựng ở đây: Kết quả cuối cùng. Nếu mã không có ý nghĩa với bạn, hoặc nếu bạn không quen với cú pháp mã, thì đừng lo lắng! Mục tiêu của hướng dẫn này là giúp bạn hiểu phản ứng và cú pháp của nó.Final Result. If the code doesn’t make sense to you, or if you are unfamiliar with the code’s syntax, don’t worry! The goal of this tutorial is to help you understand React and its syntax.

Chúng tôi khuyên bạn nên kiểm tra trò chơi Tic-Tac-Toe trước khi tiếp tục với hướng dẫn. Một trong những tính năng mà bạn nhận thấy là có một danh sách được đánh số ở bên phải của bảng trò chơi. Danh sách này cung cấp cho bạn một lịch sử của tất cả các động tác đã xảy ra trong trò chơi và nó được cập nhật khi trò chơi tiến triển.

Bạn có thể đóng trò chơi tic-tac-toe một khi bạn đã quen thuộc với nó. Chúng tôi sẽ bắt đầu từ một mẫu đơn giản hơn trong hướng dẫn này. Bước tiếp theo của chúng tôi là thiết lập bạn để bạn có thể bắt đầu xây dựng trò chơi.

Điều kiện tiên quyết

Chúng tôi sẽ giả định rằng bạn có một số quen thuộc với HTML và JavaScript, nhưng bạn sẽ có thể theo dõi ngay cả khi bạn đến từ một ngôn ngữ lập trình khác. Chúng tôi cũng cho rằng bạn đã quen thuộc với các khái niệm lập trình như các chức năng, đối tượng, mảng và ở mức độ thấp hơn, các lớp.

Nếu bạn cần xem lại JavaScript, chúng tôi khuyên bạn nên đọc hướng dẫn này. Lưu ý rằng chúng tôi cũng sử dụng một số tính năng từ ES6 - một phiên bản gần đây của JavaScript. Trong hướng dẫn này, chúng tôi sử dụng các chức năng, lớp, các lớp,

return React.createElement('div', {className: 'shopping-list'},
  React.createElement('h2', /* ... h2 children ... */),
  React.createElement('ul', /* ... ul children ... */)
);

4 và

return React.createElement('div', {className: 'shopping-list'},
  React.createElement('h2', /* ... h2 children ... */),
  React.createElement('ul', /* ... ul children ... */)
);

5. Bạn có thể sử dụng BABEL REP để kiểm tra mã ES6 biên dịch.

Thiết lập cho hướng dẫn

Có hai cách để hoàn thành hướng dẫn này: bạn có thể viết mã trong trình duyệt của mình hoặc bạn có thể thiết lập môi trường phát triển cục bộ trên máy tính của mình.

Tùy chọn thiết lập 1: Viết mã trong trình duyệt

Đây là cách nhanh nhất để bắt đầu!

Đầu tiên, hãy mở mã khởi động này trong một tab mới. Tab mới sẽ hiển thị bảng trò chơi Tic-Tac-Toe trống và mã phản ứng. Chúng tôi sẽ chỉnh sửa mã React trong hướng dẫn này.Starter Code in a new tab. The new tab should display an empty tic-tac-toe game board and React code. We will be editing the React code in this tutorial.

Bây giờ bạn có thể bỏ qua tùy chọn thiết lập thứ hai và chuyển đến phần tổng quan để có được cái nhìn tổng quan về React.

Tùy chọn thiết lập 2: Môi trường phát triển địa phương

Đây là hoàn toàn tùy chọn và không bắt buộc cho hướng dẫn này!

Tùy chọn: Hướng dẫn theo dõi cục bộ bằng cách sử dụng trình soạn thảo văn bản ưa thích của bạn

Thiết lập này đòi hỏi nhiều công việc hơn nhưng cho phép bạn hoàn thành hướng dẫn bằng cách sử dụng trình soạn thảo bạn chọn. Dưới đây là các bước để làm theo:

1. Hãy chắc chắn rằng bạn đã cài đặt phiên bản gần đây của Node.js.
2. Thực hiện theo các hướng dẫn cài đặt để tạo ứng dụng React để tạo một dự án mới.

npx create-react-app my-app

1. Xóa tất cả các tệp trong thư mục

   return React.createElement('div', {className: 'shopping-list'},
     React.createElement('h2', /* ... h2 children ... */),
     React.createElement('ul', /* ... ul children ... */)
   );

   6 của dự án mới

Note:

Don Tiết xóa toàn bộ thư mục

return React.createElement('div', {className: 'shopping-list'},
  React.createElement('h2', /* ... h2 children ... */),
  React.createElement('ul', /* ... ul children ... */)
);

7, chỉ các tệp nguồn gốc bên trong nó. Chúng tôi sẽ thay thế các tệp nguồn mặc định bằng các ví dụ cho dự án này trong bước tiếp theo. We’ll replace the default source files with examples for this project in the next step.

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

1. Thêm một tệp có tên

   return React.createElement('div', {className: 'shopping-list'},
     React.createElement('h2', /* ... h2 children ... */),
     React.createElement('ul', /* ... ul children ... */)
   );

   8 vào thư mục

   return React.createElement('div', {className: 'shopping-list'},
     React.createElement('h2', /* ... h2 children ... */),
     React.createElement('ul', /* ... ul children ... */)
   );

   6 với mã CSS này.
2. Thêm một tệp có tên

   class Board extends React.Component {
     renderSquare(i) {
       return <Square value={i} />;  }
   }

   0 vào thư mục

   return React.createElement('div', {className: 'shopping-list'},
     React.createElement('h2', /* ... h2 children ... */),
     React.createElement('ul', /* ... ul children ... */)
   );

   6 với mã JS này.
3. Thêm ba dòng vào đầu

   class Board extends React.Component {
     renderSquare(i) {
       return <Square value={i} />;  }
   }

   0 trong thư mục

   return React.createElement('div', {className: 'shopping-list'},
     React.createElement('h2', /* ... h2 children ... */),
     React.createElement('ul', /* ... ul children ... */)
   );

   6:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

Bây giờ nếu bạn chạy

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;  }
}

4 trong thư mục dự án và mở

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;  }
}

5 trong trình duyệt, bạn sẽ thấy một trường Tic-Tac-Toe trống.

Chúng tôi khuyên bạn nên làm theo các hướng dẫn này để định cấu hình cú pháp làm nổi bật cho trình soạn thảo của bạn.

Giúp tôi, tôi bị mắc kẹt!

Nếu bạn bị mắc kẹt, hãy xem các tài nguyên hỗ trợ cộng đồng. Cụ thể, Chat Reactiflux là một cách tuyệt vời để giúp đỡ nhanh chóng. Nếu bạn không nhận được câu trả lời, hoặc nếu bạn vẫn bị mắc kẹt, xin vui lòng gửi một vấn đề và chúng tôi sẽ giúp bạn.

Tổng quan

Bây giờ bạn đã thiết lập, hãy để Lừa nhận được một cái nhìn tổng quan về React!

React là gì?

React là một thư viện JavaScript khai báo, hiệu quả và linh hoạt để xây dựng giao diện người dùng. Nó cho phép bạn sáng tác các UI phức tạp từ các đoạn mã nhỏ và bị cô lập có tên là Thành phần.

React có một vài loại thành phần khác nhau, nhưng chúng tôi sẽ bắt đầu với các lớp con

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;  }
}

6:

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h2>Shopping List for {this.props.name}h2>
        <ul>
          <li>Instagramli>
          <li>WhatsAppli>
          <li>Oculusli>
        ul>
      div>
    );
  }
}

// Example usage: 

Chúng tôi sẽ sớm nhận được các thẻ giống như XML. Chúng tôi sử dụng các thành phần để nói phản ứng những gì chúng tôi muốn thấy trên màn hình. Khi dữ liệu của chúng tôi thay đổi, React sẽ cập nhật và hiển thị lại một cách hiệu quả các thành phần của chúng tôi.

Ở đây, Danh sách mua sắm là một lớp thành phần React, hoặc loại thành phần React. Một thành phần có trong các tham số, được gọi là

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;  }
}

7 (viết tắt của các thuộc tính trên mạng) và trả về một phân cấp các chế độ xem để hiển thị thông qua phương thức

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;  }
}

8.React component class, or React component type. A component takes in parameters, called

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;  }
}

7 (short for “properties”), and returns a hierarchy of views to display via the

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;  }
}

8 method.

Phương thức

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;  }
}

8 trả về mô tả về những gì bạn muốn thấy trên màn hình. React lấy mô tả và hiển thị kết quả. Cụ thể,

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;  }
}

8 trả về một yếu tố phản ứng, đây là một mô tả nhẹ về những gì để kết xuất. Hầu hết các nhà phát triển React sử dụng một cú pháp đặc biệt có tên là JS JSX, giúp các cấu trúc này dễ viết hơn. Cú pháp

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {this.props.value}      button>
    );
  }
}

1 được chuyển đổi tại thời điểm xây dựng thành

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {this.props.value}      button>
    );
  }
}

2. Ví dụ trên tương đương với:React element, which is a lightweight description of what to render. Most React developers use a special syntax called “JSX” which makes these structures easier to write. The

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {this.props.value}      button>
    );
  }
}

1 syntax is transformed at build time to

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {this.props.value}      button>
    );
  }
}

2. The example above is equivalent to:

return React.createElement('div', {className: 'shopping-list'},
  React.createElement('h2', /* ... h2 children ... */),
  React.createElement('ul', /* ... ul children ... */)
);

Xem phiên bản mở rộng đầy đủ.

Nếu bạn tò mò,

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {this.props.value}      button>
    );
  }
}

3 được mô tả chi tiết hơn trong tài liệu tham khảo API, nhưng chúng tôi đã giành chiến thắng khi sử dụng nó trong hướng dẫn này. Thay vào đó, chúng tôi sẽ tiếp tục sử dụng JSX.

JSX đi kèm với toàn bộ sức mạnh của JavaScript. Bạn có thể đặt bất kỳ biểu thức JavaScript nào trong niềng răng bên trong JSX. Mỗi phần tử React là một đối tượng JavaScript mà bạn có thể lưu trữ trong một biến hoặc vượt qua trong chương trình của mình.

Thành phần

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {this.props.value}      button>
    );
  }
}

4 ở trên chỉ hiển thị các thành phần DOM tích hợp như

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {this.props.value}      button>
    );
  }
}

1 và

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {this.props.value}      button>
    );
  }
}

6. Nhưng bạn cũng có thể sáng tác và hiển thị các thành phần React tùy chỉnh. Ví dụ: bây giờ chúng ta có thể đề cập đến toàn bộ danh sách mua sắm bằng cách viết

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {this.props.value}      button>
    );
  }
}

7. Mỗi thành phần React được đóng gói và có thể hoạt động độc lập; Điều này cho phép bạn xây dựng UI phức tạp từ các thành phần đơn giản.

Kiểm tra mã khởi động

Nếu bạn sẽ làm việc trên hướng dẫn trong trình duyệt của mình, hãy mở mã này trong một tab mới: mã khởi động. Nếu bạn sẽ làm việc trên hướng dẫn cục bộ, thay vào đó hãy mở

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {this.props.value}      button>
    );
  }
}

8 trong thư mục dự án của mình (bạn đã chạm vào tệp này trong quá trình thiết lập).in your browser, open this code in a new tab: Starter Code. If you’re going to work on the tutorial locally, instead open

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {this.props.value}      button>
    );
  }
}

8 in your project folder (you have already touched this file during the setup).

Mã khởi đầu này là cơ sở của những gì chúng tôi xây dựng. Chúng tôi đã cung cấp kiểu dáng CSS để bạn chỉ cần tập trung vào việc học phản ứng và lập trình trò chơi tic-tac-toe.

Bằng cách kiểm tra mã, bạn sẽ nhận thấy rằng chúng tôi có ba thành phần phản ứng:

• Quảng trường
• Tấm ván
• Trò chơi

Thành phần vuông hiển thị một

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {this.props.value}      button>
    );
  }
}

9 và bảng làm cho 9 hình vuông. Thành phần trò chơi hiển thị một bảng với các giá trị giữ chỗ mà chúng tôi sẽ sửa đổi sau này. Hiện tại không có thành phần tương tác.

Truyền dữ liệu qua đạo cụ

Để có được chân ướt, hãy để thử một số dữ liệu từ thành phần bảng của chúng tôi sang thành phần vuông của chúng tôi.

Chúng tôi thực sự khuyên bạn nên gõ mã bằng tay khi bạn làm việc thông qua hướng dẫn và không sử dụng sao chép/dán. Điều này sẽ giúp bạn phát triển trí nhớ cơ bắp và sự hiểu biết mạnh mẽ hơn.

Trong phương thức bảng

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={function() { console.log('click'); }}>        {this.props.value}
      button>
    );
  }
}

0, thay đổi mã để chuyển một prop có tên

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={function() { console.log('click'); }}>        {this.props.value}
      button>
    );
  }
}

1 sang hình vuông:

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;  }
}

Thay đổi phương thức vuông ____ ____58 để hiển thị giá trị đó bằng cách thay thế

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={function() { console.log('click'); }}>        {this.props.value}
      button>
    );
  }
}

3 bằng

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={function() { console.log('click'); }}>        {this.props.value}
      button>
    );
  }
}

4:

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {this.props.value}      button>
    );
  }
}

Before:

Sau: Bạn sẽ thấy một số trong mỗi hình vuông trong đầu ra được hiển thị.

Xem toàn bộ mã tại thời điểm này

Xin chúc mừng! Bạn chỉ cần chuyển một chỗ dựa từ một thành phần bảng cha cho một thành phần hình vuông con. Vượt qua đạo cụ là cách thông tin chảy trong các ứng dụng phản ứng, từ cha mẹ đến trẻ em.

Tạo thành phần tương tác

Hãy để Fill Fill thành phần vuông với một X X khi chúng tôi nhấp vào nó. Trước tiên, hãy thay đổi thẻ nút được trả về từ chức năng thành phần hình vuông ____ ____75 thành điều này:

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={function() { console.log('click'); }}>        {this.props.value}
      button>
    );
  }
}

Nếu bạn nhấp vào một hình vuông ngay bây giờ, bạn sẽ thấy ‘nhấp vào bảng điều khiển của trình duyệt của bạn.

Ghi chú

Để lưu gõ và tránh hành vi khó hiểu của

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={function() { console.log('click'); }}>        {this.props.value}
      button>
    );
  }
}

6, chúng tôi sẽ sử dụng cú pháp chức năng mũi tên cho trình xử lý sự kiện ở đây và bên dưới:

class Square extends React.Component {
 render() {
   return (
     <button className="square" onClick={() => console.log('click')}>       {this.props.value}
     button>
   );
 }
}

Lưu ý cách với

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={function() { console.log('click'); }}>        {this.props.value}
      button>
    );
  }
}

7, chúng tôi đã chuyển một chức năng như

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={function() { console.log('click'); }}>        {this.props.value}
      button>
    );
  }
}

8 prop. React sẽ chỉ gọi chức năng này sau khi nhấp chuột. Quên

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={function() { console.log('click'); }}>        {this.props.value}
      button>
    );
  }
}

9 và viết

class Square extends React.Component {
 render() {
   return (
     <button className="square" onClick={() => console.log('click')}>       {this.props.value}
     button>
   );
 }
}

0 là một sai lầm phổ biến và sẽ bắn mỗi khi các thành phần tái tạo lại.

Như một bước tiếp theo, chúng tôi muốn thành phần hình vuông để nhớ rằng nó đã được nhấp và điền vào nó bằng một dấu X X. Để nhớ những thứ của người Viking, các thành phần sử dụng trạng thái.state.

Các thành phần phản ứng có thể có trạng thái bằng cách đặt

class Square extends React.Component {
 render() {
   return (
     <button className="square" onClick={() => console.log('click')}>       {this.props.value}
     button>
   );
 }
}

1 trong các hàm tạo của chúng.

class Square extends React.Component {
 render() {
   return (
     <button className="square" onClick={() => console.log('click')}>       {this.props.value}
     button>
   );
 }
}

1 nên được coi là riêng tư đối với một thành phần phản ứng mà nó được xác định. Hãy để lưu trữ giá trị hiện tại của hình vuông trong

class Square extends React.Component {
 render() {
   return (
     <button className="square" onClick={() => console.log('click')}>       {this.props.value}
     button>
   );
 }
}

1 và thay đổi nó khi nhấp vào hình vuông.

Đầu tiên, chúng tôi sẽ thêm một hàm tạo vào lớp để khởi tạo trạng thái:

class Square extends React.Component {
  constructor(props) {    super(props);    this.state = {      value: null,    };  }
  render() {
    return (
      <button className="square" onClick={() => console.log('click')}>
        {this.props.value}
      button>
    );
  }
}

Ghi chú

Trong các lớp JavaScript, bạn cần luôn gọi

class Square extends React.Component {
 render() {
   return (
     <button className="square" onClick={() => console.log('click')}>       {this.props.value}
     button>
   );
 }
}

4 khi xác định hàm tạo của một lớp con. Tất cả các lớp thành phần React có

class Square extends React.Component {
 render() {
   return (
     <button className="square" onClick={() => console.log('click')}>       {this.props.value}
     button>
   );
 }
}

5 nên bắt đầu với cuộc gọi

class Square extends React.Component {
 render() {
   return (
     <button className="square" onClick={() => console.log('click')}>       {this.props.value}
     button>
   );
 }
}

6.

Bây giờ, chúng tôi sẽ thay đổi phương thức Square Square

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;  }
}

8 để hiển thị giá trị trạng thái hiện tại khi nhấp vào:

• Thay thế

  class Square extends React.Component {
   render() {
     return (
       <button className="square" onClick={() => console.log('click')}>       {this.props.value}
       button>
     );
   }
  }

  8 bằng

  class Square extends React.Component {
   render() {
     return (
       <button className="square" onClick={() => console.log('click')}>       {this.props.value}
       button>
     );
   }
  }

  9 bên trong thẻ

  class Square extends React.Component {
    render() {
      return (
        <button className="square">
          {this.props.value}      button>
      );
    }
  }

  9.
• Thay thế trình xử lý sự kiện

  class Square extends React.Component {
    constructor(props) {    super(props);    this.state = {      value: null,    };  }
    render() {
      return (
        <button className="square" onClick={() => console.log('click')}>
          {this.props.value}
        button>
      );
    }
  }

  1 bằng

  class Square extends React.Component {
    constructor(props) {    super(props);    this.state = {      value: null,    };  }
    render() {
      return (
        <button className="square" onClick={() => console.log('click')}>
          {this.props.value}
        button>
      );
    }
  }

  2.
• Đặt các đạo cụ

  class Square extends React.Component {
    constructor(props) {    super(props);    this.state = {      value: null,    };  }
    render() {
      return (
        <button className="square" onClick={() => console.log('click')}>
          {this.props.value}
        button>
      );
    }
  }

  3 và

  class Square extends React.Component {
    render() {
      return (
        <button className="square" onClick={function() { console.log('click'); }}>        {this.props.value}
        button>
      );
    }
  }

  8 trên các dòng riêng biệt để dễ đọc hơn.

Sau những thay đổi này, thẻ

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {this.props.value}      button>
    );
  }
}

9 được trả về bởi phương thức Square ____ ____58 trông như thế này:

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

0

Bằng cách gọi

class Square extends React.Component {
  constructor(props) {    super(props);    this.state = {      value: null,    };  }
  render() {
    return (
      <button className="square" onClick={() => console.log('click')}>
        {this.props.value}
      button>
    );
  }
}

7 từ một trình xử lý

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={function() { console.log('click'); }}>        {this.props.value}
      button>
    );
  }
}

8 trong phương thức hình vuông ____ ____58, chúng tôi nói phản ứng lại để hiển thị lại hình vuông bất cứ khi nào

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {this.props.value}      button>
    );
  }
}

9 được nhấp. Sau khi cập nhật, hình vuông ____ ____89 sẽ là

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

02, vì vậy chúng tôi sẽ thấy

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

03 trên bảng trò chơi. Nếu bạn nhấp vào bất kỳ hình vuông nào,

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

03 sẽ hiển thị.

Khi bạn gọi

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

05 trong một thành phần, hãy tự động cập nhật các thành phần con bên trong nó.

Xem toàn bộ mã tại thời điểm này

Những công cụ phát triển

Tiện ích mở rộng React Devtools cho Chrome và Firefox cho phép bạn kiểm tra cây thành phần React với các công cụ phát triển trình duyệt của bạn.

Các devtools React cho phép bạn kiểm tra các đạo cụ và trạng thái của các thành phần phản ứng của bạn.

Sau khi cài đặt React DevTools, bạn có thể nhấp chuột phải vào bất kỳ yếu tố nào trên trang, nhấp vào kiểm tra, để mở các công cụ phát triển và các tab React (thành phần bên phải. Sử dụng các thành phần của các thành phần để kiểm tra cây thành phần.

Tuy nhiên, lưu ý có một vài bước bổ sung để khiến nó hoạt động với CodePen:

1. Đăng nhập hoặc đăng ký và xác nhận email của bạn (cần thiết để ngăn chặn thư rác).
2. Nhấp vào nút Fork Fork.
3. Nhấp vào Change Change Chế độ xem và sau đó chọn Chế độ gỡ lỗi.
4. Trong tab mới mở ra, các devtools bây giờ sẽ có một tab React.

Hoàn thành trò chơi

Bây giờ chúng tôi có các khối xây dựng cơ bản cho trò chơi tic-tac-toe của chúng tôi. Để có một trò chơi hoàn chỉnh, bây giờ chúng ta cần thay thế việc đặt X X. S và O O trên bảng, và chúng ta cần một cách để xác định người chiến thắng.

Nâng trạng thái lên

Hiện tại, mỗi thành phần vuông duy trì trạng thái trò chơi. Để kiểm tra người chiến thắng, chúng tôi sẽ duy trì giá trị của từng trong số 9 ô vuông ở một địa điểm.

Chúng tôi có thể nghĩ rằng hội đồng quản trị chỉ nên hỏi từng hình vuông cho trạng thái hình vuông. Mặc dù cách tiếp cận này là có thể trong React, chúng tôi không khuyến khích nó vì mã trở nên khó hiểu, dễ bị lỗi và khó tái cấu trúc. Thay vào đó, cách tiếp cận tốt nhất là lưu trữ trạng thái trò chơi trong thành phần bảng mẹ thay vì ở mỗi hình vuông. Thành phần bảng có thể cho mỗi hình vuông những gì cần hiển thị bằng cách chuyển một chỗ dựa, giống như chúng tôi đã làm khi chúng tôi chuyển một số cho mỗi hình vuông.

Để thu thập dữ liệu từ nhiều trẻ em hoặc để có hai thành phần con giao tiếp với nhau, bạn cần phải khai báo trạng thái được chia sẻ trong thành phần cha mẹ của chúng thay thế. Thành phần cha mẹ có thể truyền lại trạng thái cho trẻ em bằng cách sử dụng đạo cụ; Điều này giữ cho các thành phần trẻ em đồng bộ với nhau và với thành phần cha mẹ.

Nâng trạng thái thành một thành phần cha mẹ là phổ biến khi các thành phần React được tái cấu trúc - hãy để Lôi nắm lấy cơ hội này để thử nó.

Thêm một hàm tạo vào bảng và đặt trạng thái ban đầu của bảng để chứa một mảng 9 null tương ứng với 9 hình vuông:

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

1

Khi chúng tôi điền vào bảng sau, mảng

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

06 sẽ trông giống như thế này:

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

2

Phương pháp bảng ____ ____ ____70 hiện trông như thế này:

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

3

Ban đầu, chúng tôi đã vượt qua

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={function() { console.log('click'); }}>        {this.props.value}
      button>
    );
  }
}

1 prop xuống từ bảng để hiển thị số từ 0 đến 8 ở mỗi hình vuông. Trong một bước trước khác, chúng tôi đã thay thế các số bằng một dấu X X được xác định bởi trạng thái riêng của Square. Đây là lý do tại sao Square hiện đang bỏ qua prop

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={function() { console.log('click'); }}>        {this.props.value}
      button>
    );
  }
}

1 được chuyển cho nó bởi hội đồng quản trị.

Bây giờ chúng tôi sẽ sử dụng cơ chế vượt qua prop một lần nữa. Chúng tôi sẽ sửa đổi bảng để hướng dẫn từng hình vuông riêng lẻ về giá trị hiện tại của nó (

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

02,

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

11 hoặc

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

12). Chúng tôi đã xác định mảng

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

13 trong hàm tạo bảng và chúng tôi sẽ sửa đổi phương thức bảng ____ ____ ____70 để đọc từ nó:

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

4

Xem toàn bộ mã tại thời điểm này

Những công cụ phát triển

Tiện ích mở rộng React Devtools cho Chrome và Firefox cho phép bạn kiểm tra cây thành phần React với các công cụ phát triển trình duyệt của bạn.

Thay vào đó, chúng tôi sẽ chuyển một chức năng từ bảng đến quảng trường và chúng tôi sẽ có gọi là chức năng đó khi nhấp vào hình vuông. Chúng tôi sẽ thay đổi phương thức

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={function() { console.log('click'); }}>        {this.props.value}
      button>
    );
  }
}

0 trong bảng thành:

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

5

Ghi chú

Chúng tôi chia phần tử được trả về thành nhiều dòng để đọc và thêm dấu ngoặc đơn để JavaScript không chèn một dấu chấm phẩy sau

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

20 và phá vỡ mã của chúng tôi.

Bây giờ, chúng tôi đã chuyển hai đạo cụ từ bảng đến vuông:

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={function() { console.log('click'); }}>        {this.props.value}
      button>
    );
  }
}

1 và

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={function() { console.log('click'); }}>        {this.props.value}
      button>
    );
  }
}

8. Prop

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={function() { console.log('click'); }}>        {this.props.value}
      button>
    );
  }
}

8 là một hàm mà Square có thể gọi khi nhấp. Chúng tôi sẽ thực hiện các thay đổi sau đây thành hình vuông:

• Thay thế

  class Square extends React.Component {
   render() {
     return (
       <button className="square" onClick={() => console.log('click')}>       {this.props.value}
       button>
     );
   }
  }

  9 bằng

  class Square extends React.Component {
   render() {
     return (
       <button className="square" onClick={() => console.log('click')}>       {this.props.value}
       button>
     );
   }
  }

  8 trong phương pháp Square

  class Board extends React.Component {
    renderSquare(i) {
      return <Square value={i} />;  }
  }

  8
• Thay thế

  cd my-app
  cd src
  
  # If you're using a Mac or Linux:
  rm -f *
  
  # Or, if you're on Windows:
  del *
  
  # Then, switch back to the project folder
  cd ..

  27 bằng

  cd my-app
  cd src
  
  # If you're using a Mac or Linux:
  rm -f *
  
  # Or, if you're on Windows:
  del *
  
  # Then, switch back to the project folder
  cd ..

  28 trong phương pháp Square

  class Board extends React.Component {
    renderSquare(i) {
      return <Square value={i} />;  }
  }

  8
• Xóa

  class Square extends React.Component {
   render() {
     return (
       <button className="square" onClick={() => console.log('click')}>       {this.props.value}
       button>
     );
   }
  }

  5 khỏi hình vuông vì hình vuông không còn theo dõi trạng thái trò chơi

Sau những thay đổi này, thành phần vuông trông như thế này:

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

6

Khi một hình vuông được nhấp, hàm

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={function() { console.log('click'); }}>        {this.props.value}
      button>
    );
  }
}

8 do bảng cung cấp được gọi. Ở đây, một đánh giá về cách đạt được điều này:

1. class Square extends React.Component {
     render() {
       return (
         <button className="square" onClick={function() { console.log('click'); }}>        {this.props.value}
         button>
       );
     }
   }

   8 Prop trên thành phần DOM

   class Square extends React.Component {
     render() {
       return (
         <button className="square">
           {this.props.value}      button>
       );
     }
   }

   9 tích hợp cho React thiết lập trình nghe sự kiện nhấp chuột.
2. Khi nút được nhấp, React sẽ gọi trình xử lý sự kiện

   class Square extends React.Component {
     render() {
       return (
         <button className="square" onClick={function() { console.log('click'); }}>        {this.props.value}
         button>
       );
     }
   }

   8 được xác định trong phương thức Square tựa

   class Square extends React.Component {
     render() {
       return (
         <button className="square" onClick={function() { console.log('click'); }}>        {this.props.value}
         button>
       );
     }
   }

   5.
3. Người xử lý sự kiện này gọi

   cd my-app
   cd src
   
   # If you're using a Mac or Linux:
   rm -f *
   
   # Or, if you're on Windows:
   del *
   
   # Then, switch back to the project folder
   cd ..

   28. Square từ

   class Square extends React.Component {
     render() {
       return (
         <button className="square" onClick={function() { console.log('click'); }}>        {this.props.value}
         button>
       );
     }
   }

   8 prop được chỉ định bởi hội đồng quản trị.
4. Kể từ khi hội đồng quản trị chuyển

   cd my-app
   cd src
   
   # If you're using a Mac or Linux:
   rm -f *
   
   # Or, if you're on Windows:
   del *
   
   # Then, switch back to the project folder
   cd ..

   38 đến Square, Square gọi bảng điều khiển

   cd my-app
   cd src
   
   # If you're using a Mac or Linux:
   rm -f *
   
   # Or, if you're on Windows:
   del *
   
   # Then, switch back to the project folder
   cd ..

   39 khi được nhấp.
5. Chúng tôi chưa xác định phương thức

   cd my-app
   cd src
   
   # If you're using a Mac or Linux:
   rm -f *
   
   # Or, if you're on Windows:
   del *
   
   # Then, switch back to the project folder
   cd ..

   40, vì vậy mã của chúng tôi bị sập. Nếu bạn nhấp vào một hình vuông ngay bây giờ, bạn sẽ thấy một màn hình lỗi màu đỏ nói một cái gì đó giống như là This This.HandleClick không phải là một chức năng.

Ghi chú

Thuộc tính phần tử DOM

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {this.props.value}      button>
    );
  }
}

9 ____ ____ ____78 có ý nghĩa đặc biệt để phản ứng vì nó là một thành phần tích hợp. Đối với các thành phần tùy chỉnh như Square, việc đặt tên là tùy thuộc vào bạn. Chúng tôi có thể đưa ra bất kỳ tên nào cho phương pháp prop hoặc board ____ ____ ____144 của Square, và mã sẽ hoạt động giống nhau. Trong React, thông thường của nó để sử dụng tên

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

45 cho các đạo cụ đại diện cho các sự kiện và

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

46 cho các phương pháp xử lý các sự kiện.

Khi chúng tôi cố gắng nhấp vào một hình vuông, chúng tôi sẽ gặp lỗi vì chúng tôi đã xác định

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

44. Bây giờ chúng tôi sẽ thêm

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

44 vào lớp bảng:

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

7

Xem toàn bộ mã tại thời điểm này

Sau những thay đổi này, chúng tôi lại có thể nhấp vào hình vuông để lấp đầy chúng, giống như chúng tôi đã có trước đây. Tuy nhiên, bây giờ trạng thái được lưu trữ trong thành phần bảng thay vì các thành phần vuông riêng lẻ. Khi trạng thái bảng thay đổi, các thành phần vuông tự động xuất lại. Giữ trạng thái của tất cả các ô vuông trong thành phần bảng sẽ cho phép nó xác định người chiến thắng trong tương lai.

Vì các thành phần vuông không còn duy trì trạng thái, các thành phần vuông nhận được các giá trị từ thành phần bảng và thông báo cho thành phần bảng khi chúng nhấp chuột. Theo thuật ngữ React, các thành phần vuông hiện là các thành phần được kiểm soát. Hội đồng quản trị có toàn quyền kiểm soát chúng.controlled components. The Board has full control over them.

Lưu ý làm thế nào trong

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

44, chúng tôi gọi

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

50 để tạo một bản sao của mảng

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

13 để sửa đổi thay vì sửa đổi mảng hiện có. Chúng tôi sẽ giải thích lý do tại sao chúng tôi tạo một bản sao của mảng

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

13 trong phần tiếp theo.

Tại sao tính bất biến lại quan trọng

Trong ví dụ mã trước, chúng tôi đã đề xuất rằng bạn tạo một bản sao của mảng

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

13 bằng phương thức

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

54 thay vì sửa đổi mảng hiện có. Bây giờ chúng tôi sẽ thảo luận về tính bất biến và tại sao tính bất biến là quan trọng để học.

Nhìn chung có hai cách tiếp cận để thay đổi dữ liệu. Cách tiếp cận đầu tiên là làm thay đổi dữ liệu bằng cách thay đổi trực tiếp các giá trị dữ liệu. Cách tiếp cận thứ hai là thay thế dữ liệu bằng một bản sao mới có những thay đổi mong muốn.

Thay đổi dữ liệu với đột biến

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

8

Thay đổi dữ liệu mà không cần đột biến

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

9

Kết quả cuối cùng là như nhau nhưng bằng cách không đột biến (hoặc thay đổi dữ liệu cơ bản) trực tiếp, chúng tôi có được một số lợi ích được mô tả dưới đây.

Các tính năng phức tạp trở nên đơn giản

Bất biến làm cho các tính năng phức tạp dễ thực hiện hơn nhiều. Sau đó, trong hướng dẫn này, chúng tôi sẽ thực hiện tính năng du hành thời gian của người Viking cho phép chúng tôi xem lại lịch sử trò chơi Tic-Tac-Toe và Lịch sử nhảy trở lại với các động tác trước đó. Chức năng này không dành riêng cho các trò chơi - khả năng hoàn tác và làm lại một số hành động nhất định là một yêu cầu phổ biến trong các ứng dụng. Tránh đột biến dữ liệu trực tiếp cho phép chúng tôi giữ nguyên các phiên bản trước của lịch sử trò chơi và sử dụng lại chúng sau.

Phát hiện các thay đổi

Phát hiện các thay đổi trong các đối tượng có thể thay đổi là khó khăn vì chúng được sửa đổi trực tiếp. Phát hiện này yêu cầu đối tượng có thể thay đổi được so sánh với các bản sao trước đó của chính nó và toàn bộ cây đối tượng phải đi qua.

Phát hiện những thay đổi trong các đối tượng bất biến dễ dàng hơn đáng kể. Nếu đối tượng bất biến đang được tham chiếu là khác với ảnh trước, thì đối tượng đã thay đổi.

Xác định khi nào nên kết xuất lại trong React

Lợi ích chính của tính bất biến là nó giúp bạn xây dựng các thành phần thuần túy trong React. Dữ liệu bất biến có thể dễ dàng xác định xem các thay đổi đã được thực hiện, giúp xác định khi nào một thành phần yêu cầu kết xuất lại.

Bạn có thể tìm hiểu thêm về

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

55 và cách bạn có thể xây dựng các thành phần thuần túy bằng cách đọc hiệu suất tối ưu hóa.

Các thành phần chức năng

Bây giờ chúng tôi sẽ thay đổi hình vuông thành một thành phần chức năng.function component.

Trong React, các thành phần chức năng là một cách đơn giản hơn để viết các thành phần chỉ chứa phương thức

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;  }
}

8 và don lồng có trạng thái riêng của chúng. Thay vì xác định một lớp mở rộng

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;  }
}

6, chúng ta có thể viết một hàm lấy

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;  }
}

7 làm đầu vào và trả về những gì nên được hiển thị. Các thành phần chức năng ít tẻ nhạt hơn để viết hơn các lớp và nhiều thành phần có thể được thể hiện theo cách này.function components are a simpler way to write components that only contain a

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;  }
}

8 method and don’t have their own state. Instead of defining a class which extends

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;  }
}

6, we can write a function that takes

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;  }
}

7 as input and returns what should be rendered. Function components are less tedious to write than classes, and many components can be expressed this way.

Thay thế lớp vuông bằng chức năng này:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

0

Chúng tôi đã thay đổi

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

59 thành

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;  }
}

7 cả hai lần nó xuất hiện.

Xem toàn bộ mã tại thời điểm này

Ghi chú

Khi chúng tôi sửa đổi hình vuông thành một thành phần chức năng, chúng tôi cũng đã thay đổi

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

61 thành

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

62 ngắn hơn (lưu ý việc thiếu dấu ngoặc đơn ở cả hai bên).

Thay phiên nhau

Bây giờ chúng ta cần phải sửa chữa một khiếm khuyết rõ ràng trong trò chơi tic-tac-toe của chúng ta: không thể đánh dấu trên bảng.

Theo mặc định, chúng tôi sẽ đặt bước đầu tiên là X X. Chúng tôi có thể đặt mặc định này bằng cách sửa đổi trạng thái ban đầu trong Trình xây dựng bảng của chúng tôi:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

1

Mỗi lần người chơi di chuyển,

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

63 (boolean) sẽ được lật để xác định người chơi nào tiếp theo và trạng thái trò chơi sẽ được lưu. Chúng tôi sẽ cập nhật chức năng bảng ____ ____144 để lật giá trị của

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

63:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

2

Với sự thay đổi này, có thể thay phiên nhau. Thử nó!

Hãy để chúng tôi thay đổi văn bản trạng thái trên mạng trong bảng điều khiển ____ ____58 để hiển thị người chơi nào có lượt tiếp theo:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

3

Sau khi áp dụng các thay đổi này, bạn nên có thành phần bảng này:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

4

Xem toàn bộ mã tại thời điểm này

Ghi chú

Khi chúng tôi sửa đổi hình vuông thành một thành phần chức năng, chúng tôi cũng đã thay đổi

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

61 thành

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

62 ngắn hơn (lưu ý việc thiếu dấu ngoặc đơn ở cả hai bên).

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

5

Thay phiên nhau

Bây giờ chúng ta cần phải sửa chữa một khiếm khuyết rõ ràng trong trò chơi tic-tac-toe của chúng ta: không thể đánh dấu trên bảng.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

6

Theo mặc định, chúng tôi sẽ đặt bước đầu tiên là X X. Chúng tôi có thể đặt mặc định này bằng cách sửa đổi trạng thái ban đầu trong Trình xây dựng bảng của chúng tôi:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

7

Xem toàn bộ mã tại thời điểm này

Ghi chú

Khi chúng tôi sửa đổi hình vuông thành một thành phần chức năng, chúng tôi cũng đã thay đổi cd my-app cd src # If you're using a Mac or Linux: rm -f * # Or, if you're on Windows: del * # Then, switch back to the project folder cd ..61 thành cd my-app cd src # If you're using a Mac or Linux: rm -f * # Or, if you're on Windows: del * # Then, switch back to the project folder cd ..62 ngắn hơn (lưu ý việc thiếu dấu ngoặc đơn ở cả hai bên).

Thay phiên nhau

Bây giờ chúng ta cần phải sửa chữa một khiếm khuyết rõ ràng trong trò chơi tic-tac-toe của chúng ta: không thể đánh dấu trên bảng.

Theo mặc định, chúng tôi sẽ đặt bước đầu tiên là X X. Chúng tôi có thể đặt mặc định này bằng cách sửa đổi trạng thái ban đầu trong Trình xây dựng bảng của chúng tôi:

Mỗi lần người chơi di chuyển,

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

63 (boolean) sẽ được lật để xác định người chơi nào tiếp theo và trạng thái trò chơi sẽ được lưu. Chúng tôi sẽ cập nhật chức năng bảng ____ ____144 để lật giá trị của

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

63:

Với sự thay đổi này, có thể thay phiên nhau. Thử nó!

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

8

Hãy để chúng tôi thay đổi văn bản trạng thái trên mạng trong bảng điều khiển ____ ____58 để hiển thị người chơi nào có lượt tiếp theo:

Sau khi áp dụng các thay đổi này, bạn nên có thành phần bảng này:

Tuyên bố một người chiến thắng

Bây giờ chúng tôi cho thấy người chơi nào đến lượt tiếp theo, chúng tôi cũng nên hiển thị khi trò chơi giành chiến thắng và không còn lượt nào để thực hiện. Sao chép chức năng trợ giúp này và dán nó ở cuối tệp:

Với một mảng gồm 9 hình vuông, chức năng này sẽ kiểm tra người chiến thắng và trả lại

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

02,

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

11 hoặc

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

12 nếu thích hợp.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

9

Tiếp theo, chúng tôi sẽ có thành phần bảng nhận được các đạo cụ

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

13 và

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={function() { console.log('click'); }}>        {this.props.value}
      button>
    );
  }
}

8 từ thành phần trò chơi. Vì bây giờ chúng tôi có một trình xử lý nhấp chuột duy nhất trong bảng cho nhiều ô vuông, chúng tôi sẽ cần chuyển vị trí của mỗi hình vuông vào trình xử lý

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={function() { console.log('click'); }}>        {this.props.value}
      button>
    );
  }
}

8 để cho biết hình vuông nào được nhấp. Dưới đây là các bước cần thiết để chuyển đổi thành phần bảng:

• Xóa

  class Square extends React.Component {
   render() {
     return (
       <button className="square" onClick={() => console.log('click')}>       {this.props.value}
       button>
     );
   }
  }

  5 trong bảng.
• Thay thế

  cd my-app
  cd src
  
  # If you're using a Mac or Linux:
  rm -f *
  
  # Or, if you're on Windows:
  del *
  
  # Then, switch back to the project folder
  cd ..

  92 bằng

  cd my-app
  cd src
  
  # If you're using a Mac or Linux:
  rm -f *
  
  # Or, if you're on Windows:
  del *
  
  # Then, switch back to the project folder
  cd ..

  93 trong bảng điều khiển

  class Square extends React.Component {
    render() {
      return (
        <button className="square" onClick={function() { console.log('click'); }}>        {this.props.value}
        button>
      );
    }
  }

  0.
• Thay thế

  cd my-app
  cd src
  
  # If you're using a Mac or Linux:
  rm -f *
  
  # Or, if you're on Windows:
  del *
  
  # Then, switch back to the project folder
  cd ..

  95 bằng

  cd my-app
  cd src
  
  # If you're using a Mac or Linux:
  rm -f *
  
  # Or, if you're on Windows:
  del *
  
  # Then, switch back to the project folder
  cd ..

  96 trong bảng điều khiển

  class Square extends React.Component {
    render() {
      return (
        <button className="square" onClick={function() { console.log('click'); }}>        {this.props.value}
        button>
      );
    }
  }

  0.

Thành phần bảng bây giờ trông như thế này:

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h2>Shopping List for {this.props.name}h2>
        <ul>
          <li>Instagramli>
          <li>WhatsAppli>
          <li>Oculusli>
        ul>
      div>
    );
  }
}

// Example usage: 

0

Chúng tôi sẽ cập nhật chức năng thành phần trò chơi ____ ____58 để sử dụng mục nhập lịch sử gần đây nhất để xác định và hiển thị trạng thái trò chơi:

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h2>Shopping List for {this.props.name}h2>
        <ul>
          <li>Instagramli>
          <li>WhatsAppli>
          <li>Oculusli>
        ul>
      div>
    );
  }
}

// Example usage: 

1

Vì thành phần trò chơi hiện đang hiển thị trạng thái trò chơi, chúng tôi có thể xóa mã tương ứng khỏi phương thức bảng ____ ____58. Sau khi tái cấu trúc, chức năng bảng

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;  }
}

8 trông như thế này:

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h2>Shopping List for {this.props.name}h2>
        <ul>
          <li>Instagramli>
          <li>WhatsAppli>
          <li>Oculusli>
        ul>
      div>
    );
  }
}

// Example usage: 

2

Cuối cùng, chúng ta cần chuyển phương thức

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

44 từ thành phần bảng sang thành phần trò chơi. Chúng tôi cũng cần sửa đổi

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

44 vì trạng thái thành phần trò chơi được cấu trúc khác nhau. Trong phương thức trò chơi ____ ____144, chúng tôi kết hợp các mục lịch sử mới vào

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

80.

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h2>Shopping List for {this.props.name}h2>
        <ul>
          <li>Instagramli>
          <li>WhatsAppli>
          <li>Oculusli>
        ul>
      div>
    );
  }
}

// Example usage: 

3

Ghi chú

Không giống như phương thức mảng

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

05 mà bạn có thể quen thuộc hơn, phương thức

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

06 không làm biến đổi mảng gốc, vì vậy chúng tôi thích nó.

Tại thời điểm này, thành phần bảng chỉ cần các phương thức

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={function() { console.log('click'); }}>        {this.props.value}
      button>
    );
  }
}

0 và

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;  }
}

8. Trò chơi trạng thái của trò chơi và phương pháp

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

44 nên nằm trong thành phần trò chơi.

Xem toàn bộ mã tại thời điểm này

Hiển thị các động tác trong quá khứ

Vì chúng tôi đang ghi lại lịch sử trò chơi tic-tac-toe, giờ đây chúng tôi có thể hiển thị nó cho người chơi dưới dạng danh sách các bước di chuyển trong quá khứ.

Chúng tôi đã học được trước đó rằng các yếu tố phản ứng là các đối tượng JavaScript hạng nhất; Chúng tôi có thể vượt qua chúng trong các ứng dụng của chúng tôi. Để hiển thị nhiều mục trong React, chúng ta có thể sử dụng một loạt các yếu tố phản ứng.

Trong JavaScript, các mảng có phương thức

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

10 thường được sử dụng để ánh xạ dữ liệu đến dữ liệu khác, ví dụ:

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h2>Shopping List for {this.props.name}h2>
        <ul>
          <li>Instagramli>
          <li>WhatsAppli>
          <li>Oculusli>
        ul>
      div>
    );
  }
}

// Example usage: 

4

Sử dụng phương pháp

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

11, chúng ta có thể ánh xạ lịch sử di chuyển của chúng ta để phản ứng các phần tử biểu thị các nút trên màn hình và hiển thị danh sách các nút để nhảy nhảy theo các bước đi trong quá khứ.

Hãy cùng với ____ ____211 trên

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

80 trong trò chơi Phương pháp ____ ____58:

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h2>Shopping List for {this.props.name}h2>
        <ul>
          <li>Instagramli>
          <li>WhatsAppli>
          <li>Oculusli>
        ul>
      div>
    );
  }
}

// Example usage: 

5

Xem toàn bộ mã tại thời điểm này

Hiển thị các động tác trong quá khứ

Vì chúng tôi đang ghi lại lịch sử trò chơi tic-tac-toe, giờ đây chúng tôi có thể hiển thị nó cho người chơi dưới dạng danh sách các bước di chuyển trong quá khứ.

Chúng tôi đã học được trước đó rằng các yếu tố phản ứng là các đối tượng JavaScript hạng nhất; Chúng tôi có thể vượt qua chúng trong các ứng dụng của chúng tôi. Để hiển thị nhiều mục trong React, chúng ta có thể sử dụng một loạt các yếu tố phản ứng.

Trong JavaScript, các mảng có phương thức

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

10 thường được sử dụng để ánh xạ dữ liệu đến dữ liệu khác, ví dụ:

Sử dụng phương pháp import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css';11, chúng ta có thể ánh xạ lịch sử di chuyển của chúng ta để phản ứng các phần tử biểu thị các nút trên màn hình và hiển thị danh sách các nút để nhảy nhảy theo các bước đi trong quá khứ.

Hãy cùng với ____ ____211 trên

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

80 trong trò chơi Phương pháp ____ ____58:

Khi chúng tôi lặp lại thông qua mảng

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

80, biến

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

16 đề cập đến giá trị phần tử

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

80 hiện tại và

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

18 đề cập đến chỉ số phần tử

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

80 hiện tại. Chúng tôi chỉ quan tâm đến

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

18 ở đây, do đó

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

16 không được chỉ định cho bất cứ điều gì.

Đối với mỗi lần di chuyển trong lịch sử trò chơi tic-tac-toe, chúng tôi tạo một mục danh sách

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

22 chứa nút

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {this.props.value}      button>
    );
  }
}

9. Nút có trình xử lý

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={function() { console.log('click'); }}>        {this.props.value}
      button>
    );
  }
}

8 gọi một phương thức gọi là

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

25. Chúng tôi đã thực hiện phương pháp

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

26. Hiện tại, chúng ta sẽ thấy một danh sách các động thái đã xảy ra trong trò chơi và cảnh báo trong bảng điều khiển công cụ phát triển cho biết:

CẢNH BÁO: Mỗi đứa trẻ trong một mảng hoặc iterator nên có một chế độ chống đỡ khóa duy nhất. Kiểm tra phương pháp kết xuất của trò chơi trên mạng.

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h2>Shopping List for {this.props.name}h2>
        <ul>
          <li>Instagramli>
          <li>WhatsAppli>
          <li>Oculusli>
        ul>
      div>
    );
  }
}

// Example usage: 

7

Hãy để thảo luận về những gì cảnh báo trên có nghĩa là.

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h2>Shopping List for {this.props.name}h2>
        <ul>
          <li>Instagramli>
          <li>WhatsAppli>
          <li>Oculusli>
        ul>
      div>
    );
  }
}

// Example usage: 

8

Chọn một chìa khóa

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

30 là một tài sản đặc biệt và dành riêng trong React (cùng với

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

31, một tính năng nâng cao hơn). Khi một phần tử được tạo, React trích xuất thuộc tính

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

30 và lưu trữ khóa trực tiếp trên phần tử được trả về. Mặc dù

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

30 có thể trông giống như nó thuộc về

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;  }
}

7,

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

30 không thể được tham chiếu bằng

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

36. React tự động sử dụng

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

30 để quyết định cập nhật thành phần nào. Một thành phần không thể hỏi về

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

30 của nó.

Nó rất khuyến khích bạn chỉ định các khóa thích hợp bất cứ khi nào bạn xây dựng danh sách động. Nếu bạn không có khóa thích hợp, bạn có thể muốn xem xét tái cấu trúc dữ liệu của mình để bạn thực hiện. If you don’t have an appropriate key, you may want to consider restructuring your data so that you do.

Nếu không có khóa được chỉ định, React sẽ trình bày cảnh báo và sử dụng chỉ mục mảng làm khóa theo mặc định. Sử dụng chỉ mục mảng làm khóa là vấn đề khi cố gắng đặt lại một danh sách các mục hoặc chèn/xóa các mục trong danh sách. Rõ ràng vượt qua

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

39 làm im lặng cảnh báo nhưng có các vấn đề tương tự như các chỉ số mảng và không được khuyến nghị trong hầu hết các trường hợp.

Chìa khóa không cần phải là duy nhất trên toàn cầu; Họ chỉ cần là duy nhất giữa các thành phần và anh chị em của họ.

Thực hiện du hành thời gian

Trong lịch sử trò chơi tic-tac-toe, mỗi lần di chuyển trong quá khứ có một ID duy nhất được liên kết với nó: nó là số lượng tuần tự của động thái. Các động tác không bao giờ được đặt hàng lại, xóa hoặc chèn ở giữa, vì vậy, nó an toàn khi sử dụng chỉ số di chuyển làm khóa.

Trong phương thức thành phần trò chơi ____ ____58, chúng ta có thể thêm khóa là

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

41 và React Cảnh báo về các khóa sẽ biến mất:

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h2>Shopping List for {this.props.name}h2>
        <ul>
          <li>Instagramli>
          <li>WhatsAppli>
          <li>Oculusli>
        ul>
      div>
    );
  }
}

// Example usage: 

9

Xem toàn bộ mã tại thời điểm này

Nhấp vào bất kỳ nút nào trong danh sách các nút của mục. Trước khi chúng tôi triển khai

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

42, chúng tôi sẽ thêm

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

44 vào trạng thái thành phần trò chơi để cho biết bước nào chúng tôi hiện đang xem.

Đầu tiên, thêm

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

45 vào trạng thái ban đầu trong trò chơi

class Square extends React.Component {
 render() {
   return (
     <button className="square" onClick={() => console.log('click')}>       {this.props.value}
     button>
   );
 }
}

5:

return React.createElement('div', {className: 'shopping-list'},
  React.createElement('h2', /* ... h2 children ... */),
  React.createElement('ul', /* ... ul children ... */)
);

0

Tiếp theo, chúng tôi sẽ xác định phương thức

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

42 trong trò chơi để cập nhật

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

44 đó. Chúng tôi cũng đặt

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

63 thành true nếu số mà chúng tôi thay đổi

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

44 thành thậm chí:

return React.createElement('div', {className: 'shopping-list'},
  React.createElement('h2', /* ... h2 children ... */),
  React.createElement('ul', /* ... ul children ... */)
);

1

Lưu ý trong phương pháp

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

42, chúng tôi đã cập nhật tài sản

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

80 của tiểu bang. Đó là bởi vì các bản cập nhật trạng thái được hợp nhất hoặc trong các từ đơn giản hơn, React sẽ chỉ cập nhật các thuộc tính được đề cập trong phương thức

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

05 để lại trạng thái còn lại. Để biết thêm thông tin, hãy xem tài liệu.see the documentation.

Bây giờ chúng tôi sẽ thực hiện một vài thay đổi đối với phương thức trò chơi ____ ____144 bắn khi bạn nhấp vào một hình vuông.

Trạng thái

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

44 mà chúng tôi đã thêm phản ánh động thái được hiển thị cho người dùng ngay bây giờ. Sau khi chúng tôi thực hiện một động thái mới, chúng tôi cần cập nhật

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

44 bằng cách thêm

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

57 như một phần của đối số

class Square extends React.Component {
  constructor(props) {    super(props);    this.state = {      value: null,    };  }
  render() {
    return (
      <button className="square" onClick={() => console.log('click')}>
        {this.props.value}
      button>
    );
  }
}

7. Điều này đảm bảo chúng tôi không thể bị mắc kẹt cho thấy cùng một động thái sau khi một động thái mới được thực hiện.

Chúng tôi cũng sẽ thay thế đọc

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

59 bằng

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

60. Điều này đảm bảo rằng nếu chúng ta quay ngược thời gian và sau đó thực hiện một bước đi mới từ thời điểm đó, chúng ta sẽ vứt bỏ tất cả lịch sử tương lai của người Hồi giáo mà bây giờ sẽ không chính xác.

return React.createElement('div', {className: 'shopping-list'},
  React.createElement('h2', /* ... h2 children ... */),
  React.createElement('ul', /* ... ul children ... */)
);

2

Cuối cùng, chúng tôi sẽ sửa đổi phương thức thành phần trò chơi

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;  }
}

8 từ luôn luôn đưa ra bước di chuyển cuối cùng để đưa ra động thái hiện được chọn theo

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

44:

return React.createElement('div', {className: 'shopping-list'},
  React.createElement('h2', /* ... h2 children ... */),
  React.createElement('ul', /* ... ul children ... */)
);

3

Nếu chúng tôi nhấp vào bất kỳ bước nào trong lịch sử trò chơi, bảng Tic-Tac-Toe sẽ ngay lập tức cập nhật để hiển thị bảng trông như thế nào sau khi bước đó xảy ra.

Xem toàn bộ mã tại thời điểm này

Nhấp vào bất kỳ nút nào trong danh sách các nút của mục. Trước khi chúng tôi triển khai import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css';42, chúng tôi sẽ thêm import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css';44 vào trạng thái thành phần trò chơi để cho biết bước nào chúng tôi hiện đang xem.

Đầu tiên, thêm

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

45 vào trạng thái ban đầu trong trò chơi

class Square extends React.Component {
 render() {
   return (
     <button className="square" onClick={() => console.log('click')}>       {this.props.value}
     button>
   );
 }
}

5:

• Tiếp theo, chúng tôi sẽ xác định phương thức

  import React from 'react';
  import ReactDOM from 'react-dom/client';
  import './index.css';

  42 trong trò chơi để cập nhật

  import React from 'react';
  import ReactDOM from 'react-dom/client';
  import './index.css';

  44 đó. Chúng tôi cũng đặt

  cd my-app
  cd src
  
  # If you're using a Mac or Linux:
  rm -f *
  
  # Or, if you're on Windows:
  del *
  
  # Then, switch back to the project folder
  cd ..

  63 thành true nếu số mà chúng tôi thay đổi

  import React from 'react';
  import ReactDOM from 'react-dom/client';
  import './index.css';

  44 thành thậm chí:
• Lưu ý trong phương pháp

  import React from 'react';
  import ReactDOM from 'react-dom/client';
  import './index.css';

  42, chúng tôi đã cập nhật tài sản

  cd my-app
  cd src
  
  # If you're using a Mac or Linux:
  rm -f *
  
  # Or, if you're on Windows:
  del *
  
  # Then, switch back to the project folder
  cd ..

  80 của tiểu bang. Đó là bởi vì các bản cập nhật trạng thái được hợp nhất hoặc trong các từ đơn giản hơn, React sẽ chỉ cập nhật các thuộc tính được đề cập trong phương thức

  cd my-app
  cd src
  
  # If you're using a Mac or Linux:
  rm -f *
  
  # Or, if you're on Windows:
  del *
  
  # Then, switch back to the project folder
  cd ..

  05 để lại trạng thái còn lại. Để biết thêm thông tin, hãy xem tài liệu.
• Bây giờ chúng tôi sẽ thực hiện một vài thay đổi đối với phương thức trò chơi ____ ____144 bắn khi bạn nhấp vào một hình vuông.
• Trạng thái

  import React from 'react';
  import ReactDOM from 'react-dom/client';
  import './index.css';

  44 mà chúng tôi đã thêm phản ánh động thái được hiển thị cho người dùng ngay bây giờ. Sau khi chúng tôi thực hiện một động thái mới, chúng tôi cần cập nhật

  import React from 'react';
  import ReactDOM from 'react-dom/client';
  import './index.css';

  44 bằng cách thêm

  import React from 'react';
  import ReactDOM from 'react-dom/client';
  import './index.css';

  57 như một phần của đối số

  class Square extends React.Component {
    constructor(props) {    super(props);    this.state = {      value: null,    };  }
    render() {
      return (
        <button className="square" onClick={() => console.log('click')}>
          {this.props.value}
        button>
      );
    }
  }

  7. Điều này đảm bảo chúng tôi không thể bị mắc kẹt cho thấy cùng một động thái sau khi một động thái mới được thực hiện.

Chúng tôi cũng sẽ thay thế đọc

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

59 bằng

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

60. Điều này đảm bảo rằng nếu chúng ta quay ngược thời gian và sau đó thực hiện một bước đi mới từ thời điểm đó, chúng ta sẽ vứt bỏ tất cả lịch sử tương lai của người Hồi giáo mà bây giờ sẽ không chính xác.

Cuối cùng, chúng tôi sẽ sửa đổi phương thức thành phần trò chơi

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;  }
}

8 từ luôn luôn đưa ra bước di chuyển cuối cùng để đưa ra động thái hiện được chọn theo

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

44:Final Result.

return React.createElement('div', {className: 'shopping-list'},
  React.createElement('h2', /* ... h2 children ... */),
  React.createElement('ul', /* ... ul children ... */)
);

3

1. Nếu chúng tôi nhấp vào bất kỳ bước nào trong lịch sử trò chơi, bảng Tic-Tac-Toe sẽ ngay lập tức cập nhật để hiển thị bảng trông như thế nào sau khi bước đó xảy ra.
2. Gói lên
3. Xin chúc mừng! Bạn đã tạo ra một trò chơi tic-tac-toe mà:
4. Cho phép bạn chơi tic-tac-toe,
5. Cho biết khi nào người chơi đã thắng trò chơi,
6. Lưu trữ một trò chơi lịch sử khi một trò chơi tiến triển,

Cho phép người chơi xem lại lịch sử trò chơi và xem các phiên bản trước của bảng trò chơi.