Bộ câu hỏi phỏng vấn ReactJs phần 7

Làm sao để React build ở chế độ Production và chúng có lợi ích như thế nào?


Thông thường, bạn sẽ sử dụng phương thức DefinePlugin của Webpack để đặt NODE_ENV thành phiên bản Production. Điều này sẽ loại bỏ mọi thứ như xác thực propType (propType validation) và các warning bổ sung.

Trên hết, nó cũng minify code của bạn vì React sử dụng loại bỏ code chết của Uglify để loại bỏ code chỉ dành cho development và các comment, điều này sẽ giảm đáng kể kích thước gói của bạn.

ReactDOM là gì?


ReactDOM là một API React cấp cao để hiển thị một React element vào DOM, thông qua phương thức ReactDOM.render.

Một số hạn chế của những điều bạn không nên làm trong phương thức render của Component là gì?


Bạn không thể sửa đổi state của Component (với setState), cũng như không tương tác với trình duyệt (làm điều đó trong componentDidMount). render phải là một pure function

Sự khác biệt giữa "smart" component và "dumb" component là gì?


  • Các smart component quản lý state của chúng hoặc trong môi trường Redux được kết nối với kho lưu trữ Redux.
  • Các dumb component được điều khiển hoàn toàn bởi các props của chúng được truyền từ cha mẹ của chúng và không duy trì state của riêng chúng.

Kể tên một số middleware của Redux mà bạn biết?


  • Redux Thunk
  • Redux Promise
  • Redux Saga

Vì sao phải dùng shouldComponentUpdate()?


Nó được sử dụng vì lý do hiệu suất, ví dụ nếu người triển khai một Component biết chắc chắn rằng thay đổi thuộc tính cụ thể không cần re-render, chúng có thể trả về false từ shouldComponentUpdate() và không cần render.

PureComponent trong React là gì?


PureComponent hoàn toàn giống như Component ngoại trừ việc nó xử lý phương thức shouldComponentUpdate cho bạn.

Khi props hoặc state thay đổi, PureComponent sẽ thực hiện một phép so sánh (shallow comparison) trên cả props và state. Mặt khác, Component sẽ không so sánh các props và state hiện tại với state tiếp theo. Do đó, Component sẽ hiển thị lại theo mặc định bất cứ khi nào shouldComponentUpdate được gọi.

Sự khác biệt giữa event handling của HTML và React là gì?


Dưới đây là một số khác biệt giữa event handling của HTML và React:

  1. Trong HTML, tên event phải ở dạng chữ thường
<button onclick="activateLasers()"></button>

Trong khi trong ReactJS, nó tuân theo quy ước camelCase.

<button onClick={activateLasers}>
  1. Trong HTML, bạn có thể trả về false để ngăn hành vi mặc định.
<a href="#" onclick="console.log('The link was clicked.'); return false" />

Trong khi trong ReactJS, bạn phải gọi preventDefault rõ ràng.

function handleClick(e) {
  e.preventDefault();
  console.log("The link was clicked.");
}

Làm cách nào để liên kết các phương thức hoặc event handler trong lệnh callback JSX?


Có 3 cách khả thi để làm được việc này

1. Binding in Constructor:

Trong các lớp JavaScript, các phương thức mặc định không bị liên kết. Điều tương tự này áp dụng cho các event handler ReactJS được định nghĩa là các class method. Thông thường, chúng ta liên kết chúng trong constructor như sau,

constructor(props) {
   super(props);
   this.handleClick = this.handleClick.bind(this);
}
handleClick() {
// Perform some logic
}

2. Public class fields syntax

Nếu bạn không thích sử dụng phương pháp liên kết trên thì cú pháp Public class fields có thể được sử dụng để liên kết chính xác các lệnh callback:

handleClick = () => {
  console.log("this is:", this);
};
<button onClick={this.handleClick}>Click me</button>;

3. Arrow functions:

<button onClick={e => this.handleClick(e)}>Click me</button>

Ưu điểm của React so với VueJS là gì?


React có những ưu điểm sau so với Vue:

  • Mang lại sự linh hoạt hơn trong việc phát triển các ứng dụng lớn.
  • Dễ dàng hơn để test.
  • Thích hợp cho việc tạo ứng dụng di động.
  • Đã có sẵn nhiều thông tin và giải pháp khi gặp vấn đề (cộng đồng sử dụng lớn).

Nên học vue hay react

Có nên cập nhật state trực tiếp không, tại sao?


Nếu bạn cố gắng cập nhật state trực tiếp thì nó sẽ không re-render Component.

//Wrong
this.state.message = "Hello kungfutech.edu.vn";

Thay vào đó hãy sử dụng phương thức setState(). Nó lên lịch cập nhật cho đối tượng state của một Component. Khi state thay đổi, Component phản hồi bằng cách render:

//Correct
this.setState({message: ‘Hello kungfutech.edu.vn’});

Lưu ý: Nơi duy nhất bạn có thể gán state là constructor.

Avatar Techmely Team
VIẾT BỞI

Techmely Team