Hướng dẫn toàn diện về React.js năm 2018

Bài viết này ban đầu được xuất bản vào tháng 1 năm 2015, nhưng gần đây đã được cập nhật lên React 16.3 và tất cả những điều tốt đẹp mà nó chứa đựng.

Các thành phần là các khối xây dựng của React. Nếu bạn đến từ nền Angular, các thành phần rất giống với Chỉ thị. Nếu bạn đến từ một nền tảng khác, thì về cơ bản, chúng là các vật dụng hoặc mô-đun.

Bạn có thể nghĩ về một thành phần như một bộ sưu tập HTML, CSS, JS và một số dữ liệu nội bộ dành riêng cho thành phần đó. Tôi thích nghĩ về các thành phần React như Kolaches của web. Họ có tất cả mọi thứ bạn cần, được gói trong một gói có thể kết hợp ngon miệng.

Các thành phần này được định nghĩa bằng JavaScript thuần túy hoặc chúng có thể được định nghĩa trong cái mà nhóm React gọi là JSXX. Nếu bạn quyết định sử dụng JSX (mà bạn rất có thể sẽ sử dụng, nó rất chuẩn - và đó là những gì chúng tôi sẽ sử dụng cho hướng dẫn này), bạn sẽ cần một số giai đoạn biên dịch để chuyển đổi JSX của mình sang JavaScript. Nhưng chúng tôi sẽ nhận được điều này sau.

Điều làm cho React trở nên thuận tiện cho việc xây dựng giao diện người dùng là dữ liệu được nhận từ một thành phần cha mẹ thành phần, hoặc nó chứa trong chính thành phần đó. Trước khi chúng tôi nhảy vào mã, hãy để Hãy chắc chắn rằng chúng tôi có hiểu biết cao về các thành phần.

Ở trên chúng tôi có một hình ảnh của hồ sơ Twitter của tôi. Nếu chúng ta định tạo lại trang này trong React, chúng ta sẽ chia các phần khác nhau thành các thành phần khác nhau (được tô sáng). Lưu ý rằng các thành phần có thể có các thành phần lồng nhau bên trong chúng.

Chúng tôi có thể đặt tên cho thành phần bên trái (màu hồng) là thành phần UserInfo. Bên trong thành phần UserInfo, chúng ta có một thành phần khác (màu cam), chúng ta có thể gọi thành phần UserImages. Cách thức hoạt động của mối quan hệ cha / con này là thành phần UserInfo của chúng tôi hoặc thành phần cha mẹ là nơi mà trạng thái dữ liệu của dữ liệu cho cả chính nó và thành phần UserImages (thành phần con). Nếu chúng tôi muốn sử dụng bất kỳ phần nào của dữ liệu cha mẹ thành phần cha mẹ trong thành phần con mà chúng tôi thực hiện, chúng tôi sẽ chuyển dữ liệu đó cho thành phần con làm thuộc tính. Trong ví dụ này, chúng tôi chuyển thành phần UserImages tất cả các hình ảnh mà người dùng có (hiện đang sống trong thành phần UserInfo).

Chúng tôi sẽ nhận được nhiều thông tin chi tiết hơn về mã, nhưng tôi muốn bạn hiểu bức tranh lớn hơn về những gì mà xảy ra ở đây. Hệ thống phân cấp cha / con này làm cho việc quản lý dữ liệu của chúng tôi tương đối đơn giản, bởi vì chúng tôi biết chính xác nơi dữ liệu của chúng tôi sống và chúng tôi không nên thao túng dữ liệu đó ở bất kỳ nơi nào khác.

Các chủ đề dưới đây là những gì tôi tin là các khía cạnh cơ bản của React. Nếu bạn hiểu tất cả chúng và mục đích của chúng, bạn sẽ ở một vị trí rất tốt sau khi đọc hướng dẫn này.

JSX - Cho phép chúng tôi viết HTML giống như cú pháp được
chuyển đổi thành các đối tượng lightJavaScript.
Virtual DOM - Một đại diện JavaScript của thực tế
DOM.
React.Component - Cách mà bạn tạo một thành phần mới.
render (phương thức) - Mô tả giao diện người dùng sẽ như thế nào
thành phần cụ thể.
ReactDOM.render - Hiển thị thành phần React thành nút DOM.
trạng thái - Kho dữ liệu nội bộ (đối tượng) của một thành phần.
constructor (this.state) - Cách bạn thiết lập
trạng thái ban đầu của một thành phần.
setState - Một phương thức trợ giúp được sử dụng để cập nhật trạng thái của một
thành phần và kết xuất lại giao diện người dùng
đạo cụ - Dữ liệu được truyền cho thành phần con
từ thành phần cha mẹ.
propTypes - Cho phép bạn kiểm soát sự hiện diện hoặc các loại
đạo cụ nhất định truyền cho thành phần con.
defaultProps - Cho phép bạn đặt đạo cụ mặc định cho thành phần của mình.
Vòng đời thành phần
  - componentDidMount - Được kích hoạt sau khi thành phần được gắn kết
  - thành phầnWillUnmount - Được kích hoạt trước khi thành phần sẽ ngắt kết nối
  - getDerivingStateFromProps - Được kích hoạt khi thành phần gắn kết và
