Tôi đã tổng hợp một bảng hướng dẫn trực quan toàn diện để giúp bạn nắm vững tất cả các khái niệm và tính năng chính của thư viện React vào năm 2021

Tôi đã tạo cheatsheet này để giúp bạn tối ưu hóa việc học React của mình trong khoảng thời gian ngắn nhất

Nó bao gồm rất nhiều ví dụ thực tế để minh họa mọi tính năng của thư viện và cách nó hoạt động bằng cách sử dụng các mẫu mà bạn có thể áp dụng trong các dự án của riêng mình

Cùng với mỗi đoạn mã, tôi đã thêm nhiều nhận xét hữu ích. Nếu bạn đọc những nhận xét này, bạn sẽ thấy mỗi dòng mã làm gì, các khái niệm khác nhau liên quan với nhau như thế nào và hiểu đầy đủ hơn về cách sử dụng React

Lưu ý rằng các từ khóa đặc biệt hữu ích để bạn biết với tư cách là nhà phát triển React được đánh dấu bằng chữ in đậm, vì vậy hãy chú ý đến những từ khóa đó.

Muốn có bản sao Cheatsheet của riêng bạn?

Tải xuống cheatsheet ở định dạng PDF tại đây (mất 5 giây)

Dưới đây là một số chiến thắng nhanh chóng từ việc lấy phiên bản có thể tải xuống

• ✓ Hướng dẫn tham khảo nhanh để xem xét tuy nhiên và bất cứ khi nào
• ✓ Rất nhiều đoạn mã có thể sao chép để sử dụng lại dễ dàng
• ✓ Đọc hướng dẫn khổng lồ này bất cứ nơi nào phù hợp với bạn nhất. Trên tàu, tại bàn của bạn, đứng xếp hàng. bất cứ nơi nào

Có rất nhiều thứ tuyệt vời để đề cập, vì vậy hãy bắt đầu

Bạn muốn chạy bất kỳ đoạn mã nào dưới đây? . Bạn có thể làm như vậy ngay lập tức bằng cách truy cập phản ứng. Mới

Mục lục

phản ứng cơ bản

Móc phản ứng thiết yếu

Móc và hiệu suất

Móc phản ứng nâng cao

phản ứng cơ bản

Phần tử JSX

Các ứng dụng React được cấu trúc bằng cú pháp gọi là JSX. Đây là cú pháp của một phần tử JSX cơ bản

/* 
  JSX allows us to write in a syntax almost identical to plain HTML.
  As a result, JSX is a powerful tool to structure our applications.
  JSX uses all valid HTML tags (i.e. div/span, h1-h6, form/input, img, etc).
*/

Hello React!

/* 
  Note: this JSX would not be visible because it needs to be rendered by our application using ReactDOM.render() 
*/

JSX là cách phổ biến nhất để cấu trúc các ứng dụng React, nhưng nó không bắt buộc đối với React

/* JSX is a simpler way to use the function React.createElement()
In other words, the following two lines in React are the same: */

Hello React!
  // JSX syntax

React.createElement('div', null, 'Hello React!'); // createElement syntax

JSX không được trình duyệt hiểu. Nó cần được biên dịch thành JavaScript đơn giản mà trình duyệt có thể hiểu được

Trình biên dịch được sử dụng phổ biến nhất cho JSX được gọi là Babel

/* 
  When our project is built to run in the browser, our JSX will be converted by Babel into simple React.createElement() function calls. 
  From this.. 
*/
const greeting = 
Hello React!
;

/* ...into this: */
"use strict";

const greeting = /*#__PURE__*/React.createElement("div", null, "Hello React!");

JSX khác với HTML ở một số điểm quan trọng

/* 
  We can write JSX like plain HTML, but it's actually made using JavaScript functions.
  Because JSX is JavaScript, not HTML, there are some differences:

  1) Some JSX attributes are named differently than HTML attributes. Why? Because some attribute words are reserved words in JavaScript, such as 'class'. Instead of class, JSX uses 'className'.

  Also, because JSX is JavaScript, attributes that consist of multiple words are written in camelcase:
*/


  
Hello React!


/* 
  2) JSX elements that consist of only a single tag (i.e. input, img, br elements) must be closed with a trailing forward slash to be valid (/): 
*/

 //  is a syntax error

/* 
  3) JSX elements that consist of an opening and closing tag (i.e. div, span, button element), must have both or be closed with a trailing forward slash. Like 2), it is a syntax error to have an unterminated element. 
*/

Click me //  or  is a syntax error
 // empty, but also valid

Các kiểu nội tuyến có thể được thêm vào các phần tử JSX bằng thuộc tính kiểu. Và các kiểu được cập nhật trong một đối tượng, không phải là một tập hợp các dấu ngoặc kép, như với HTML

Lưu ý rằng tên thuộc tính kiểu cũng phải được viết bằng chữ cái

/* 
  Properties that accept pixel values (like width, height, padding, margin, etc), can use integers instead of strings.
  For example: fontSize: 22. Instead of: fontSize: "22px"
*/

  Hello React!

Các phần tử JSX là các biểu thức JavaScript và có thể được sử dụng như vậy. JSX cung cấp cho chúng tôi toàn bộ sức mạnh của JavaScript trực tiếp trong giao diện người dùng của chúng tôi

/* 
  JSX elements are expressions (resolve to a value) and therefore can be assigned to plain JavaScript variables.. 
*/
const greeting = 
Hello React!
;

const isNewToReact = true;

// .. or can be displayed conditionally
function sayGreeting() {
  if (isNewToReact) {
    // .. or returned from functions, etc.
    return greeting; // displays: Hello React!
  } else {
    return 
Hi again, React
;
  }
}

JSX cho phép chúng ta chèn (hoặc nhúng) các biểu thức JavaScript đơn giản bằng cách sử dụng cú pháp dấu ngoặc nhọn

const year = 2021;

/* We can insert primitive JS values (i.e. strings, numbers, booleans) in curly braces: {} */
const greeting = 
Hello React in {year}
;

/* We can also insert expressions that resolve to a primitive value: */
const goodbye = 
Goodbye previous year: {year - 1}

/* Expressions can also be used for element attributes */
const className = 'title';
const title = 
My title

