Sự khác biệt giữa thành phần phản ứng và nguyên tố phản ứng

Question

Sự khác biệt giữa thành phần phản ứng và nguyên tố phản ứng là gì? Tài liệu đề cập đến cả hai nhưng không đi sâu vào chi tiết, một số phương pháp yêu cầu các thành phần, các yếu tố khác ...

Answer 1

Xem xét thành phần là Lớp và Phần tử làm ví dụ. Đó là nó!

Answer 2

Để giải thích thêm về câu trả lời, Phần tử phản ứng không có bất kỳ phương pháp nào và không có gì trên nguyên mẫu. Điều này cũng làm cho chúng nhanh.

"Một ReactElement là một ánh sáng, quốc tịch, bất di bất dịch, đại diện ảo của một phần tử DOM" - https://facebook.github.io/react/docs/glossary.html#react-elements

Một phản ứng thành phần render() hàm trả về một cây DOM của phản ứng yếu tố đằng sau hậu trường (Đây là DOM ảo btw). Có một số ánh xạ phức tạp và logic khác có liên quan, nhưng về cơ bản các phần tử React này ánh xạ tới các phần tử DOM.

Bạn cũng có thể tạo ra một phần tử trực tiếp React.createElement(arg) nơi arg có thể là một tên thẻ html, hoặc một lớp Component Phản ứng.

Answer 3

Phản ứng Elements

Một Phản ứng phần tử chỉ là một đồng bằng cũ Javascript Object mà không phương pháp riêng. Nó có về cơ bản bốn thuộc tính:

• type, một String đại diện cho một thẻ HTML hoặc một tài liệu tham khảo đề cập đến một Phản ứng Component
• key, một String để nhận diện một Phản ứng phần tử
• ref, một tham chiếu đến truy cập một trong hai nút cơ bản DOM hoặc Phản ứng phần Instance)
• props (tính Object)

Một phần tử phản ứng không phải là một thể hiện của một thành phần phản ứng. Nó chỉ là một "mô tả" đơn giản về cách thể hiện thành phần phản ứng (hoặc tùy thuộc vào type một thẻ HTML) được tạo ra sẽ trông như thế nào.

Phần tử phản ứng mô tả Thành phần phản ứng không biết nút DOM nào cuối cùng được hiển thị - liên kết này được trừu tượng hóa và sẽ được giải quyết trong khi hiển thị.

Phần tử phản ứng có thể chứa các phần tử con và do đó có khả năng tạo thành các cây phần tử đại diện cho cây DOM ảo.

Phản ứng Linh kiện và Phản ứng Instances Component

Một tùy chỉnh Phản ứng Component hoặc là tạo ra bởi React.createClass hoặc bằng cách mở rộng React.Component (ES2015). Nếu một thành phần React được khởi tạo, nó mong đợi một propsObject và trả về một cá thể, được gọi là một thể hiện thành phần phản ứng.

Thành phần phản ứng có thể chứa trạng thái và có quyền truy cập vào các phương pháp React Lifecycle. Nó phải có ít nhất một phương thức render, trả về một phần tử React (-tree) khi được gọi. Xin lưu ý rằng bạn không bao giờ tự xây dựng các thành phần React Component nhưng hãy để React tạo ra nó cho bạn.

Answer 4

A React Element là những gì bạn sẽ coi là một phần tử html cơ bản (phần chính xác). Nó chỉ là một cách để tạo ra phần tử mà không sử dụng định dạng jsx gây tranh cãi nhiều.

A React Component là những gì bạn có thể xem là đối tượng. Nó có các phương thức của nó, hỗ trợ React lifecycles và thường không thể sử dụng được (ít nhất là không tìm thấy bất kỳ tái sử dụng nào, chào mừng bạn đến các ví dụ). Nó nhất thiết cần phải có một hàm render.

A React Class là thứ bạn gọi là lớp học. Chức năng khôn ngoan React Class và React Component giống nhau. Cú pháp duy nhất là thay đổi thực sự, như React Component được dựa trên ES6 syntax. Một thay đổi lớn khác là sự ràng buộc mặc định của các hàm này không còn được hỗ trợ trừ khi sử dụng các hàm mũi tên. Mixins cũng không còn được hỗ trợ từ ES6.

Answer 5

React Element - Đây là một đối tượng đơn giản mô tả nút DOM và các thuộc tính hoặc thuộc tính của nó mà bạn có thể nói. Nó là một đối tượng mô tả không thay đổi và bạn không thể áp dụng bất kỳ phương pháp nào trên đó.

Ví dụ -

<button class="blue"></button> 

React Component - Nó là một hàm hoặc lớp mà chấp nhận một đầu vào và trả về một yếu tố phản ứng. Nó phải giữ tham chiếu đến các nút DOM của nó và đến các thể hiện của các thành phần con.

const SignIn =() => (
    <div> 
    <p>Sign In</p> 
    <button>Continue</button> 
    <button color='blue'>Cancel</button> 
    </div> 
); 

Answer 6

Có ba loại có liên quan của điều liên quan ở đây, với tên riêng của họ:

• Components
• trường Component
• Elements

này là hơi bất ngờ , vì nếu bạn quen với các khung giao diện người dùng khác, mi Ght hy vọng rằng sẽ chỉ có hai loại điều, tương ứng với các lớp học (như Widget) và các trường hợp (như new Widget()). Đó không phải là trường hợp trong React; các cá thể thành phần là không phải là giống như các phần tử, cũng không có mối quan hệ một-một giữa chúng. Để minh họa điều này, hãy xem xét mã này:

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

class MyComponent extends React.Component { 
    constructor(props) { 
    super(props); 
    console.log('This is a component instance:', this); 
    } 

    render() { 
    const another_element = <div>Hello, World!</div>; 
    console.log('This is also an element:', another_element); 
    return another_element; 
    } 
} 

console.log('This is a component:', MyComponent) 

const element = <MyComponent/>; 

console.log('This is an element:', element); 

ReactDOM.render(
    element, 
    document.getElementById('root') 
); 

Trong đoạn mã trên:

• MyComponent (lớp tự) là một phần
• element là một Element. Đó là không phải một phiên bản của MyComponent; thay vào đó, nó chỉ đơn giản là một mô tả của cá thể thành phần được tạo ra. Đó là một đối tượng với các thuộc tính key, props, ref và type. Tại đây, key và ref là null, props là một đối tượng trống và type là MyComponent.
• Một ví dụ của MyComponent được tạo (và, trong ví dụ trên, tự ghi lại từ hàm tạo) khi element được hiển thị.
• another_element cũng là một yếu tố, và có key, ref, props và type thuộc tính giống như element không - nhưng lần này giá trị của type là chuỗi "div".

Lý do thiết kế tại sao React có ba khái niệm riêng biệt này được khám phá chi tiết trong bài đăng trên blog phản hồi của nhóm phản ứng React Components, Elements, and Instances, mà tôi khuyên bạn nên đọc. Cuối cùng, cần lưu ý rằng trong khi các tài liệu chính thức nghiêm ngặt về việc sử dụng thuật ngữ "thành phần" để chỉ một hàm hoặc lớp và "cá thể thành phần" để tham chiếu đến một cá thể, các nguồn khác không nhất thiết phải tuân theo điều này thuật ngữ; bạn sẽ thấy "thành phần" được sử dụng (không chính xác) có nghĩa là "thành phần thể hiện" khi đọc câu trả lời Stack Overflow hoặc các cuộc thảo luận trên GitHub.

Answer 7

Thành phần là một nhà máy để tạo thành phần.