Bất cứ khi nào đạo cụ thay đổi. Được sử dụng để cập nhật trạng thái của một
thành phần khi đạo cụ của nó thay đổi
Sự kiện
  - trong một cái nhấp chuột
  - onSubmit
  - thay đổi

Tôi biết nó có vẻ rất nhiều, nhưng bạn sẽ sớm thấy mỗi phần là cơ bản trong việc xây dựng các ứng dụng mạnh mẽ với React (và tôi cũng không đùa khi tôi nói rằng tôi muốn đây là một hướng dẫn toàn diện).

Tại thời điểm này, bạn nên hiểu, ở mức độ rất cao, cách React hoạt động. Bây giờ, hãy để nhảy vào một số mã.

Tạo Thành phần đầu tiên của bạn (JSX, DOM ảo, kết xuất, ReactDOM.render)

Hãy cùng đi trước và xây dựng thành phần React đầu tiên của chúng tôi.

Để tạo thành phần React, bạn sẽ sử dụng lớp ES6. Nếu bạn không quen thuộc với các Lớp học, bạn có thể tiếp tục đọc bên dưới hoặc bạn có thể đọc thêm về chúng ở đây:

nhập React từ 'Reac'
nhập ReactDOM từ 'Reac-dom'
lớp HelloWorld mở rộng React.Component {
  kết xuất () {
    trở về (
      
Xin chào thế giới!     )   } }
ReactDOM.render (, document.getEuityById ('root'));

Lưu ý rằng phương thức duy nhất trên lớp của chúng tôi là kết xuất. Mỗi thành phần được yêu cầu phải có một phương thức kết xuất. Lý do cho điều đó là kết xuất là mô tả UI (giao diện người dùng) cho thành phần của chúng tôi. Vì vậy, trong ví dụ này, văn bản sẽ hiển thị trên màn hình nơi hiển thị thành phần này là Hello World!

Bây giờ hãy để Lôi nhìn vào những gì ReactDOM đang làm. ReactDOM.render có hai đối số. Đối số đầu tiên là thành phần bạn muốn kết xuất, trong khi đối số thứ hai là nút DOM nơi bạn muốn kết xuất thành phần.

Lưu ý rằng chúng tôi sử dụng ReactDOM.render chứ không phải React.render. Đây là một thay đổi được thực hiện trong React .14 để làm cho React trở nên mô đun hơn. Thật ý nghĩa khi bạn nghĩ rằng React có thể kết xuất thành nhiều thứ hơn là chỉ một phần tử DOM.

Trong ví dụ trên, chúng tôi đã nói với React lấy thành phần HelloWorld của chúng tôi và kết xuất nó thành phần tử có ID gốc. Do mối quan hệ cha / con của React mà chúng ta đã nói trước đó, bạn thường chỉ phải sử dụng ReactDOM.render một lần trong ứng dụng của mình, bởi vì bằng cách hiển thị thành phần cha mẹ nhất, tất cả các thành phần con cũng sẽ được hiển thị.

Bây giờ, tại thời điểm này, bạn có thể cảm thấy một chút kỳ lạ khi ném HTML HTML vào JavaScript của bạn. Kể từ khi bạn bắt đầu học phát triển web, bạn đã được thông báo rằng bạn nên tránh logic của mình, điều đó khiến cho JavaScript của bạn không bị tách rời khỏi HTML của bạn.

Mô hình này là mạnh mẽ, nhưng nó có một số điểm yếu. Tôi không muốn hướng dẫn này lâu hơn để thuyết phục bạn rằng ý tưởng này là một bước đi đúng hướng, vì vậy nếu ý tưởng này vẫn làm phiền bạn, bạn có thể kiểm tra liên kết này. Khi bạn tìm hiểu thêm về React, sự khó chịu này sẽ nhanh chóng lắng xuống.

Các HTML HTML mà bạn mà Were đang viết trong phương thức kết xuất không phải là HTML thực sự, nhưng đó là một thứ mà React đang gọi là JSXX. JSX chỉ đơn giản cho phép chúng ta viết cú pháp giống như HTML mà cuối cùng được chuyển thành các đối tượng JavaScript nhẹ. React sau đó có thể lấy các đối tượng JavaScript này và từ đó tạo thành một DOM ảo DOM hay một đại diện JavaScript của DOM thực tế. Điều này tạo ra một tình huống thắng / thắng trong đó bạn có được khả năng truy cập của các mẫu với sức mạnh của JavaScript.

Nhìn vào ví dụ dưới đây, đây là những gì mà JSX của bạn cuối cùng sẽ được biên dịch thành.

