Cách thức hoạt động trong ReactJS Hooks

MVT
Đang cập nhật

1. React là gì?

React là một thư viện frontend Javascript mã nguồn mở được sử dụng để xây dựng giao diện người dùng đặc biệt dành cho những ứng dựng một trang (single page applications). Nó được sử dụng để xử lý các lớp hiển thị cho cả ứng dụng web và thiết bị di động. React được phát triển bởi Jordan Walker, một kỹ sư phần mềm của FB. React lần đầu tiên được triển khai trên News Feed của Facebook vào năm 2011 và trên Instagram vào năm 2012.

2. Tính năng chính trong React là gì?

Các tính năng chính của React là:

  • Sử dụng DOM ảo (VirtualDOM) thay vì DOM thực (RealDOM) để quyết định có render hay không, vì nếu sử dụng DOM thực, chi phí thao tác rất tốn kém.
  • Hổ trợ server-side rendering
  • Tuân theo luồng dữ liệu một chiều hoặc ràng buộc dữ liệu.
  • Sử dụng các thành phần giao diện người dùng có thể tái sử dụng / có thể kết hợp để phát triển chế độ xem.

3. JSX là gì?

JSX là một phần mở rộng cú pháp giống XML của ECMAScript (từ viết tắt của JavaScript XML). Về cơ bản, nó chỉ cung cấp cú pháp cho hàm React.createElement (), cho chúng ta khả năng diễn đạt của JavaScript cùng với HTML giống như cú pháp mẫu.

Trong ví dụ dưới đây, văn bản bên trong thẻ <h1> được trả về dưới dạng hàm JavaScript cho hàm hiển thị.

class App extends React.Component {
  render() {
    return(
      <div>
        <h1>{'Welcome to React world!'}</h1>
      </div>
    )
  }
}

4. Điểm khác biệt giữa Element và Component?

Một Element là một đối tượng thuần mô tả những gì mà bạn muốn xuất hiện trên màn hình dưới dạng các Node DOM hoặc những thành phần khác. Element có thể chứa các Element khác trong props của chúng. Việc tạo ra các Element trong React rất nhẹ và khi nó đã được tạo ra thì sẽ không bao giờ bị thay đổi.

Đại diện object của React Element sẽ như sau :

const element = React.createElement(
  'div',
  {id: 'login-btn'},
  'Login'
)

Hàm React.createElement() ở trên trả về một đối tượng:

{
  type: 'div',
  props: {
    children: 'Login',
    id: 'login-btn'
  }
}

và cuối cùng, nó render đển DOM bằng cách sử dụng ReactDOM.render() : 

<div id='login-btn'>Login</div>

Với Component có thể được khai báo bằng vài cách khác nhau. Nó có thể được sử dụng bằng class thông qua phương thức render(). Ngoài ra, trong những trường hợp đơn giản, nó có thể được định nghĩa như một hàm. Trong cả hai trường hợp, nó lấy props làm đầu vào và trả về cây JSX làm đầu ra:

const Button = ({ onLogin }) =>
  <div id={'login-btn'} onClick={onLogin}>Login</div>

sau đó, JSX được chuyển sang cây hàm React.createElement():

const Button = ({ onLogin }) => React.createElement(
  'div',
  { id: 'login-btn', onClick: onLogin },
  'Login'
)

6. Làm như thế nào để tạo component trong React?

Có hai cách có thể để tạo một thành phần.

  1. Function Component : Đây là cách đơn giản nhất để tạo một component. Đó là các hàm JavaScript thuần chấp nhận đối tượng props làm tham số đầu tiên và trả về các phần tử React:
function Greeting({ message }) {
  return <h1>{`Hello, ${message}`}</h1>

}
  1. Class Component: Bạn cũng có thể sử dụng lớp ES6 để định nghĩa một thành phần. Thành phần hàm trên có thể được viết dưới dạng
class Greeting extends React.Component {
  render() {
    return <h1>{`Hello, ${this.props.message}`}</h1>
  }
}

7. Khi nào sử dụng nên Class Component, và Function Component?

Nếu một component cần state hoặc lifecircle method thì ta sử dụng class Component, còn lại ta nên sử dụng function component. Tuy nhiên, từ phiên bản 16.8 tở về sau, khi có sự bổ sung thêm Hooks, bạn có thể sử dụng state và lifecircle method cũng như những đặc tính khác nên bạn có thể thay thế hoàn toàn class Component bằng function component

8. PureComponent Trong React là gì?

React.PureComponent hoàn toàn giống với React.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 nông 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 props và state tiếp theo. Do đó, Conponent sẽ hiển thị lại theo mặc định bất cứ khi nào shouldComponentUpdate được gọi.

9. State trong React là gì?

State của một component là một object lưu giữ thông tin có thể thay đổi trong vòng đời của một component. Chúng ta nên luôn cố gắng làm cho state đơn giản nhất có thể và giảm thiểu số lượng các thành phần state.

class User extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      message: 'Welcome to React world'
    }
  }

  render() {
    return (
      <div>
        <h1>{this.state.message}</h1>
      </div>
    )
  }
}

State tương tự như props, nhưng nó là private và được kiểm soát hoàn toàn bởi component chứa nó. Tức là, nó không thể truy cập được đối với bất kỳ thành phần nào khác ngoài thành phần sở hữu và thiết lập nó.

9. Props trong React là gì?

Props là một thuộc tính được đưa vào trong component. Chúng là các giá trị đơn lẻ hoặc các đối tượng chứa một tập hợp các giá trị được chuyển cho các component khi tạo bằng cách sử dụng quy ước đặt tên tương tự như các thuộc tính thẻ HTML.

Mục đích chính của props trong React là cung cấp chức năng thành phần sau:

  1. Chuyển dữ liệu tùy chỉnh đến thành phần.
  2. Thay đổi trạng thái kích hoạt.
  3. Sử dụng thông qua this.props.reactProp bên trong phương thức render() của component.

Ví dụ: một phần tử có thuộc tính reactProp:

<Element reactProp={'1'} />

Tên reactProp này (hoặc bất cứ thứ gì bạn nghĩ ra) sau đó sẽ trở thành một thuộc tính được gắn với đối tượng đạo cụ gốc của React, đối tượng này ban đầu đã tồn tại trên tất cả các thành phần được tạo bằng thư viện React.

props.reactProp

10. Sự khác biệt giữa props và state?

Cả props và state đều là nhựng đổi tượng thuần trong JS. Trong khi cả 2 đều có chức năng lưu trữ thông tin ảnh hưởng đến kết quả hiển thị, thì chúng khác nhau về chức năng của chúng đối với component. props được truyền đến component như một tham số trong hàm, còn state chỉ được quản lý bên trong một component tương tự như một biến được khai báo bên trong hàm đó.

11. Tại sao chúng ta không nên update state trực tiếp?

Nếu bạn cố gắng cập nhật trạng thái trực tiếp thì nó sẽ không hiển thị lại component.

//Wrong
this.state.message = 'Hello world'

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 component. Khi state thay đổi, component phản hồi bằng cách re-render lại.

//Correct
this.setState({ message: 'Hello World' })

Lưu ý: Bạn có thể gán trực tiếp đến đối tượng state hoặc bên trong constructor

12. Mục đích của callback function như một tham số của setState() là gì?

Callback function là một hàm gọi lại khi setState kết thúc và component bắt đầu được render lại. Vì setState() bất đồng bộ nên nó sử dụng callback function cho bất kỳ hoạt động thay đổi state nào.

Lưu ý : Bạn nên sử dụng phương thức lifecircle method hơn là callback function

setState({ name: 'John' }, () => console.log('The name has updated and component re-rendered'))

13. Sự khác biệt giữa React và HTML trong quá trình xử lý sự kiện là gì?

  1. Trong HTML, tên sự kiện viết thường :
<button onclick='activateLasers()'>

Trái lại, trong React viết theo ký tự lạc đà : 

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

Ngược lại, React bạn cần phải gọi preventDefault() một cách tường minh :

function handleClick(event) {
  event.preventDefault()
  console.log('The link was clicked.')
}
  1. Trong HTML, bạn cần gọi hàm bằng cách thêm vào () Trong khi trong phản ứng, bạn không nên thêm () với tên hàm. (tham khảo chức năng "enableLasers" ở điểm đầu tiên chẳng hạn)

14. Làm cách nào để liên kết các phương thức hoặc trình xử lý sự kiện trong lệnh JSX callbacks?

Có 3 cách khả thi để đạt được điều này:

  1. Ràng buộc trong Khối constructor: Trong các lớp JavaScript, các phương thức không bị ràng buộc theo mặc định. Điều tương tự cũng áp dụng cho các trình xử lý sự kiện React được định nghĩa là các phương thức lớp. Thông thường chúng ta ràng buộc chúng trong quá trình hàm tạo.
class Component extends React.Component {
  constructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick() {
    // ...
  }
}
  1. Public class cú pháp của các trường: Nếu bạn không thích sử dụng cách tiếp cận ràng buộc thì public cú pháp các trường có thể được sử dụng để liên kết chính xác các callback
handleClick = () => {
  console.log('this is:', this)
}
<button onClick={this.handleClick}>
  {'Click me'}
</button>
  1. Arrow function trong callback: Bạn có thể sử dụng arrow function trực tiếp trong callback.
<button onClick={(event) => this.handleClick(event)}>
  {'Click me'}
</button>

