Làm thế nào để chuẩn bị phỏng vấn React.js vào năm 2022
09/03/2022 04:51
React.js là thư viện JavaScript phổ biến nhất để xây dựng giao diện người dùng. Theo Glassdoor, mức lương trung bình trên toàn quốc cho một Nhà phát triển React là $ 81,765 tại Hoa Kỳ . Trong bài viết này, tôi sẽ liệt kê các chủ đề có thể giúp bạn chuẩn bị cho Phỏng vấn React.js, Và tôi sẽ chia sẻ các mẹo và tài nguyên, vì vậy hãy chú ý theo dõi cho đến cuối.
1. Virtual DOM là gì?
DOM ảo (VDOM) là một khái niệm lập trình trong đó một biểu diễn lý tưởng hay còn gọi là “ảo” của giao diện người dùng được lưu trong bộ nhớ và được đồng bộ hóa với DOM “thực” bởi một thư viện như ReactDOM. Quá trình này được gọi là reconciliation.
2. JSX là gì?
JSX là viết tắt của JavaScript XML. Nó cho phép chúng ta viết JavasScript với cú pháp giống HTML, Không phải HTML cũng không phải Chuỗi! mà không sử dụng phương thức createElement () hoặc appendChild ().
3. Trạng thái và Vòng đời.
Nói tóm lại, State giống như một biến trong phạm vi một hàm, đối tượng trạng thái là nơi bạn lưu trữ các giá trị thuộc tính thuộc về thành phần, Khi đối tượng trạng thái thay đổi, thành phần sẽ hiển thị lại.
Thành phần trạng thái trong lớp
class Person extends React.Component {
constructor(props) {
super(props);
this.state = {name: "Andrew"};
}
render() {
return (
<div>
<h1>{this.state.name}</h1>
</div>
);
}
}Trạng thái trong các thành phần chức năng
const Person = () => {
const [name, setName] = useState('Andrew')
return (
<div>
<h1>{name}</h1>
</div>
);
}
export default Person;4. Vòng đời Hooks
Mỗi thành phần trong React có một vòng đời mà bạn có thể theo dõi và thao tác trong ba giai đoạn chính của nó. gắn , cập nhật và ngắt kết nối .
- componentDidMount ()
- componentDidUpdate ()
- componentWillUnmount ()
Có những phương pháp vòng đời khác nhưng đây là những phương pháp được sử dụng phổ biến nhất. Bạn có thể truy cập tài liệu phản ứng để đọc thêm về các phương pháp vòng đời
Prop là gì?
Props là một cách để truyền dữ liệu từ thành phần mẹ sang thành phần con. Props được chuyển đến các thành phần thông qua các thuộc tính HTML.
5. React Hooks
Hooks là một bổ sung mới cho React 16.8 . Họ cho phép bạn sử dụng trạng thái và các tính năng khác của React mà không cần viết một lớp. Hoàn toàn có thể chấp nhận được vào năm 2022 để viết các Ứng dụng React được xây dựng với các hook. Hooks làm cho mã dễ hiểu hơn đối với con người và máy móc.
6. Các thành phần được kiểm soát.
Trong HTML, các phần tử biểu mẫu, chẳng hạn như <input>, <textarea>và <select>thường duy trì trạng thái của riêng chúng và cập nhật nó dựa trên đầu vào của người dùng. Trong React, trạng thái có thể thay đổi thường được giữ trong thuộc tính trạng thái của các thành phần và chỉ được cập nhật với setState().
7. Khi nào thì sử dụng Context?
Context được thiết kế để chia sẻ dữ liệu có thể được coi là "toàn cầu" cho một cây các thành phần React, chẳng hạn như người dùng, chủ đề hoặc ngôn ngữ ưa thích hiện tại đã được xác thực. Ví dụ: trong đoạn mã dưới đây, chúng tôi xâu chuỗi thủ công thông qua một "theme" để tạo kiểu cho thành phần Button.
const ThemeContext = createContext('light')
function App() {
return (
<div className="App">
<ThemeContext.Provider value={'red'}>
<Content/>
</ThemeContext.Provider>
</div>
);
}
function Content(){
const theme = useContext(ThemeContext)
return(
<div className={theme}>
<h2>Hello, World</h2>
</div>
);
}
export default App;
Trên đây là một số thông tin về câu hỏi phỏng vấn ReactJS bạn có thể tham khảo thêm để ứng dụng vào các dự án sắp tới của mình! Bạn cũng có thể tìm hiểu thêm thông tin về khóa học ReactJS hoặc các khóa học lập trình khác của Viện công nghệ thông tin T3H.