/* Note: trying to insert object values (i.e. objects, arrays, maps) in curly braces will result in an error */

JSX cho phép chúng ta lồng các phần tử vào nhau, giống như HTML

/* 
  To write JSX on multiple lines, wrap in parentheses: ()
  JSX expressions that span multiple lines are called multiline expressions
*/

const greeting = (
  // div is the parent element
  

    {/* h1 and p are child elements */}
    
Hello!
    
Welcome to React
  
);
/* 'parents' and 'children' are how we describe JSX elements in relation
to one another, like we would talk about HTML elements */

Nhận xét trong JSX được viết dưới dạng nhận xét JavaScript nhiều dòng, được viết giữa các dấu ngoặc nhọn, như thế này

________số 8_______

Tất cả các ứng dụng React yêu cầu ba điều

1. /* 
     Properties that accept pixel values (like width, height, padding, margin, etc), can use integers instead of strings.
     For example: fontSize: 22. Instead of: fontSize: "22px"
   */
   
     Hello React!
   

   5. được sử dụng để kết xuất (hiển thị) ứng dụng của chúng tôi bằng cách gắn nó vào một phần tử HTML
2. Một phần tử JSX. được gọi là "nút gốc", vì nó là gốc của ứng dụng của chúng tôi. Có nghĩa là, kết xuất nó sẽ kết xuất tất cả các phần tử con bên trong nó
3. Một phần tử HTML (DOM). Nơi ứng dụng được chèn vào trong trang HTML. Phần tử thường là một div có id là "root", nằm trong chỉ mục. tệp html

// Packages can be installed locally or brought in through a CDN link (added to head of HTML document) 
import React from "react";
import ReactDOM from "react-dom";

// root node (usually a component) is most often called "App"
const App = 
Hello React!
;

// ReactDOM.render(root node, HTML element)
ReactDOM.render(App, document.getElementById("root"));

Thành phần và Đạo cụ

JSX có thể được nhóm lại với nhau trong các chức năng riêng lẻ được gọi là các thành phần

Có hai loại thành phần trong React. thành phần hàm và thành phần lớp

Tên thành phần, đối với thành phần hàm hoặc lớp, được viết hoa để phân biệt chúng với các hàm JavaScript đơn giản không trả về JSX

/* JSX is a simpler way to use the function React.createElement()
In other words, the following two lines in React are the same: */

Hello React!
  // JSX syntax

React.createElement('div', null, 'Hello React!'); // createElement syntax

0

Các thành phần, mặc dù là các hàm, nhưng không được gọi như các hàm JavaScript thông thường. Chúng được thực thi bằng cách hiển thị chúng giống như cách chúng ta làm với JSX trong ứng dụng của mình

/* JSX is a simpler way to use the function React.createElement()
In other words, the following two lines in React are the same: */

Hello React!
  // JSX syntax

React.createElement('div', null, 'Hello React!'); // createElement syntax

1

Lợi ích to lớn của các thành phần là khả năng tái sử dụng chúng trên các ứng dụng của chúng tôi, bất cứ nơi nào chúng tôi cần chúng

Vì các thành phần tận dụng sức mạnh của các hàm JavaScript, nên chúng ta có thể truyền dữ liệu cho chúng một cách hợp lý, giống như chúng ta sẽ làm bằng cách truyền cho nó một hoặc nhiều đối số

/* JSX is a simpler way to use the function React.createElement()
In other words, the following two lines in React are the same: */

Hello React!
  // JSX syntax

React.createElement('div', null, 'Hello React!'); // createElement syntax

2

Dữ liệu được chuyển đến các thành phần trong JavaScript được gọi là đạo cụ. Các đạo cụ trông giống hệt với các thuộc tính trên các phần tử JSX/HTML đơn giản, nhưng bạn có thể truy cập các giá trị của chúng trong chính thành phần đó

Đạo cụ có sẵn trong các tham số của thành phần mà chúng được chuyển đến. Đạo cụ luôn được bao gồm dưới dạng thuộc tính của một đối tượng

/* JSX is a simpler way to use the function React.createElement()
In other words, the following two lines in React are the same: */

Hello React!
  // JSX syntax

React.createElement('div', null, 'Hello React!'); // createElement syntax

3

Đạo cụ không bao giờ được thay đổi trực tiếp trong thành phần con

Một cách khác để nói điều này là props không bao giờ được thay đổi, vì props là một đối tượng JavaScript đơn giản

/* JSX is a simpler way to use the function React.createElement()
In other words, the following two lines in React are the same: */

Hello React!
  // JSX syntax

React.createElement('div', null, 'Hello React!'); // createElement syntax

4

Children prop rất hữu ích nếu chúng ta muốn truyền các phần tử/thành phần làm props cho các thành phần khác

/* JSX is a simpler way to use the function React.createElement()
In other words, the following two lines in React are the same: */

Hello React!
  // JSX syntax

React.createElement('div', null, 'Hello React!'); // createElement syntax

5

Một lần nữa, vì các thành phần là các biểu thức JavaScript, chúng ta có thể sử dụng chúng kết hợp với các câu lệnh if-else và chuyển các câu lệnh để hiển thị nội dung theo điều kiện, như thế này

/* JSX is a simpler way to use the function React.createElement()
In other words, the following two lines in React are the same: */

Hello React!
  // JSX syntax

React.createElement('div', null, 'Hello React!'); // createElement syntax

6

Để sử dụng các điều kiện trong JSX được trả về của một thành phần, bạn có thể sử dụng toán tử bậc ba hoặc đoản mạch (&& và. nhà khai thác)

/* JSX is a simpler way to use the function React.createElement()
In other words, the following two lines in React are the same: */

Hello React!
  // JSX syntax

React.createElement('div', null, 'Hello React!'); // createElement syntax

7

Các đoạn là các thành phần đặc biệt để hiển thị nhiều thành phần mà không cần thêm phần tử phụ vào DOM. Chúng lý tưởng cho logic có điều kiện có nhiều thành phần hoặc phần tử liền kề

/* JSX is a simpler way to use the function React.createElement()
In other words, the following two lines in React are the same: */

Hello React!
  // JSX syntax