Lưu ý: Nếu các callback được truyền như là props cho các thành phần con, các thành phần đó có thể thực hiện re-render bổ sung. Trong những trường hợp đó, ưu tiên sử dụng phương pháp tiếp cận cú pháp .bind () hoặc public cú pháp các trườngc để xem xét hiệu suất.

15. Cách chuyển một tham số đến một trình xử lý sự kiện hoặc callback?

Bạn có thể sử dụng arrow function để bao quanh một trình xử lý sự kiện và chuyển các tham số:

<button onClick={() => this.handleClick(id)} />

Điều này tương đương với việc gọi .bind:

<button onClick={this.handleClick.bind(this, id)} />

Ngoài hai cách tiếp cận này, bạn cũng có thể truyền các đối số cho một hàm được định nghĩa là một arrow function

<button onClick={this.handleClick(id)} />
handleClick = (id) => () => {
    console.log("Hello, your ticket number is", id)
};

16. Synthetic event trong React là gì?

SyntheticEvent là một trình bao bọc trình duyệt chéo xung quanh sự kiện gốc của trình duyệt. API của nó giống như sự kiện gốc của trình duyệt, bao gồm stopPropagation() và PreventDefault(), ngoại trừ các sự kiện hoạt động giống nhau trên tất cả các trình duyệt.

17. Biểu thức điều kiện nội dòng là gì?

Bạn có thể sử dụng câu lệnh if hoặc toán tử 3 ngôi có sẵn từ JS để kết xuất biểu thức có điều kiện. Ngoài những cách tiếp cận này, bạn cũng có thể nhúng bất kỳ biểu thức nào vào JSX bằng cách gói chúng trong dấu ngoặc nhọn và sau đó là toán tử logic JS &&.

<h1>Hello!</h1>
{
    messages.length > 0 && !isLogin?
      <h2>
          You have {messages.length} unread messages.
      </h2>
      :
      <h2>
          You don't have unread messages.
      </h2>
}

18. Prop "key" là gì và lợi ích của việc sử dụng nó trong mảng các phần tử là gì?

Key là một thuộc tính chuỗi đặc biệt mà bạn nên đưa vào khi tạo mảng các phần tử. Key prop giúp React xác định những mục nào đã thay đổi, được thêm vào hoặc bị loại bỏ.

Thông thường, chúng ta sử dụng ID từ dữ liệu của mình làm khóa:

const todoItems = todos.map((todo, index) =>
  <li key={index}>
    {todo.text}
  </li>
)

Lưu ý:

  1. Việc sử dụng index cho các key không được khuyến khích nếu thứ tự của các mục có thể thay đổi. Điều này có thể tác động tiêu cực đến hiệu suất và có thể gây ra sự cố với trạng thái thành phần.
  2. Nếu bạn trích xuất mục danh sách dưới dạng thành phần riêng biệt thì hãy áp dụng các key trên thành phần danh sách thay vì thẻ li.
  3. Sẽ có một số cảnh báo trong bảng điều khiển nếu phím chống đỡ không có trên các mục danh sách.

19. Công dụng của refs là gì?

ref là một tham chiếu được sử dụng để trả về một tham chiếu đến phần tử. Tuy nhiên, chúng nên được tránh trong hầu hết các trường hợp, chúng có thể hữu ích khi bạn cần truy cập trực tiếp vào phần tử DOM hoặc một phiên bản của một thành phần.

20. Làm thế nào để tạo ref?

Có 2 cách :

  1. Đây là một cách tiếp cận được bổ sung gần đây. Refs được tạo bằng phương thức React.createRef() và được gắn vào các phần tử React thông qua thuộc tính ref. Để sử dụng các refs trong toàn bộ component, chỉ cần gán refs cho thuộc tính cá thể bên trong hàm tạo.

Bạn cũng có thể sử dụng phương pháp gọi lại ref bất kể phiên bản React. Ví dụ: phần tử đầu vào của thành phần thanh tìm kiếm được truy cập như sau,

class SearchBar extends Component {
   constructor(props) {
      super(props);
      this.txtSearch = null;
      this.state = { term: '' };
      this.setInputSearchRef = e => {
         this.txtSearch = e;
      }
   }
   onInputChange(event) {
      this.setState({ term: this.txtSearch.value });
   }
   render() {
      return (
         <input
            value={this.state.term}
            onChange={this.onInputChange.bind(this)}
            ref={this.setInputSearchRef} />
      );
   }
}

Bạn cũng có thể sử dụng refs trong các hàm bằng cách sử dụng các closures. Lưu ý: Bạn cũng có thể sử dụng lệnh gọi lại ref nội tuyến mặc dù nó không phải là cách tiếp cận được khuyến nghị

Hiểu về cách thức hoạt động của Reactjs Hooks p2

Bài viết có liên quan