Các thành phần React

Giới thiệu ngắn gọn về các thành phần React

Một thành phần là một phần riêng biệt của giao diện. Ví dụ: trong một trang chủ blog điển hình, bạn có thể tìm thấy thành phần Thanh bên và thành phần Danh sách bài đăng trên blog. Lần lượt chúng được cấu tạo bởi các thành phần, vì vậy bạn có thể có một danh sách các thành phần của bài đăng trên Blog, mỗi thành phần cho mỗi bài đăng trên blog và mỗi thành phần có các thuộc tính đặc biệt của riêng nó.

A react component

React làm cho nó rất đơn giản: mọi thứ đều là một thành phần.

Ngay cả các thẻ HTML thuần túy cũng là thành phần của riêng chúng và chúng được thêm vào theo mặc định.

2 dòng tiếp theo tương đương thì cũng làm tương tự. Một vớiJSX, một mà không, bằng cách tiêm<h1>Hello World!</h1>thành một phần tử có idapp.

import React from 'react'
import ReactDOM from 'react-dom'
ReactDOM.render(<h1>Hello World!</h1>, document.getElementById(‘app’))
ReactDOM.render(
React.createElement(‘h1’, null, ‘Hello World!’),
document.getElementById(‘app’)
)

Xem,React.createElementđã cho chúng tôi biết một API để tạoh1thành phần. Thay đổi tham số đầu tiên của phương thức đó cho phép bạn tạo các thẻ khác nhau. Tham số thứ hai là một đối tượng của đạo cụ, trong trường hợp này, chúng tôi không cần bất kỳ tham số nào, vì vậy chúng tôi chuyểnnull.

Đây là cách chúng ta có thể sử dụng React để làm việc với các thành phần HTML được tích hợp sẵn, nhưng bạn sẽ nhanh chóng phát triển nhanh hơn chúng. Điều mà React vượt trội là cho phép chúng ta tạo giao diện người dùng bằng cách tạo các thành phần tùy chỉnh.

Các thành phần tùy chỉnh

Có 2 cách để xác định một thành phần trong React.

Một thành phần chức năng:

const BlogPostExcerpt = () => {
  return (
    <div>
      <h1>Title</h1>
      <p>Description</p>
    </div>
  )
}

Một thành phần lớp:

import React, { Component } from 'react'
class BlogPostExcerpt extends Component {
render() {
return (
<div>
<h1>Title</h1>
<p>Description</p>
</div>
)
}
}

Cho đến gần đây, các thành phần lớp là cách duy nhất để xác định một thành phần có trạng thái riêng của nó và có thể truy cập các phương thức vòng đời để bạn có thể thực hiện mọi việc khi thành phần được hiển thị, cập nhật hoặc xóa lần đầu tiên.

React Hooks đã thay đổi điều này, vì vậy các thành phần chức năng của chúng ta hiện đang mạnh hơn bao giờ hết và tôi tin rằng chúng ta sẽ thấy ngày càng ít thành phần lớp hơn trong tương lai, mặc dù nó vẫn sẽ là cách hoàn toàn hợp lệ để tạo các thành phần.

Ngoài ra còn có một cú pháp thứ ba sử dụngES5cú pháp, không có các lớp:

import React from 'react'
React.createClass({
render() {
return (
<div>
<h1>Title</h1>
<p>Description</p>
</div>
)
}
})

Bạn sẽ hiếm khi thấy điều này trong thời hiện đại,> ES6cơ sở mã.

Tải xuống miễn phí của tôiSổ tay React

Các thành phần React

Giới thiệu ngắn gọn về các thành phần React

Các thành phần tùy chỉnh

Các hướng dẫn về phản ứng khác: