Thẻ học React

Nhà tài trợ chuyên mục

React là một thư viện JavaScript phổ biến để xây dựng giao diện người dùng, được tạo ra và duy trì bởi Facebook. Ban đầu được phát triển như một công cụ để render các thành phần UI hiệu quả, React đã phát triển thành một hệ sinh thái cho phép tạo ra các ứng dụng web mở rộng và hiệu quả. Sử dụng khái niệm virtual DOM và luồng dữ liệu một chiều, React cung cấp cho các nhà phát triển các công cụ linh hoạt để tạo ra các giao diện tương tác, phản hồi và quản lý trạng thái ứng dụng một cách hiệu quả.

Ứng dụng thẻ học của chúng tôi bao gồm các câu hỏi phỏng vấn React được chọn lọc kỹ lưỡng với câu trả lời chi tiết sẽ chuẩn bị hiệu quả cho bạn cho bất kỳ cuộc phỏng vấn nào yêu cầu kiến thức về React. IT Flashcards không chỉ là một công cụ cho những người tìm việc - đó là một cách tuyệt vời để củng cố và kiểm tra kiến thức của bạn, bất kể kế hoạch nghề nghiệp hiện tại của bạn là gì. Sử dụng ứng dụng thường xuyên sẽ giúp bạn cập nhật với những xu hướng React mới nhất và giữ kỹ năng của bạn ở mức cao.

Thẻ học React mẫu từ ứng dụng của chúng tôi

Tải xuống ứng dụng của chúng tôi từ App Store hoặc Google Play để nhận thêm flashcard miễn phí hoặc đăng ký để truy cập vào tất cả flashcard.

JSX là gì và tại sao React lại sử dụng nó?

JSX là một phần mở rộng cú pháp cho JavaScript cho phép viết các cấu trúc HTML trực tiếp trong mã JavaScript. Đây là một trong những yếu tố cơ bản mà React.js được xây dựng dựa trên. Đó là lý do tại sao JSX lại quan trọng đến mức đó trong hệ sinh thái React.

React sử dụng JSX vì nhiều lý do:

1. Sự sạch sẽ của mã: JSX đơn giản hóa quá trình phát triển mã, cho phép các nhà phát triển đặt các cấu trúc HTML trực tiếp trong JavaScript. Không có JSX, việc tạo giao diện người dùng trong React sẽ phức tạp hơn đáng kể.

2. Dễ sử dụng: JSX khiến JavaScript giống với HTML, làm cho nó dễ sử dụng hơn cho các nhà phát triển, đặc biệt là những người đã quen với HTML.

3. Bảo mật: JSX tự động bảo vệ mã khỏi tất cả các loại tấn công, chẳng hạn như XSS (Cross-Site Scripting), thông qua việc nhúng phần tử duy nhất.

4. Hiệu suất: Mã JSX được tối ưu hóa cho hiệu suất. Nó được dịch thành cú pháp JavaScript, mà trình duyệt web hiểu nhanh hơn.

Về mặt kỹ thuật, JSX không hơn gì so với đường dẫn ngữ pháp cho hàm `React.createElement(component, props, ...children)`.

DOM ảo là gì và lợi ích của nó là gì?

DOM ảo, hoặc mô hình ảo của Document Object Model (DOM), là một khái niệm được sử dụng trong một số thư viện JavaScript, chẳng hạn như React. Đó là một bản sao nhẹ của DOM thực, được lưu trong bộ nhớ và được cập nhật độc lập với DOM thực.

Những lợi ích chính của DOM ảo là:

1. Cập nhật nhanh hơn. DOM ảo nhẹ hơn và ít hoạt động chạy qua nó hơn so với DOM thực. Do đó, các hoạt động cập nhật được thực hiện nhanh hơn.