lớp HelloWorld mở rộng React.Component {
  kết xuất () {
    return React.createEuity ("div", null, "Hello World");
  }
}
Bây giờ, bạn có thể từ bỏ giai đoạn biến đổi JSX -> JS và viết các thành phần React của bạn giống như mã ở trên. Nhưng như bạn có thể tưởng tượng, điều đó sẽ khá khó khăn. Tôi không biết bất cứ ai không sử dụng JSX. Để biết thêm thông tin về những gì JSX biên dịch xuống, hãy xem React Elements vs React Các thành phần.

Cho đến thời điểm này, chúng tôi đã thực sự nhấn mạnh tầm quan trọng của mô hình DOM ảo mới mà chúng tôi đã nhảy vào. Lý do nhóm React thực hiện theo cách tiếp cận này là vì DOM ảo là đại diện JavaScript của DOM thực tế, React có thể theo dõi sự khác biệt giữa DOM ảo hiện tại (được tính sau một số thay đổi dữ liệu), với DOM ảo trước đó (được tính toán trước một số thay đổi dữ liệu). React sau đó cô lập các thay đổi giữa DOM ảo cũ và mới và sau đó chỉ cập nhật DOM thực với các thay đổi cần thiết.

Theo thuật ngữ layman nhiều hơn, vì thao tác DOM thực tế chậm, React có thể giảm thiểu thao tác với DOM thực tế bằng cách theo dõi DOM ảo và chỉ cập nhật DOM thực khi cần thiết và chỉ với những thay đổi cần thiết. (Thêm thông tin ở đây).

Thông thường, UI Cùng có rất nhiều trạng thái khiến việc quản lý trạng thái trở nên khó khăn. Bằng cách hiển thị lại DOM ảo mỗi khi có bất kỳ thay đổi trạng thái nào xảy ra, React giúp bạn dễ dàng suy nghĩ về trạng thái của ứng dụng của mình. Quá trình này trông giống như thế này:

Một số sự kiện người dùng thay đổi trạng thái của ứng dụng của bạn → Hiển thị lại DOM ảo → Khác biệt DOM ảo trước đó với DOM ảo mới → Chỉ cập nhật DOM thực với các thay đổi cần thiết.

Bởi vì có quá trình chuyển đổi này từ JSX sang JS, nên bạn cần thiết lập một số giai đoạn chuyển đổi khi bạn phát triển. Trong phần 2 của loạt bài này, I hèll giới thiệu Webpack và Babel để thực hiện chuyển đổi này.

Hãy cùng nhìn lại danh sách kiểm tra các phần quan trọng nhất của React của chúng tôi và xem chúng tôi hiện đang ở đâu.

JSX - Cho phép chúng tôi viết HTML giống như cú pháp được
chuyển đổi thành các đối tượng lightJavaScript.
 Virtual DOM - Một đại diện JavaScript của thực tế
DOM.
React.Component - Cách mà bạn tạo một thành phần mới.
 render (phương thức) - Mô tả giao diện người dùng sẽ như thế nào
thành phần cụ thể.
ReactDOM.render - Hiển thị thành phần React thành nút DOM.
trạng thái - Kho dữ liệu nội bộ (đối tượng) của một thành phần.
constructor (this.state) - Cách bạn thiết lập
trạng thái ban đầu của một thành phần.
setState - Một phương thức trợ giúp được sử dụng để cập nhật trạng thái của một
thành phần và kết xuất lại giao diện người dùng
đạo cụ - Dữ liệu được truyền cho thành phần con
từ thành phần cha mẹ.
propTypes - Cho phép bạn kiểm soát sự hiện diện hoặc các loại
đạo cụ nhất định truyền cho thành phần con.
defaultProps - Cho phép bạn đặt đạo cụ mặc định cho thành phần của mình.
Vòng đời thành phần
  - componentDidMount - Được kích hoạt sau khi thành phần được gắn kết
  - thành phầnWillUnmount - Được kích hoạt trước khi thành phần sẽ ngắt kết nối
  - getDerivingStateFromProps - Được kích hoạt khi thành phần gắn kết và
Bất cứ khi nào đạo cụ thay đổi. Được sử dụng để cập nhật trạng thái của một
thành phần khi đạo cụ của nó thay đổi
Sự kiện
  - trong một cái nhấp chuột
  - onSubmit
  - thay đổi

Chúng tôi làm cho một tốc độ tốt. Tất cả mọi thứ in đậm là những gì chúng tôi đã đề cập, và ít nhất bạn có thể giải thích làm thế nào những thành phần nhất định phù hợp với hệ sinh thái React.

Thêm Trạng thái vào Thành phần (trạng thái) của bạn