React.createElement('div', null, 'Hello React!'); // createElement syntax

8

Danh sách và phím

Sử dụng. map() để chuyển đổi danh sách dữ liệu (mảng) thành danh sách các phần tử

/* JSX is a simpler way to use the function React.createElement()
In other words, the following two lines in React are the same: */

Hello React!
  // JSX syntax

React.createElement('div', null, 'Hello React!'); // createElement syntax

9

/* 
  Properties that accept pixel values (like width, height, padding, margin, etc), can use integers instead of strings.
  For example: fontSize: 22. Instead of: fontSize: "22px"
*/

  Hello React!

6 có thể được sử dụng cho các thành phần cũng như các phần tử JSX đơn giản

/* 
  When our project is built to run in the browser, our JSX will be converted by Babel into simple React.createElement() function calls. 
  From this.. 
*/
const greeting = 
Hello React!
;

/* ...into this: */
"use strict";

const greeting = /*#__PURE__*/React.createElement("div", null, "Hello React!");

0

Mỗi phần tử React trong danh sách các phần tử cần một chỗ dựa khóa đặc biệt. Các phím rất cần thiết để React có thể theo dõi từng phần tử đang được lặp lại với hàm

/* 
  Properties that accept pixel values (like width, height, padding, margin, etc), can use integers instead of strings.
  For example: fontSize: 22. Instead of: fontSize: "22px"
*/

  Hello React!

6

React sử dụng các phím để cập nhật các phần tử riêng lẻ một cách hiệu quả khi dữ liệu của chúng thay đổi (thay vì hiển thị lại toàn bộ danh sách)

Các khóa cần phải có các giá trị duy nhất để có thể xác định từng khóa theo giá trị khóa của chúng

/* 
  When our project is built to run in the browser, our JSX will be converted by Babel into simple React.createElement() function calls. 
  From this.. 
*/
const greeting = 
Hello React!
;

/* ...into this: */
"use strict";

const greeting = /*#__PURE__*/React.createElement("div", null, "Hello React!");

1

Trình lắng nghe sự kiện và xử lý sự kiện

Lắng nghe các sự kiện trên các phần tử JSX so với các phần tử HTML khác nhau theo một số cách quan trọng

Đầu tiên, bạn không thể lắng nghe các sự kiện trên các thành phần React – chỉ trên các thành phần JSX. Ví dụ: thêm một prop có tên là

/* 
  Properties that accept pixel values (like width, height, padding, margin, etc), can use integers instead of strings.
  For example: fontSize: 22. Instead of: fontSize: "22px"
*/

  Hello React!

8 vào một thành phần React sẽ chỉ là một thuộc tính khác được thêm vào đối tượng props

/* 
  When our project is built to run in the browser, our JSX will be converted by Babel into simple React.createElement() function calls. 
  From this.. 
*/
const greeting = 
Hello React!
;

/* ...into this: */
"use strict";

const greeting = /*#__PURE__*/React.createElement("div", null, "Hello React!");

2

Các sự kiện React thiết yếu nhất cần biết là

/* 
  Properties that accept pixel values (like width, height, padding, margin, etc), can use integers instead of strings.
  For example: fontSize: 22. Instead of: fontSize: "22px"
*/

  Hello React!

8,

/* 
  JSX elements are expressions (resolve to a value) and therefore can be assigned to plain JavaScript variables.. 
*/
const greeting = 
Hello React!
;

const isNewToReact = true;

// .. or can be displayed conditionally
function sayGreeting() {
  if (isNewToReact) {
    // .. or returned from functions, etc.
    return greeting; // displays: Hello React!
  } else {
    return 
Hi again, React
;
  }
}

0 và

/* 
  JSX elements are expressions (resolve to a value) and therefore can be assigned to plain JavaScript variables.. 
*/
const greeting = 
Hello React!
;

const isNewToReact = true;

// .. or can be displayed conditionally
function sayGreeting() {
  if (isNewToReact) {
    // .. or returned from functions, etc.
    return greeting; // displays: Hello React!
  } else {
    return 
Hi again, React
;
  }
}

1

• /* 
    Properties that accept pixel values (like width, height, padding, margin, etc), can use integers instead of strings.
    For example: fontSize: 22. Instead of: fontSize: "22px"
  */
  
    Hello React!
  

  8 xử lý các sự kiện nhấp chuột trên các phần tử JSX (cụ thể là trên các nút)

• /* 
    JSX elements are expressions (resolve to a value) and therefore can be assigned to plain JavaScript variables.. 
  */
  const greeting = 
  Hello React!
  ;
  
  const isNewToReact = true;
  
  // .. or can be displayed conditionally
  function sayGreeting() {
    if (isNewToReact) {
      // .. or returned from functions, etc.
      return greeting; // displays: Hello React!
    } else {
      return 
  Hi again, React
  ;
    }
  }

  0 xử lý các sự kiện bàn phím (cụ thể là người dùng nhập vào đầu vào hoặc vùng văn bản)

• /* 
    JSX elements are expressions (resolve to a value) and therefore can be assigned to plain JavaScript variables.. 
  */
  const greeting = 
  Hello React!
  ;
  
  const isNewToReact = true;
  
  // .. or can be displayed conditionally
  function sayGreeting() {
    if (isNewToReact) {
      // .. or returned from functions, etc.
      return greeting; // displays: Hello React!
    } else {
      return 
  Hi again, React
  ;
    }
  }

  1 xử lý các lần gửi biểu mẫu từ người dùng

/* 
  When our project is built to run in the browser, our JSX will be converted by Babel into simple React.createElement() function calls. 
  From this.. 
*/
const greeting = 
Hello React!
;

/* ...into this: */
"use strict";

const greeting = /*#__PURE__*/React.createElement("div", null, "Hello React!");

3

Móc phản ứng thiết yếu

Trạng thái và trạng thái sử dụng

Móc

/* 
  JSX elements are expressions (resolve to a value) and therefore can be assigned to plain JavaScript variables.. 
*/
const greeting = 
Hello React!
;

const isNewToReact = true;

// .. or can be displayed conditionally
function sayGreeting() {
  if (isNewToReact) {
    // .. or returned from functions, etc.
    return greeting; // displays: Hello React!
  } else {
    return 
Hi again, React
;
  }
}

