Phản ứng các thành phần chức năng và các thành phần cổ điển

Question

Tôi đang cố gắng hiểu khi nào nên sử dụng các thành phần chức năng React so với các lớp và đọc từ docs chúng không thực sự đi sâu vào chi tiết. Bạn có thể cho tôi một số ví dụ chính về dưới đây khi bạn muốn có một tính năng cụ thể của một lớp để tạo thành một thành phần không?

Thành phần chức năng ít mạnh mẽ hơn nhưng đơn giản hơn và hoạt động như thành phần lớp chỉ với một phương thức render() đơn. Trừ khi bạn cần các tính năng chỉ có sẵn trong một lớp học, chúng tôi khuyên bạn nên sử dụng các thành phần chức năng thay thế.

Answer 1

Bạn chỉ cần một thành phần class khi bạn a) cần nhà nước thành phần hoặc b) cần các phương pháp vòng đời như componentDidMount, vv

Answer 2

1. Khi chúng ta sử dụng từng loại linh kiện?

Nếu chúng ta sử dụng Redux, sẽ có hai loại thành phần:

• Components presentational: mối quan tâm về giao diện người dùng
• Linh kiện container: quản lý nhà nước

Redux của người sáng tạo Dan Abramov viết một bài báo Presentational and Container Components:

Thành phần trình bày được viết dưới dạng thành phần chức năng trừ khi chúng cần trạng thái, móc vòng đời hoặc tối ưu hóa hiệu suất.

Mặc dù chúng tôi không sử dụng Redux. Chúng ta cũng có thể tách các thành phần thành các thành phần trình bày và các thành phần Container.

• Thành phần sử dụng Thành phần chức năng và chỉ liên quan đến giao diện người dùng.
• Thành phần vùng chứa sử dụng Các thành phần lớp và mối quan tâm về trạng thái và hành vi. lợi ích

2. Chức năng Components'

bài viết

Cory Nhà React Stateless Functional Components: Nine Wins You Might Have Overlooked cho tôi biết những ưu điểm chức năng Linh kiện của, Linh kiện chức năng là hơn:

• đơn giản
• có thể đọc được
• kiểm chứng

3. Giới hạn của các thành phần chức năng '

Nhưng các thành phần chức năng là không trạng thái, là giới hạn của nó.

Nhưng may thay, phần lớn thời gian, chúng tôi không cần trạng thái.

4. Các thành phần chức năng Enforced Best Practices

thành phần chức năng không quốc tịch có ích cho dumb/presentational components. Các thành phần trình bày tập trung vào giao diện người dùng thay vì hành vi, vì vậy điều quan trọng là tránh sử dụng trạng thái trong các thành phần trình bày. Thay vào đó, trạng thái nên được quản lý bởi các thành phần “container” cấp cao hơn, hoặc thông qua Flux/Redux/etc. Các thành phần chức năng không quốc tịch không hỗ trợ các phương thức của nhà nước hoặc vòng đời. Đây là một điều tốt. Tại sao? Bởi vì nó bảo vệ khỏi sự lười biếng.

Hãy xem, bạn luôn muốn thêm trạng thái vào thành phần thuyết trình khi bạn đang vội. Đó là một cách nhanh chóng để hack trong một tính năng. Vì các thành phần chức năng không trạng thái không hỗ trợ trạng thái cục bộ, bạn không thể dễ dàng tấn công ở một số trạng thái trong giây phút lười biếng. Do đó, các thành phần chức năng không trạng thái theo chương trình thực thi việc giữ thành phần tinh khiết. Bạn buộc phải đặt quản lý nhà nước nơi nó thuộc về: trong các thành phần chứa cấp cao hơn.

Answer 3

chức năng Component

• Được sử dụng để trình bày dữ liệu tĩnh.
• Không thể xử lý dữ liệu lấy
• Dễ viết

Ví dụ:

const Foo =()=> 
{ 
    return <Text>Hi there!</Text> 
} 

Component Lớp

• Được sử dụng cho nguồn năng động của dữ liệu
• Handles bất kì dữ liệu có thể thay đổi (lấy dữ liệu, sự kiện người dùng, vv)
• Nhiều mã để viết

Ví dụ:

class Foo extends Component { 

render(){ 
return <Text>Hi There!</Text> 
    } 
}