Tiếp theo trong danh sách là nhà nước. Trước đó chúng ta đã nói về việc quản lý giao diện người dùng là khó khăn vì chúng thường có nhiều trạng thái khác nhau. Khu vực này là nơi React thực sự bắt đầu tỏa sáng. Mỗi thành phần có khả năng quản lý trạng thái riêng và chuyển trạng thái của nó xuống các thành phần con nếu cần.

Quay trở lại ví dụ Twitter từ trước đó, thành phần UserInfo (được tô sáng màu hồng ở trên) chịu trách nhiệm quản lý trạng thái (hoặc dữ liệu) của thông tin người dùng. Nếu một thành phần khác cũng cần trạng thái / dữ liệu này nhưng trạng thái đó không phải là con trực tiếp của thành phần UserInfo, thì bạn sẽ tạo một thành phần khác sẽ là cha mẹ trực tiếp của UserInfo và thành phần khác (hoặc cả hai thành phần yêu cầu trạng thái đó ). Sau đó, bạn sẽ chuyển trạng thái xuống dưới dạng đạo cụ vào các thành phần con. Nói cách khác, nếu bạn có một hệ thống phân cấp nhiều thành phần, một thành phần cha mẹ phổ biến sẽ quản lý trạng thái và chuyển nó xuống các thành phần con của nó thông qua các đạo cụ.

Hãy cùng xem một thành phần ví dụ sử dụng trạng thái bên trong của chính nó.

lớp HelloUser mở rộng React.Component {
  constructor (đạo cụ) {
    siêu (đạo cụ)
this .state = {
      tên người dùng: 'tylermcginnis'
    }
  }
  kết xuất () {
    trở về (
      
        Xin chào {this.state.username}            )   } }

Chúng tôi đã giới thiệu một số cú pháp mới với ví dụ này. Cái đầu tiên bạn nhận thấy là phương thức constructor. Từ định nghĩa ở trên, phương thức constructor là, Cách mà bạn đặt trạng thái của một thành phần. Nói cách khác, bất kỳ dữ liệu nào bạn đưa vào this.state bên trong hàm tạo sẽ là một phần của trạng thái thành phần đó.

Trong đoạn mã trên, chúng tôi đã nói với thành phần của mình rằng chúng tôi muốn nó theo dõi tên người dùng. Tên người dùng này hiện có thể được sử dụng bên trong thành phần của chúng tôi bằng cách thực hiện {this.state.username}, đây chính xác là những gì chúng tôi làm trong phương thức kết xuất của mình.

Điều cuối cùng để nói về trạng thái là thành phần của chúng ta cần khả năng sửa đổi trạng thái bên trong của chính nó. Chúng tôi làm điều này với một phương thức gọi là setState. Nhớ trước đó khi chúng ta nói về việc kết xuất lại của dom ảo mỗi khi dữ liệu thay đổi?

Tín hiệu thông báo cho ứng dụng của chúng tôi một số dữ liệu đã thay đổi → Kết xuất lại DOM ảo → Khác biệt DOM ảo trước đó với DOM ảo mới → Chỉ cập nhật DOM thực với các thay đổi cần thiết.

Đó là tín hiệu để thông báo cho ứng dụng của chúng tôi, một số dữ liệu đã thay đổi, thực ra chỉ là setState. Bất cứ khi nào setState được gọi, DOM ảo sẽ kết xuất lại, thuật toán diff chạy và DOM thực được cập nhật với các thay đổi cần thiết.

Một lưu ý phụ, khi chúng tôi giới thiệu setState trong đoạn mã dưới đây, chúng tôi cũng sẽ giới thiệu một vài sự kiện có trong danh sách của chúng tôi. Hai con chim, một hòn đá.

Vì vậy, trong mẫu mã tiếp theo, chúng tôi sẽ có một hộp đầu vào, bất cứ khi nào ai đó gõ vào nó, sẽ tự động cập nhật trạng thái của chúng tôi và thay đổi tên người dùng.

lớp HelloUser mở rộng React.Component {
  constructor (đạo cụ) {
    siêu (đạo cụ)
this .state = {
      tên người dùng: 'tylermcginnis'
    }
this .handleChange = this.handleChange.bind (this)
  }
  xử lý Thay đổi (e) {
    this .setState ({
      tên người dùng: e.target.value
    })
  }
  kết xuất () {
    trở về (
      
        Xin chào {this.state.username}
        Đổi tên:         <đầu vào           gõ = "văn bản"           value = {this.state.username}           onChange = {this.handleChange}         />            )   } }

Lưu ý chúng tôi đã giới thiệu một vài điều nữa. Điều đầu tiên là phương thức handleChange. Phương pháp này sẽ được gọi mỗi khi người dùng gõ vào hộp nhập. Khi handChange được gọi, nó sẽ gọi setState để xác định lại tên người dùng của chúng tôi với bất cứ thứ gì được nhập vào hộp nhập (e.target.value). Hãy nhớ rằng, bất cứ khi nào setState được gọi, React sẽ tạo một DOM ảo mới, thực hiện tìm khác biệt, sau đó cập nhật DOM thực.