5 cung cấp cho chúng ta trạng thái trong một thành phần chức năng. Trạng thái cho phép chúng tôi truy cập và cập nhật các giá trị nhất định trong các thành phần của chúng tôi theo thời gian

Trạng thái thành phần cục bộ được quản lý bởi React hook

/* 
  JSX elements are expressions (resolve to a value) and therefore can be assigned to plain JavaScript variables.. 
*/
const greeting = 
Hello React!
;

const isNewToReact = true;

// .. or can be displayed conditionally
function sayGreeting() {
  if (isNewToReact) {
    // .. or returned from functions, etc.
    return greeting; // displays: Hello React!
  } else {
    return 
Hi again, React
;
  }
}

5 cung cấp cho chúng ta cả biến trạng thái và chức năng cho phép chúng ta cập nhật nó

Khi chúng ta gọi

/* 
  JSX elements are expressions (resolve to a value) and therefore can be assigned to plain JavaScript variables.. 
*/
const greeting = 
Hello React!
;

const isNewToReact = true;

// .. or can be displayed conditionally
function sayGreeting() {
  if (isNewToReact) {
    // .. or returned from functions, etc.
    return greeting; // displays: Hello React!
  } else {
    return 
Hi again, React
;
  }
}

5, chúng ta có thể cung cấp cho trạng thái của mình một giá trị mặc định bằng cách cung cấp nó làm đối số đầu tiên khi chúng ta gọi

/* 
  JSX elements are expressions (resolve to a value) and therefore can be assigned to plain JavaScript variables.. 
*/
const greeting = 
Hello React!
;

const isNewToReact = true;

// .. or can be displayed conditionally
function sayGreeting() {
  if (isNewToReact) {
    // .. or returned from functions, etc.
    return greeting; // displays: Hello React!
  } else {
    return 
Hi again, React
;
  }
}

5

/* 
  When our project is built to run in the browser, our JSX will be converted by Babel into simple React.createElement() function calls. 
  From this.. 
*/
const greeting = 
Hello React!
;

/* ...into this: */
"use strict";

const greeting = /*#__PURE__*/React.createElement("div", null, "Hello React!");

4

Ghi chú. Bất kỳ hook nào trong phần này đều từ thư viện lõi React và có thể được nhập riêng lẻ

/* 
  When our project is built to run in the browser, our JSX will be converted by Babel into simple React.createElement() function calls. 
  From this.. 
*/
const greeting = 
Hello React!
;

/* ...into this: */
"use strict";

const greeting = /*#__PURE__*/React.createElement("div", null, "Hello React!");

5

/* 
  JSX elements are expressions (resolve to a value) and therefore can be assigned to plain JavaScript variables.. 
*/
const greeting = 
Hello React!
;

const isNewToReact = true;

// .. or can be displayed conditionally
function sayGreeting() {
  if (isNewToReact) {
    // .. or returned from functions, etc.
    return greeting; // displays: Hello React!
  } else {
    return 
Hi again, React
;
  }
}

5 cũng cung cấp cho chúng tôi chức năng 'setter' để cập nhật trạng thái sau khi nó được tạo

/* 
  When our project is built to run in the browser, our JSX will be converted by Babel into simple React.createElement() function calls. 
  From this.. 
*/
const greeting = 
Hello React!
;

/* ...into this: */
"use strict";

const greeting = /*#__PURE__*/React.createElement("div", null, "Hello React!");

6

/* 
  JSX elements are expressions (resolve to a value) and therefore can be assigned to plain JavaScript variables.. 
*/
const greeting = 
Hello React!
;

const isNewToReact = true;

// .. or can be displayed conditionally
function sayGreeting() {
  if (isNewToReact) {
    // .. or returned from functions, etc.
    return greeting; // displays: Hello React!
  } else {
    return 
Hi again, React
;
  }
}

5 có thể được sử dụng một lần hoặc nhiều lần trong một thành phần. Và nó có thể chấp nhận các giá trị nguyên thủy hoặc đối tượng để quản lý trạng thái

/* 
  When our project is built to run in the browser, our JSX will be converted by Babel into simple React.createElement() function calls. 
  From this.. 
*/
const greeting = 
Hello React!
;

/* ...into this: */
"use strict";

const greeting = /*#__PURE__*/React.createElement("div", null, "Hello React!");

7

Nếu trạng thái mới phụ thuộc vào trạng thái trước đó, để đảm bảo quá trình cập nhật được thực hiện một cách đáng tin cậy, chúng ta có thể sử dụng một hàm trong hàm setter để cung cấp cho chúng ta trạng thái chính xác trước đó

/* 
  When our project is built to run in the browser, our JSX will be converted by Babel into simple React.createElement() function calls. 
  From this.. 
*/
const greeting = 
Hello React!
;

/* ...into this: */
"use strict";

const greeting = /*#__PURE__*/React.createElement("div", null, "Hello React!");

8

Nếu bạn đang quản lý nhiều giá trị nguyên thủy, sử dụng

/* 
  JSX elements are expressions (resolve to a value) and therefore can be assigned to plain JavaScript variables.. 
*/
const greeting = 
Hello React!
;

const isNewToReact = true;

// .. or can be displayed conditionally
function sayGreeting() {
  if (isNewToReact) {
    // .. or returned from functions, etc.
    return greeting; // displays: Hello React!
  } else {
    return 
Hi again, React
;
  }
}

5 nhiều lần thường tốt hơn là sử dụng một lần với một đối tượng. Bạn không phải lo lắng về việc quên kết hợp trạng thái cũ với trạng thái mới

/* 
  When our project is built to run in the browser, our JSX will be converted by Babel into simple React.createElement() function calls. 
  From this.. 
*/
const greeting = 
Hello React!
;

/* ...into this: */
"use strict";

const greeting = /*#__PURE__*/React.createElement("div", null, "Hello React!");

9

Tác dụng phụ và sử dụngEffect

const year = 2021;

/* We can insert primitive JS values (i.e. strings, numbers, booleans) in curly braces: {} */
const greeting = 
Hello React in {year}
;