2. Giảm tải lên DOM thực. Tất cả các thay đổi đều được xử lý đầu tiên trong DOM ảo, sau đó, thông qua một quá trình gọi là đối chiếu, các thay đổi được chọn sẽ được giới thiệu vào DOM thực. Điều này có thể tránh các cập nhật DOM nặng, thường xuyên.

3. Tối ưu hóa quá trình hiển thị. React, sử dụng DOM ảo, có thể tính toán cách hiệu quả nhất để thực hiện cập nhật trong DOM thực. Điều này giảm số lượng hoạt động cần thiết và cải thiện hiệu suất hiển thị.

4. Lập trình trở nên đơn giản hơn. Các nhà phát triển có thể lập trình như thể toàn bộ trang đang được render lại sau mỗi thay đổi. React chăm sóc tối ưu hóa quá trình sao cho chỉ có lượng công việc tối thiểu cần thiết để đồng bộ hóa DOM ảo và DOM thực được thực hiện.

Props là gì và chúng được truyền trong các component React như thế nào?

Props (từ "properties") là các thuộc tính của các thành phần trong thư viện React. Chúng được sử dụng để truyền dữ liệu từ một thành phần này sang thành phần khác, đây là dữ liệu mà một thành phần nhận từ thành phần cha và thường được truyền khi thành phần được gọi.

Props là bất biến, có nghĩa là một thành phần không nên sửa đổi các giá trị của các props mà nó nhận, nhưng chỉ nên đọc chúng.

Props được truyền theo một cách một chiều (từ trên xuống dưới), tức là từ các thành phần cha đến các thành phần con. Nó giống như truyền các thuộc tính cho các phần tử HTML.

Dưới đây là một ví dụ về cách sử dụng props:

function Welcome(props) {
  return <h1>Welcome, {props.name}</h1>;
}

function App() {
  return <Welcome name = "Christopher"/>;
}
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Trong ví dụ trên, chúng tôi tạo một thành phần `Welcome` mong đợi một props `name`. Sau đó trong thành phần `App`, chúng tôi tạo một instance của thành phần `Welcome` và truyền cho nó một props `name` với giá trị là "Christopher". Kết quả là, nơi chúng tôi sử dụng thành phần Welcome, văn bản "Welcome, Christopher" sẽ được hiển thị.

Giải thích hook useEffect là gì và nó được sử dụng để làm gì.

Hook useEffect trong React.js được sử dụng để thực hiện các hiệu ứng phụ trong các thành phần chức năng. Hiệu ứng phụ thường là các hành động không trực tiếp ảnh hưởng đến việc render của thành phần, nhưng là cần thiết cho hoạt động đúng của nó, chẳng hạn như lấy dữ liệu từ một API, xử lý bộ định thời, hoặc dọn dẹp tài nguyên.

Nó hoạt động tương tự như các phương pháp vòng đời của thành phần: componentDidMount, componentDidUpdate và componentWillUnmount trong các thành phần lớp.

Chúng ta có thể sử dụng nó trong ba biến thể khác nhau:

1. Không có đối số thứ hai: Mã được gọi sau mỗi lần render.

useEffect(() => {
  console.log('This will run after every render');
});

2. Với một mảng trống làm đối số thứ hai: Mã chỉ được gọi một lần sau lần render đầu tiên, tương tự như componentDidMount.

useEffect(() => {
  console.log('This will run only once, after the first render');
}, []);

3. Với một mảng phụ thuộc làm đối số thứ hai: Mã được chạy sau lần render đầu tiên và sau đó mỗi lần giá trị của bất kỳ phụ thuộc nào trong mảng thay đổi.

const [count, setCount] = useState(0);

useEffect(() => {
  console.log('This will run after the first render, and every time "count" changes');
}, [count]);

Tóm lại, hook useEffect cho phép thực thi hiệu ứng phụ sau hoặc trong quá trình render của các thành phần chức năng, điều này lại cho phép mã rõ ràng và dễ hiểu, trong khi đảm bảo đầy đủ chức năng.