Interview React Developer thì hỏi gì?
Chuyện gì xảy ra khi gọi setState ?
Đầu tiên, object được truyền trong setState sẽ được merge với state hiện tại của component, dựa trên sự thay đổi của object này, UI được update với state mới.
Để làm được chuyện này, React sẽ dựng một cây React Element mới, so sánh sự khác nhau của cây element mới và cây element trước đó, React biết được chính xác chỉ cần update phần UI nào đã bị thay đổi.
Sự khác nhau giữa Element và Component trong React?
React Element ám chỉ những gì thấy trên màn hình.
React component là một function hoặc class có hoặc không có input và sẽ trả về một React element.
Khi nào thì sử dụng Class Component và Functional Component
Nếu component có state và các phương thức của lifecycle, sử dụng Class Component, ngược lại dùng functional component
Ref trong React dùng để làm gì
Ref để truy cập trực tiếp đến DOM sau khi render
<input type="text" ref={(input) => this.input = input} />Key trong React là gì
Key giúp React theo dõi sự thay đổi của một item trong list. Tại sao thêm key? để tối ưu performance, giúp React tìm nhanh tới element đó khi cần.
{this.state.todoItems.map((task, uid) => {
return
<li key={uid}>{task}</li>
}
)}Sự khác nhau giữa controlled component và uncontrolled component
Controlled Component: prop hoặc state của component được gán cho giá trị DOM
<input type='text' value={this.state.username} onChange={this.updateUsername} />Uncontrolled Component: giá trị của DOM thì do DOM quản
<input type='text' ref={(input) => this.input = input} />Để gọi AJAX, sử dụng sự kiện nào của lifecycle?
componentDidMount
shouldComponentUpdate dùng để làm gì
shouldComponentUpdate cho phép can thiệp quá trình update UI của component và các component con của nó. Nếu return true thì update, ngược lại false
Tại sao nên sử dụng React.Children.map() thay vì props.children.map()
props.children chưa chắc lúc nào cũng là array. Ví dụ
<Parent>
<h1>Welcome.</h1>
</Parent>Nếu sử dụng props.children.map trong Parent sẽ bị lỗi vì props.children là một object không phải array.
<Parent>
<h1>Welcome.</h1>
<h2>props.children will now be an array</h2>
</Parent>React.Children.map cho phép props.children là array hoặc object đều được.
Events được xử lý trong React như thế nào?
Các hàm xử lý event trong React sẽ được truyền vào một instance của SyntheticEvent, SyntheticEvent cũng giống như những native event bình thường của Browser trừ việc nó có thể làm việc trên tất cả các trình duyệt.
React không attach event vô các child node, mà sẽ lắng nghe tất cả các event sử dụng 1 event listener duy nhất, Với mục đích là để tăng performance và React không cần phải update lại event listener khi update DOM.
Sự khác nhau giữa createElement và cloneElement
createElement là để tạo element, cloneElement copy element và đưa vào các props mới.
Argument thứ 2 của setState dùng để làm gì
callback function, function sẽ chạy sau khi component được render lại với state mới.
setState là một phương thức bất đồng bộ (asynchronous)
Đoạn code sau sai ở đâu
this.setState((prevState, props) => {
return { streak: prevState.streak + props.count }
})Không sai gì cả, ít người biết rằng khi setState có thể truyền vào previous state.
Bài viết gốc được đăng tải tại VuiLapTrinh
Có thể bạn quan tâm:
- Tại sao hầu hết các Scrum Master đều thất bại
- [AI Interview] 12 câu hỏi phỏng vấn Deep Learning siêu hay không thể bỏ qua
- HTML Questions – Front End Interview Handbook
Xem thêm các tuyển react developer hấp dẫn tại Station D
Bạn có thể quan tâm
- Hiểu về trình duyệt – How browsers work(Công Nghệ)
- Applicant Tracking System là gì? ATS hoạt động ra sao(Cẩm Nang Tuyển Dụng)
- Xây dựng hệ thống referral trong Laravel(Công Nghệ)