/* We can also insert expressions that resolve to a primitive value: */
const goodbye = 
Goodbye previous year: {year - 1}

/* Expressions can also be used for element attributes */
const className = 'title';
const title = 
My title

/* Note: trying to insert object values (i.e. objects, arrays, maps) in curly braces will result in an error */

2 cho phép chúng tôi thực hiện các tác dụng phụ trong các thành phần chức năng. Vậy tác dụng phụ là gì?

Tác dụng phụ là nơi chúng ta cần tiếp cận với thế giới bên ngoài. Ví dụ: tìm nạp dữ liệu từ API hoặc làm việc với DOM

Chúng là những hành động có thể thay đổi trạng thái thành phần của chúng ta theo cách không thể đoán trước (gây ra 'tác dụng phụ')

const year = 2021;

/* We can insert primitive JS values (i.e. strings, numbers, booleans) in curly braces: {} */
const greeting = 
Hello React in {year}
;

/* We can also insert expressions that resolve to a primitive value: */
const goodbye = 
Goodbye previous year: {year - 1}

/* Expressions can also be used for element attributes */
const className = 'title';
const title = 
My title

/* Note: trying to insert object values (i.e. objects, arrays, maps) in curly braces will result in an error */

2 chấp nhận chức năng gọi lại (được gọi là chức năng 'hiệu ứng'), theo mặc định, chức năng này sẽ chạy mỗi khi có kết xuất lại

Nó chạy khi thành phần của chúng tôi gắn kết, đây là thời điểm thích hợp để thực hiện tác dụng phụ trong vòng đời của thành phần

/* 
  We can write JSX like plain HTML, but it's actually made using JavaScript functions.
  Because JSX is JavaScript, not HTML, there are some differences:

  1) Some JSX attributes are named differently than HTML attributes. Why? Because some attribute words are reserved words in JavaScript, such as 'class'. Instead of class, JSX uses 'className'.

  Also, because JSX is JavaScript, attributes that consist of multiple words are written in camelcase:
*/


  
Hello React!


/* 
  2) JSX elements that consist of only a single tag (i.e. input, img, br elements) must be closed with a trailing forward slash to be valid (/): 
*/

 //  is a syntax error

/* 
  3) JSX elements that consist of an opening and closing tag (i.e. div, span, button element), must have both or be closed with a trailing forward slash. Like 2), it is a syntax error to have an unterminated element. 
*/

Click me //  or  is a syntax error
 // empty, but also valid

0

Để tránh thực hiện gọi lại hiệu ứng sau mỗi lần hiển thị, chúng tôi cung cấp đối số thứ hai, một mảng trống

/* 
  We can write JSX like plain HTML, but it's actually made using JavaScript functions.
  Because JSX is JavaScript, not HTML, there are some differences:

  1) Some JSX attributes are named differently than HTML attributes. Why? Because some attribute words are reserved words in JavaScript, such as 'class'. Instead of class, JSX uses 'className'.

  Also, because JSX is JavaScript, attributes that consist of multiple words are written in camelcase:
*/


  
Hello React!


/* 
  2) JSX elements that consist of only a single tag (i.e. input, img, br elements) must be closed with a trailing forward slash to be valid (/): 
*/

 //  is a syntax error

/* 
  3) JSX elements that consist of an opening and closing tag (i.e. div, span, button element), must have both or be closed with a trailing forward slash. Like 2), it is a syntax error to have an unterminated element. 
*/

Click me //  or  is a syntax error
 // empty, but also valid

1

const year = 2021;

/* We can insert primitive JS values (i.e. strings, numbers, booleans) in curly braces: {} */
const greeting = 
Hello React in {year}
;

/* We can also insert expressions that resolve to a primitive value: */
const goodbye = 
Goodbye previous year: {year - 1}

/* Expressions can also be used for element attributes */
const className = 'title';
const title = 
My title

/* Note: trying to insert object values (i.e. objects, arrays, maps) in curly braces will result in an error */

2 cho phép chúng tôi thực hiện các hiệu ứng có điều kiện với mảng phụ thuộc

Mảng phụ thuộc là đối số thứ hai và nếu bất kỳ giá trị nào trong mảng thay đổi, hàm hiệu ứng sẽ chạy lại

/* 
  We can write JSX like plain HTML, but it's actually made using JavaScript functions.
  Because JSX is JavaScript, not HTML, there are some differences:

  1) Some JSX attributes are named differently than HTML attributes. Why? Because some attribute words are reserved words in JavaScript, such as 'class'. Instead of class, JSX uses 'className'.

  Also, because JSX is JavaScript, attributes that consist of multiple words are written in camelcase:
*/


  
Hello React!


/* 
  2) JSX elements that consist of only a single tag (i.e. input, img, br elements) must be closed with a trailing forward slash to be valid (/): 
*/

 //  is a syntax error

/* 
  3) JSX elements that consist of an opening and closing tag (i.e. div, span, button element), must have both or be closed with a trailing forward slash. Like 2), it is a syntax error to have an unterminated element. 
*/

Click me //  or  is a syntax error
 // empty, but also valid

2

const year = 2021;

/* We can insert primitive JS values (i.e. strings, numbers, booleans) in curly braces: {} */
const greeting = 
Hello React in {year}
;

/* We can also insert expressions that resolve to a primitive value: */
const goodbye = 
Goodbye previous year: {year - 1}

/* Expressions can also be used for element attributes */
const className = 'title';
const title = 
My title

/* Note: trying to insert object values (i.e. objects, arrays, maps) in curly braces will result in an error */

2 cho phép chúng tôi hủy đăng ký một số hiệu ứng nhất định bằng cách trả về một chức năng ở cuối

/* 
  We can write JSX like plain HTML, but it's actually made using JavaScript functions.
  Because JSX is JavaScript, not HTML, there are some differences:

  1) Some JSX attributes are named differently than HTML attributes. Why? Because some attribute words are reserved words in JavaScript, such as 'class'. Instead of class, JSX uses 'className'.

  Also, because JSX is JavaScript, attributes that consist of multiple words are written in camelcase:
*/


  
Hello React!


/* 
  2) JSX elements that consist of only a single tag (i.e. input, img, br elements) must be closed with a trailing forward slash to be valid (/): 
*/

 //  is a syntax error