Nào Chúng tôi đã thêm một dòng mới có chứa một trường đầu vào. Loại của trường đầu vào rõ ràng sẽ là văn bản. Giá trị sẽ là giá trị của tên người dùng ban đầu được xác định trong phương thức getInitialState của chúng tôi và sẽ được cập nhật trong phương thức handleChange.

Lưu ý rằng có một thuộc tính mới mà bạn có thể chưa từng thấy trước đây, onChange. onChange là một thứ React và nó sẽ gọi bất kỳ phương thức nào bạn chỉ định mỗi khi giá trị trong hộp đầu vào thay đổi - trong trường hợp này, phương thức chúng tôi đã chỉ định là handleChange.

Quá trình cho mã ở trên sẽ diễn ra như thế này.

Một người dùng nhập vào hộp đầu vào → handleChange được gọi → trạng thái thành phần của chúng tôi được đặt thành giá trị mới → React tái hiện lại DOM ảo → React Diffs thay đổi → Real DOM được cập nhật.

Sau này, khi chúng tôi bao gồm các đạo cụ, chúng tôi sẽ thấy một số trường hợp sử dụng nâng cao hơn về trạng thái xử lý.

Chúng tôi đang đến đó! Nếu bạn có thể giải thích các mục in đậm bên dưới, hãy đọc lại phần đó. Một lời khuyên về việc học THỰC SỰ Phản ứng: don Lồng hãy đọc một cách thụ động điều này mang lại cho bạn cảm giác an toàn sai lầm rằng bạn thực sự biết những gì diễn ra và có thể tạo lại những gì chúng tôi đang làm. Truy cập vào CodeSandbox và cố gắng tạo lại (hoặc tạo các thành phần của riêng bạn) mà không cần nhìn vào những gì tôi đã làm. Nó là cách duy nhất để bạn thực sự bắt đầu học cách xây dựng với React. Điều này đi cho hướng dẫn này và sau đây đến.

JSX - Cho phép chúng tôi viết HTML giống như cú pháp được
chuyển đổi thành các đối tượng lightJavaScript.
 Virtual DOM - Một đại diện JavaScript của thực tế
DOM.
React.Component - Cách mà bạn tạo một thành phần mới.
 render (phương thức) - Mô tả giao diện người dùng sẽ như thế nào
thành phần cụ thể.
ReactDOM.render - Hiển thị thành phần React thành nút DOM.
 state - Kho dữ liệu nội bộ (đối tượng) của một thành phần.
Constructor (this.state) - Cách thức bạn thiết lập
trạng thái ban đầu của một thành phần.
SetState - Một phương thức trợ giúp được sử dụng để cập nhật trạng thái của một
thành phần và kết xuất lại giao diện người dùng
đạo cụ - Dữ liệu được truyền cho thành phần con
từ thành phần cha mẹ.
propTypes - Cho phép bạn kiểm soát sự hiện diện hoặc các loại
đạo cụ nhất định truyền cho thành phần con.
defaultProps - Cho phép bạn đặt đạo cụ mặc định cho thành phần của mình.
Vòng đời thành phần
  - componentDidMount - Được kích hoạt sau khi thành phần được gắn kết
  - thành phầnWillUnmount - Được kích hoạt trước khi thành phần sẽ ngắt kết nối
  - getDerivingStateFromProps - Được kích hoạt khi thành phần gắn kết và
Bất cứ khi nào đạo cụ thay đổi. Được sử dụng để cập nhật trạng thái của một
thành phần khi đạo cụ của nó thay đổi
Sự kiện
  - trong một cái nhấp chuột
  - onSubmit
  - thay đổi

Trạng thái nhận từ Thành phần phụ huynh (đạo cụ, propTypes, getDefaultProps)

Chúng tôi đã nói về đạo cụ một vài lần vì nó thật khó để làm được nhiều thứ mà không có chúng. Theo định nghĩa của chúng tôi ở trên, đạo cụ là dữ liệu được truyền cho thành phần con từ thành phần cha. Điều này cho phép kiến ​​trúc React của chúng tôi khá đơn giản. Xử lý trạng thái trong thành phần cha mẹ cao nhất cần sử dụng dữ liệu cụ thể và nếu bạn có thành phần con cũng cần dữ liệu đó, hãy chuyển dữ liệu đó xuống dưới dạng đạo cụ.

Ở đây, một ví dụ rất cơ bản về việc sử dụng đạo cụ.

lớp HelloUser mở rộng React.Component {
  kết xuất () {
    trở về (
      
Xin chào, {this.props.name}     )   } }
ReactDOM.render (
  ,
  document.getEuityById ('root')
);

Lưu ý trên dòng 9, chúng ta có một thuộc tính được gọi là tên với giá trị của Tyler Tyler. Bây giờ trong thành phần của chúng tôi, chúng tôi có thể sử dụng {this.props.name} để nhận được Tyler Tyler.