/* 
  3) JSX elements that consist of an opening and closing tag (i.e. div, span, button element), must have both or be closed with a trailing forward slash. Like 2), it is a syntax error to have an unterminated element. 
*/

Click me //  or  is a syntax error
 // empty, but also valid

3

const year = 2021;

/* We can insert primitive JS values (i.e. strings, numbers, booleans) in curly braces: {} */
const greeting = 
Hello React in {year}
;

/* We can also insert expressions that resolve to a primitive value: */
const goodbye = 
Goodbye previous year: {year - 1}

/* Expressions can also be used for element attributes */
const className = 'title';
const title = 
My title

/* Note: trying to insert object values (i.e. objects, arrays, maps) in curly braces will result in an error */

2 là hook để sử dụng khi bạn muốn thực hiện một yêu cầu HTTP (cụ thể là yêu cầu GET khi thành phần được gắn kết)

Lưu ý rằng việc xử lý các lời hứa với cú pháp async/await ngắn gọn hơn yêu cầu tạo một hàm riêng. (Tại sao? Chức năng gọi lại hiệu ứng không thể không đồng bộ. )

/* 
  We can write JSX like plain HTML, but it's actually made using JavaScript functions.
  Because JSX is JavaScript, not HTML, there are some differences:

  1) Some JSX attributes are named differently than HTML attributes. Why? Because some attribute words are reserved words in JavaScript, such as 'class'. Instead of class, JSX uses 'className'.

  Also, because JSX is JavaScript, attributes that consist of multiple words are written in camelcase:
*/


  
Hello React!


/* 
  2) JSX elements that consist of only a single tag (i.e. input, img, br elements) must be closed with a trailing forward slash to be valid (/): 
*/

 //  is a syntax error

/* 
  3) JSX elements that consist of an opening and closing tag (i.e. div, span, button element), must have both or be closed with a trailing forward slash. Like 2), it is a syntax error to have an unterminated element. 
*/

Click me //  or  is a syntax error
 // empty, but also valid

4

Giới thiệu và sử dụngRef

Refs là một thuộc tính đặc biệt có sẵn trên tất cả các thành phần React. Chúng cho phép chúng ta tạo tham chiếu đến một phần tử/thành phần nhất định khi thành phần đó gắn kết

const year = 2021;

/* We can insert primitive JS values (i.e. strings, numbers, booleans) in curly braces: {} */
const greeting = 
Hello React in {year}
;

/* We can also insert expressions that resolve to a primitive value: */
const goodbye = 
Goodbye previous year: {year - 1}

/* Expressions can also be used for element attributes */
const className = 'title';
const title = 
My title

/* Note: trying to insert object values (i.e. objects, arrays, maps) in curly braces will result in an error */

7 cho phép chúng ta dễ dàng sử dụng React refs. Chúng ta gọi useRef (ở đầu thành phần) và gắn giá trị trả về vào thuộc tính ref của thành phần để chỉ nó

Sau khi chúng tôi tạo một tham chiếu, chúng tôi sử dụng thuộc tính hiện tại để sửa đổi (biến đổi) thuộc tính của phần tử hoặc có thể gọi bất kỳ phương thức khả dụng nào trên phần tử đó (như

const year = 2021;

/* We can insert primitive JS values (i.e. strings, numbers, booleans) in curly braces: {} */
const greeting = 
Hello React in {year}
;

/* We can also insert expressions that resolve to a primitive value: */
const goodbye = 
Goodbye previous year: {year - 1}

/* Expressions can also be used for element attributes */
const className = 'title';
const title = 
My title

/* Note: trying to insert object values (i.e. objects, arrays, maps) in curly braces will result in an error */

8 để tập trung đầu vào)

/* 
  We can write JSX like plain HTML, but it's actually made using JavaScript functions.
  Because JSX is JavaScript, not HTML, there are some differences:

  1) Some JSX attributes are named differently than HTML attributes. Why? Because some attribute words are reserved words in JavaScript, such as 'class'. Instead of class, JSX uses 'className'.

  Also, because JSX is JavaScript, attributes that consist of multiple words are written in camelcase:
*/


  
Hello React!


/* 
  2) JSX elements that consist of only a single tag (i.e. input, img, br elements) must be closed with a trailing forward slash to be valid (/): 
*/

 //  is a syntax error

/* 
  3) JSX elements that consist of an opening and closing tag (i.e. div, span, button element), must have both or be closed with a trailing forward slash. Like 2), it is a syntax error to have an unterminated element. 
*/

Click me //  or  is a syntax error
 // empty, but also valid

5

Móc và hiệu suất

Ngăn chặn kết xuất lại và phản ứng. bản ghi nhớ

const year = 2021;

/* We can insert primitive JS values (i.e. strings, numbers, booleans) in curly braces: {} */
const greeting = 
Hello React in {year}
;

/* We can also insert expressions that resolve to a primitive value: */
const goodbye = 
Goodbye previous year: {year - 1}

/* Expressions can also be used for element attributes */
const className = 'title';
const title = 
My title

/* Note: trying to insert object values (i.e. objects, arrays, maps) in curly braces will result in an error */

9 là một chức năng cho phép chúng tôi tối ưu hóa cách các thành phần của chúng tôi được hiển thị

Cụ thể, nó thực hiện một quy trình gọi là ghi nhớ giúp chúng tôi ngăn các thành phần của mình hiển thị lại khi chúng không cần làm như vậy (xem React. useMemo để có định nghĩa đầy đủ hơn về ghi nhớ)

const year = 2021;

/* We can insert primitive JS values (i.e. strings, numbers, booleans) in curly braces: {} */
const greeting = 
Hello React in {year}
;

/* We can also insert expressions that resolve to a primitive value: */
const goodbye = 
Goodbye previous year: {year - 1}

/* Expressions can also be used for element attributes */
const className = 'title';
const title = 
My title

/* Note: trying to insert object values (i.e. objects, arrays, maps) in curly braces will result in an error */

9 giúp ích nhiều nhất trong việc ngăn không cho danh sách các thành phần được kết xuất lại khi các thành phần chính của chúng kết xuất lại

/* 
  We can write JSX like plain HTML, but it's actually made using JavaScript functions.
  Because JSX is JavaScript, not HTML, there are some differences:

  1) Some JSX attributes are named differently than HTML attributes. Why? Because some attribute words are reserved words in JavaScript, such as 'class'. Instead of class, JSX uses 'className'.

  Also, because JSX is JavaScript, attributes that consist of multiple words are written in camelcase:
*/


  
Hello React!


/* 
  2) JSX elements that consist of only a single tag (i.e. input, img, br elements) must be closed with a trailing forward slash to be valid (/): 
*/

 //  is a syntax error

/* 
  3) JSX elements that consist of an opening and closing tag (i.e. div, span, button element), must have both or be closed with a trailing forward slash. Like 2), it is a syntax error to have an unterminated element. 
*/

Click me //  or  is a syntax error
 // empty, but also valid

6

Chức năng gọi lại và sử dụngCallback

/* 
  To write JSX on multiple lines, wrap in parentheses: ()
  JSX expressions that span multiple lines are called multiline expressions
*/

const greeting = (
  // div is the parent element
  

    {/* h1 and p are child elements */}
    
Hello!
    
Welcome to React
  
);
/* 'parents' and 'children' are how we describe JSX elements in relation
to one another, like we would talk about HTML elements */

1 là một cái móc được sử dụng để cải thiện hiệu suất thành phần của chúng tôi. Các hàm gọi lại là tên của các hàm được "gọi lại" trong một thành phần chính

Cách sử dụng phổ biến nhất là có một thành phần cha với một biến trạng thái, nhưng bạn muốn cập nhật trạng thái đó từ một thành phần con. Bạn làm nghề gì? . Điều đó cho phép chúng tôi cập nhật trạng thái trong thành phần chính

/* 
  To write JSX on multiple lines, wrap in parentheses: ()
  JSX expressions that span multiple lines are called multiline expressions
*/

const greeting = (
  // div is the parent element
  

    {/* h1 and p are child elements */}
    
Hello!
    
Welcome to React
  
);
/* 'parents' and 'children' are how we describe JSX elements in relation
to one another, like we would talk about HTML elements */

1 hoạt động theo cách tương tự như

const year = 2021;

/* We can insert primitive JS values (i.e. strings, numbers, booleans) in curly braces: {} */
const greeting = 
Hello React in {year}
;

/* We can also insert expressions that resolve to a primitive value: */
const goodbye = 
Goodbye previous year: {year - 1}

/* Expressions can also be used for element attributes */
const className = 'title';
const title = 
My title

/* Note: trying to insert object values (i.e. objects, arrays, maps) in curly braces will result in an error */

9. Nó ghi nhớ các chức năng gọi lại, vì vậy nó không được tạo lại trên mỗi lần kết xuất lại. Sử dụng đúng

/* 
  To write JSX on multiple lines, wrap in parentheses: ()
  JSX expressions that span multiple lines are called multiline expressions
*/

const greeting = (
  // div is the parent element
  

    {/* h1 and p are child elements */}
    
Hello!
    
Welcome to React
  
);
/* 'parents' and 'children' are how we describe JSX elements in relation
to one another, like we would talk about HTML elements */

1 có thể cải thiện hiệu suất của ứng dụng của chúng tôi

/* 
  We can write JSX like plain HTML, but it's actually made using JavaScript functions.
  Because JSX is JavaScript, not HTML, there are some differences:

  1) Some JSX attributes are named differently than HTML attributes. Why? Because some attribute words are reserved words in JavaScript, such as 'class'. Instead of class, JSX uses 'className'.

  Also, because JSX is JavaScript, attributes that consist of multiple words are written in camelcase:
*/


  
Hello React!


/* 
  2) JSX elements that consist of only a single tag (i.e. input, img, br elements) must be closed with a trailing forward slash to be valid (/): 
*/

 //  is a syntax error

/* 
  3) JSX elements that consist of an opening and closing tag (i.e. div, span, button element), must have both or be closed with a trailing forward slash. Like 2), it is a syntax error to have an unterminated element. 
*/

Click me //  or  is a syntax error
 // empty, but also valid

7

Ghi nhớ và sử dụng Memo

/* 
  To write JSX on multiple lines, wrap in parentheses: ()
  JSX expressions that span multiple lines are called multiline expressions
*/

const greeting = (
  // div is the parent element
  

    {/* h1 and p are child elements */}
    
Hello!
    
Welcome to React
  
);
/* 'parents' and 'children' are how we describe JSX elements in relation
to one another, like we would talk about HTML elements */

5 rất giống với

/* 
  To write JSX on multiple lines, wrap in parentheses: ()
  JSX expressions that span multiple lines are called multiline expressions
*/

const greeting = (
  // div is the parent element
  

    {/* h1 and p are child elements */}
    
Hello!
    
Welcome to React
  
);
/* 'parents' and 'children' are how we describe JSX elements in relation
to one another, like we would talk about HTML elements */

1 và dùng để cải thiện hiệu suất. Nhưng thay vì dùng để gọi lại, nó dùng để lưu trữ kết quả của các phép tính tốn kém

/* 
  To write JSX on multiple lines, wrap in parentheses: ()
  JSX expressions that span multiple lines are called multiline expressions
*/

const greeting = (
  // div is the parent element
  

    {/* h1 and p are child elements */}
    
Hello!
    
Welcome to React
  
);
/* 'parents' and 'children' are how we describe JSX elements in relation
to one another, like we would talk about HTML elements */

5 cho phép chúng tôi ghi nhớ hoặc ghi nhớ kết quả của các phép tính tốn kém khi chúng đã được thực hiện cho một số đầu vào nhất định

Ghi nhớ có nghĩa là nếu một phép tính đã được thực hiện trước đó với một đầu vào nhất định, thì không cần phải thực hiện lại, bởi vì chúng ta đã có kết quả được lưu trữ của phép toán đó

/* 
  To write JSX on multiple lines, wrap in parentheses: ()
  JSX expressions that span multiple lines are called multiline expressions
*/