Hãy nhìn vào một ví dụ nâng cao hơn. Chúng tôi sẽ có hai thành phần bây giờ. Một cha mẹ, một đứa con. Phụ huynh sẽ theo dõi trạng thái và chuyển một phần trạng thái đó xuống cho trẻ làm đạo cụ. Trước tiên, hãy nhìn vào thành phần cha mẹ đó.

Thành phần phụ huynh:

lớp FriendsContainer mở rộng React.Component {
  constructor (đạo cụ) {
    siêu (đạo cụ)
this .state = {
      tên: 'Tyler McGinnis',
      bạn bè: [
        'Jake Lingwall',
        'Sarah Drasner',
        'Merrick Christensen'
      ]
    }
  }
  kết xuất () {
    trở về (
      
        

Tên: {this.state.name}                     )   } }

Thực sự có rất nhiều diễn biến trong thành phần này mà chúng ta đã thấy trước đó. Chúng ta có trạng thái ban đầu và chúng ta chuyển một phần trạng thái ban đầu đó sang thành phần khác. Phần lớn các mã mới sẽ đến từ thành phần con này, vì vậy hãy để Lôi xem xét kỹ hơn về điều đó.

Thành phần con:

lớp ShowList mở rộng React.Component {
  kết xuất () {
    trở về (
      
        

Bạn bè         
              {this.props.names.map ((bạn bè) =>
  • {bạn} )}                     )   } }

Hãy nhớ rằng mã được trả về từ phương thức kết xuất của chúng tôi là một đại diện cho DOM thực sự sẽ trông như thế nào. Nếu bạn không quen thuộc với Array.prototype.map, mã này có thể trông hơi rắc rối. Tất cả bản đồ là nó tạo ra một mảng mới, gọi hàm gọi lại của chúng tôi trên từng mục trong mảng và điền vào mảng mới với kết quả gọi hàm gọi lại trên mỗi mục. Ví dụ,

bạn bè = [
  'Jake Lingwall',
  'Sarah Drasner',
  'Merrick Christensen'
];
const listItems = friends.map ((bạn bè) => {
  trả lại "
  • " + bạn + ""; });
  • console.log (listItems);

    Bảng điều khiển.log ở trên trả về ["

  • Jake Lingwall ", "
  • Murphy Randall ", "
  • Merrick Christensen "].

    Lưu ý tất cả những gì đã xảy ra là chúng tôi đã tạo một mảng mới và thêm

  • vào từng mục trong mảng ban đầu.

    Điều tuyệt vời về bản đồ là nó phù hợp hoàn hảo với React (và nó được tích hợp vào JavaScript). Vì vậy, trong thành phần con của chúng ta ở trên, chúng ta đã ánh xạ các tên, bọc mỗi tên trong một cặp thẻ

  • và lưu nó vào biến listItems của chúng ta. Sau đó, phương thức kết xuất của chúng tôi trả về một danh sách không có thứ tự với tất cả bạn bè của chúng tôi.

    Hãy để xem xét một ví dụ nữa trước khi chúng ta ngừng nói về đạo cụ. Điều quan trọng là phải hiểu rằng bất cứ nơi nào dữ liệu sống là nơi chính xác mà bạn muốn thao tác dữ liệu đó. Điều này giữ cho nó đơn giản để lý do về dữ liệu của bạn. Tất cả các phương thức getter / setter cho một phần dữ liệu nhất định sẽ luôn nằm trong cùng một thành phần nơi dữ liệu đó được xác định. Nếu bạn cần thao tác một số phần dữ liệu bên ngoài nơi dữ liệu tồn tại, bạn sẽ chuyển phương thức getter / setter vào thành phần đó làm đạo cụ. Hãy cùng xem một ví dụ như thế.

    lớp FriendsContainer mở rộng React.Component {
      constructor (đạo cụ) {
        siêu (đạo cụ)
    this .state = {
          tên: 'Tyler McGinnis',
          bạn bè: [
            'Jake Lingwall',
            'Sarah Drasner',
            'Merrick Christensen'
          ],
        }
    this .addFriend = this.addFriend.bind (this)
      }
      addFriend (bạn bè) {
        this .setState ((bang) => ({
          bạn bè: state.friends.concat ([bạn bè))
        }))
      }
      kết xuất () {
        trở về (
          
            

    Tên: {this.state.name}                              )   } }

    . Lưu ý rằng trong phương thức addFriend của chúng tôi, chúng tôi đã giới thiệu một cách mới để gọi setState. Thay vì truyền cho nó một đối tượng, chúng tôi sẽ chuyển cho nó một hàm sau đó chuyển trạng thái. Bất cứ khi nào bạn đặt trạng thái mới cho thành phần của mình dựa trên trạng thái trước đó (như chúng tôi đang làm với mảng bạn bè của chúng tôi), bạn muốn truyền setState một hàm có trạng thái hiện tại và trả về dữ liệu để hợp nhất với trạng thái mới tiểu bang. Kiểm tra nó ở đây.
    lớp AddFriend mở rộng React.Component {
      constructor (đạo cụ) {
        siêu (đạo cụ)
    this .state = {
          bạn mới: ''
        }
    this .updateNewFriend = this.updateNewFriend.bind (this)
        this .handleAddNew = this.handleAddNew.bind (this)
      }
      updateNewFriend (e) {
        this .setState ({
          newFriend: e.target.value
        })
      }
      xử lýAddNew () {
        this .props.addNew (this.state.newFriend)
        this .setState ({
          bạn mới: ''
        })
      }
      kết xuất () {
        trở về (
          
            <đầu vào           gõ = "văn bản"           value = {this.state.newFriend}           onChange = {this.updateNewFriend}         />          Thêm bạn bè            )   } }
    lớp ShowList mở rộng React.Component {
      kết xuất () {
        trở về (
          
            

    Bạn bè         
                {this.props.names.map ((bạn bè) => {             trả lại
    • {bạn}           })}                     )   } }

    Bạn có thể nhận thấy mã ở trên giống như ví dụ trước, ngoại trừ bây giờ chúng tôi có khả năng thêm tên vào danh sách bạn bè của mình. Lưu ý cách tôi tạo một thành phần AddFriend mới để quản lý người bạn mới mà chúng tôi sẽ thêm.

    Lý do cho điều này là do thành phần chính (FriendContainer) không quan tâm đến người bạn mới mà bạn đã thêm, nó chỉ quan tâm đến tất cả bạn bè của bạn (toàn bộ mảng bạn bè). Tuy nhiên, vì chúng tôi tuân thủ quy tắc chỉ thao túng dữ liệu của bạn từ thành phần quan tâm đến nó, chúng tôi đã chuyển phương thức addFriend xuống thành phần AddFriend của chúng tôi dưới dạng prop và chúng tôi gọi nó với người bạn mới sau khi xử lýAddNew phương pháp được gọi là.

    Tại thời điểm này, tôi khuyên bạn nên tự mình tạo lại chức năng tương tự bằng cách sử dụng mã ở trên làm hướng dẫn khi bạn đã bị kẹt trong 3 phút 4 phút.

    Trước khi chúng tôi chuyển từ đạo cụ, tôi muốn đề cập đến hai tính năng React khác liên quan đến đạo cụ. Chúng là propTypes và defaultProps. Tôi đã thắng được rất nhiều chi tiết ở đây vì cả hai đều khá đơn giản.

    loại prop cho phép bạn kiểm soát sự hiện diện hoặc các loại đạo cụ nhất định được truyền cho thành phần con. Với propTypes, bạn có thể chỉ định rằng một số đạo cụ được yêu cầu hoặc một số đạo cụ nhất định là một loại cụ thể.

    Kể từ React 15, PropTypes không còn được bao gồm trong gói React. Bạn cần phải cài đặt riêng bằng cách chạy npm cài đặt loại prop.

    defaultProps cho phép bạn chỉ định một giá trị mặc định (hoặc sao lưu) cho các đạo cụ nhất định chỉ trong trường hợp các đạo cụ đó không bao giờ được chuyển vào thành phần.

    Tôi đã sửa đổi các thành phần của chúng tôi từ trước đến nay, bằng cách sử dụng propTypes, để yêu cầu addFriend là một chức năng và nó đã chuyển vào thành phần AddFriend. Ngoài ra, tôi cũng sử dụng defaultProps, chỉ định rằng nếu không có mảng bạn bè nào được cung cấp cho thành phần ShowList, thì nó sẽ mặc định là một mảng trống.

    nhập React từ 'Reac'
    nhập PropTypes từ 'loại prop'
    lớp AddFriend mở rộng React.Component {
      constructor (đạo cụ) {
        siêu (đạo cụ)
    this .state = {
          bạn mới: ''
        }
      }
      updateNewFriend (e) {
        this .setState ({
          newFriend: e.target.value
        })
      }
      xử lýAddNew () {
        this .props.addNew (this.state.newFriend)
        this .setState ({
          bạn mới: ''
        })
      }
      kết xuất () {
        trở về (
          
            <đầu vào           gõ = "văn bản"           value = {this.state.newFriend}           onChange = {this.updateNewFriend}         />          Thêm bạn bè            )   } }
    AddFriend.propTypes: {
      add Mới: PropTypes.func.isRequired
    }
    lớp ShowList mở rộng React.Component {
      kết xuất () {
        trở về (
          
            

    Bạn bè         
                {this.props.names.map ((bạn bè) => {             trả lại
    • {bạn}           })}                     )   } }

    ShowList.defaultProps = {
      tên: []
    }

    Được rồi, chúng tôi đã ở đoạn cuối của hướng dẫn đầu tiên này. Hãy cùng xem hướng dẫn của chúng tôi và xem những gì chúng tôi còn lại.

    JSX - Cho phép chúng tôi viết HTML giống như cú pháp được
    chuyển đổi thành các đối tượng JavaScript nhẹ.
     Virtual DOM - Một đại diện JavaScript của thực tế
    DOM.
    React.Component - Cách mà bạn tạo một thành phần mới.
     render (phương thức) - Mô tả giao diện người dùng sẽ như thế nào
    thành phần cụ thể.
    ReactDOM.render - Hiển thị thành phần React thành nút DOM.
     state - Kho dữ liệu nội bộ (đối tượng) của một thành phần.
    Constructor (this.state) - Cách thức bạn thiết lập
    trạng thái ban đầu của một thành phần.
    SetState - Một phương thức trợ giúp được sử dụng để cập nhật trạng thái của một
    thành phần và kết xuất lại giao diện người dùng
     đạo cụ - Dữ liệu được truyền cho thành phần con
    từ thành phần cha mẹ.
    PropTypes - Cho phép bạn kiểm soát sự hiện diện hoặc các loại
    đạo cụ nhất định truyền cho thành phần con.
     defaultProps - Cho phép bạn đặt đạo cụ mặc định cho thành phần của mình.
    Vòng đời thành phần
      - componentDidMount - Được kích hoạt sau khi thành phần được gắn kết
      - thành phầnWillUnmount - Được kích hoạt trước khi thành phần sẽ ngắt kết nối
      - getDerivingStateFromProps - Được kích hoạt khi thành phần gắn kết và
    Bất cứ khi nào đạo cụ thay đổi. Được sử dụng để cập nhật trạng thái của một
    thành phần khi đạo cụ của nó thay đổi
    Sự kiện
      - trong một cái nhấp chuột
      - onSubmit
      - thay đổi

    Chúng tôi rất gần!

    Vòng đời thành phần

    Mỗi thành phần bạn thực hiện sẽ có các sự kiện vòng đời riêng, hữu ích cho những việc khác nhau. Ví dụ: nếu chúng tôi muốn thực hiện một yêu cầu ajax trên kết xuất ban đầu và tìm nạp một số dữ liệu, chúng tôi sẽ làm điều đó ở đâu? Hoặc, nếu chúng tôi muốn chạy một số logic bất cứ khi nào đạo cụ của chúng tôi thay đổi, chúng tôi sẽ làm điều đó như thế nào? Các sự kiện vòng đời khác nhau là câu trả lời cho cả hai. Hãy để phá vỡ chúng.

    Ứng dụng lớp mở rộng React.Component {
      constructor (đạo cụ) {
        siêu (đạo cụ)
    this .state = {
          tên: 'Tyler McGinnis'
        }
      }
      thành phầnDidMount () {
        // Được gọi khi thành phần được gắn vào DOM
        // Tốt để thực hiện các yêu cầu AJAX
      }
      tĩnh getDerivingStateFromProps (nextProps, trướcState) {
        // Đối tượng bạn trả về từ hàm này sẽ
        // được hợp nhất với trạng thái hiện tại.
      }
      thành phầnWillUnmount () {
        // Được gọi NGAY LẬP TỨC trước khi một thành phần không được đếm
        // Tốt để dọn dẹp người nghe
      }
      kết xuất () {
        trở về (
          
            Xin chào, {this.state.name}            )   } }

    thành phầnDidMount - Được gọi một lần sau khi kết xuất ban đầu. Vì thành phần này đã được gọi khi phương thức này được gọi, nên bạn có quyền truy cập vào DOM ảo nếu bạn cần. Bạn làm điều đó bằng cách gọi this.getDOMNode (). Vì vậy, đây là sự kiện vòng đời mà bạn sẽ thực hiện các yêu cầu AJAX của mình để lấy một số dữ liệu.

    thành phầnWillUnmount - Vòng đời này được gọi ngay lập tức trước khi một thành phần không được đếm từ DOM. Đây là nơi bạn có thể làm sạch cần thiết.

    getDerivingStateFromProps - Đôi khi, bạn sẽ cần cập nhật trạng thái thành phần của mình dựa trên các đạo cụ được truyền vào. Đây là phương pháp vòng đời mà bạn đã làm điều đó. Nó sẽ được thông qua các đạo cụ và trạng thái, và đối tượng bạn trả lại sẽ được hợp nhất với trạng thái hiện tại.

    Vâng, nếu bạn mắc kẹt với tôi cho đến thời điểm này, công việc tuyệt vời. Tôi hy vọng hướng dẫn này có ích cho bạn và bây giờ bạn cảm thấy ít nhất là thoải mái với React.

    Để có cái nhìn sâu hơn về các nguyên tắc cơ bản của React, hãy xem khóa học về React Fund basicals của chúng tôi.

    Tyler McGinnis