const greeting = (
  // div is the parent element
  

    {/* h1 and p are child elements */}
    
Hello!
    
Welcome to React
  
);
/* 'parents' and 'children' are how we describe JSX elements in relation
to one another, like we would talk about HTML elements */

5 trả về một giá trị từ phép tính, giá trị này sau đó được lưu trữ trong một biến

/* 
  We can write JSX like plain HTML, but it's actually made using JavaScript functions.
  Because JSX is JavaScript, not HTML, there are some differences:

  1) Some JSX attributes are named differently than HTML attributes. Why? Because some attribute words are reserved words in JavaScript, such as 'class'. Instead of class, JSX uses 'className'.

  Also, because JSX is JavaScript, attributes that consist of multiple words are written in camelcase:
*/


  
Hello React!


/* 
  2) JSX elements that consist of only a single tag (i.e. input, img, br elements) must be closed with a trailing forward slash to be valid (/): 
*/

 //  is a syntax error

/* 
  3) JSX elements that consist of an opening and closing tag (i.e. div, span, button element), must have both or be closed with a trailing forward slash. Like 2), it is a syntax error to have an unterminated element. 
*/

Click me //  or  is a syntax error
 // empty, but also valid

8

Móc phản ứng nâng cao

Bối cảnh và sử dụngContext

Trong React, chúng tôi muốn tránh vấn đề tạo nhiều props sau đây để truyền dữ liệu xuống hai hoặc nhiều cấp độ từ một component cha

/* 
  We can write JSX like plain HTML, but it's actually made using JavaScript functions.
  Because JSX is JavaScript, not HTML, there are some differences:

  1) Some JSX attributes are named differently than HTML attributes. Why? Because some attribute words are reserved words in JavaScript, such as 'class'. Instead of class, JSX uses 'className'.

  Also, because JSX is JavaScript, attributes that consist of multiple words are written in camelcase:
*/


  
Hello React!


/* 
  2) JSX elements that consist of only a single tag (i.e. input, img, br elements) must be closed with a trailing forward slash to be valid (/): 
*/

 //  is a syntax error

/* 
  3) JSX elements that consist of an opening and closing tag (i.e. div, span, button element), must have both or be closed with a trailing forward slash. Like 2), it is a syntax error to have an unterminated element. 
*/

Click me //  or  is a syntax error
 // empty, but also valid

9

Bối cảnh hữu ích để chuyển các đạo cụ xuống nhiều cấp độ của các thành phần con từ một thành phần cha mẹ

/* 
  Properties that accept pixel values (like width, height, padding, margin, etc), can use integers instead of strings.
  For example: fontSize: 22. Instead of: fontSize: "22px"
*/

  Hello React!

0

Móc

/* 
  To write JSX on multiple lines, wrap in parentheses: ()
  JSX expressions that span multiple lines are called multiline expressions
*/

const greeting = (
  // div is the parent element
  

    {/* h1 and p are child elements */}
    
Hello!
    
Welcome to React
  
);
/* 'parents' and 'children' are how we describe JSX elements in relation
to one another, like we would talk about HTML elements */

9 cho phép chúng tôi sử dụng ngữ cảnh trong bất kỳ thành phần chức năng nào là con của Nhà cung cấp, thay vì sử dụng mẫu đạo cụ kết xuất

/* 
  Properties that accept pixel values (like width, height, padding, margin, etc), can use integers instead of strings.
  For example: fontSize: 22. Instead of: fontSize: "22px"
*/

  Hello React!

1

Bộ giảm tốc và sử dụngReducer

Bộ giảm tốc là các hàm đơn giản, có thể dự đoán (thuần túy) lấy một đối tượng trạng thái trước đó và một đối tượng hành động và trả về một đối tượng trạng thái mới

/* 
  Properties that accept pixel values (like width, height, padding, margin, etc), can use integers instead of strings.
  For example: fontSize: 22. Instead of: fontSize: "22px"
*/

  Hello React!

2

Bộ giảm tốc là một mẫu mạnh mẽ để quản lý trạng thái được sử dụng trong thư viện quản lý trạng thái phổ biến Redux (thường được sử dụng với React)

Bộ giảm tốc có thể được sử dụng trong React với móc

const greeting = (
  

    {/* This is a single line comment */}
  	
Hello!
	
Welcome to React
    {/* This is a 
      multiline
      comment */} 
  

const greeting = (
  

    {/* This is a single line comment */}
  	
Hello!
	
Welcome to React
    {/* This is a 
      multiline
      comment */} 
  
);

/* 
  To write JSX on multiple lines, wrap in parentheses: ()
  JSX expressions that span multiple lines are called multiline expressions
*/

const greeting = (
  // div is the parent element
  

    {/* h1 and p are child elements */}
    
Hello!
    
Welcome to React
  
);
/* 'parents' and 'children' are how we describe JSX elements in relation
to one another, like we would talk about HTML elements */

const greeting = (
  

    {/* This is a single line comment */}
  	
Hello!
	
Welcome to React
    {/* This is a 
      multiline
      comment */} 
  
);

/* 
  To write JSX on multiple lines, wrap in parentheses: ()
  JSX expressions that span multiple lines are called multiline expressions
*/

const greeting = (
  // div is the parent element
  

    {/* h1 and p are child elements */}
    
Hello!
    
Welcome to React
  
);
/* 'parents' and 'children' are how we describe JSX elements in relation
to one another, like we would talk about HTML elements */

/* 
  Properties that accept pixel values (like width, height, padding, margin, etc), can use integers instead of strings.
  For example: fontSize: 22. Instead of: fontSize: "22px"
*/

  Hello React!

const greeting = (
  

    {/* This is a single line comment */}
  	
Hello!
	
Welcome to React
    {/* This is a 
      multiline
      comment */} 
  
);

const greeting = (
  

    {/* This is a single line comment */}
  	
Hello!
	
Welcome to React
    {/* This is a 
      multiline
      comment */} 
  
);

const greeting = (
  

    {/* This is a single line comment */}
  	
Hello!
	
Welcome to React
    {/* This is a 
      multiline
      comment */} 
  
);

/* 
  Properties that accept pixel values (like width, height, padding, margin, etc), can use integers instead of strings.
  For example: fontSize: 22. Instead of: fontSize: "22px"
*/

  Hello React!