React Hooks là gì ?

Hooks là sự bổ sung mới của bản React 16.8. Hooks cho phép chúng ta sử dụng State cũng như các tính năng khác mà không cần phải viết một Class. Hiểu đơn giản, thằng Hooks được sinh ra để "thay thế dần" cách viết Class Components.

Sự khác biệt của Hooks (Functional Component) và Class Component

Cú pháp

Class Components

import React, { Component } from 'react';

class TestComponent extends Components {
  // cần khai báo hàm để kết xuất mã HTML
  render() {
    return <div>TestComponent</div>;
  }
}

Cách khai báo này khá quen thuộc với các bạn có nền tảng lập trình hướng đối tượng (OOP). Với những bạn mới học React hoặc chuyển sang học React thì phương pháp tiếp cận này có vẻ phù hợp và dễ hiểu.

Functional Component

import React from 'react';

export function TestComponent() {
  // Giá trị hàm trả về HTML
  return <div>TestComponent</div>;
}

Function component sử dụng cách tiếp cận khác đó là sử dụng pure function để khai báo component. Ban đầu function component được sử dụng để viết các component chỉ với mục đích kết xuất HTML mà thôi. Với các component với theo hướng tiếp cận này thì bạn sẽ không can thiệp được vào lifecycle của component. Do đó nó thướng được biết đến với tên gọi Stateless Component.

2. Props

Class Component

props trong Class Component được xem như giá trị truyển vào cho hàm khởi tạo class.

import React, { Component } from 'react';

class TestComponent extends Components {
  constructor(props) {
    super(props); // bắt buộc phải có dòng này để gọi hàm khởi tạo của class cha nhé
  }

  render() {
    return <div>TestComponent</div>;
  }
}

Functional Component

props trong Function Component thì được xem như là giá trị truyền vào hàm khi định nghĩa component.

import React from 'react';

export function TestComponent(props) {
  return <div>TestComponent</div>;
}

State

Trước khi React Hooks ra đời thì như đã nói ở trên Function Component con được biết đến với tên gọi Stateless Component. Nghĩa là nó không có state. Khi React Hooks ra đời thì Function Component cũng có state của riêng nó.

Class Component

import React, { Component } from 'react';

class TestComponent extends Components {
  constructor(props) {
    super(props);
    // khởi tạo giá trị state
    this.state = { isLoading: false };
  }

  render() {
    return <div>TestComponent</div>;
  }
}

Functional Component

import React, { useState } from 'react';

export function TestComponent(props) {
  // giá trị khởi tạo state được truyền vào trong useState hook
  const [state, setState] = useState({ isLoading: false });

  return <div>TestComponent</div>;
}

Component Lifecycle

Với Class component các bạn sẽ thấy component lifecycle khá rõ ràng với các hàm như componentDidMount, componentDidUpdate. Function Component thì không như vậy, toàn bộ việc sử lý lifecycle đều thông qua useEffect hook.

// componentDidMount
useEffect(() => {
  return () => {}; // componentWillUnmount
}, []);

// componentDidUpdate
useEffect(() => {
  return () => {}; // componentWillUnmount
}, [state]);

Hooks có thể thay thế Redux không?

Component state for component state, Redux for application state.

React Hooks không thay thế Redux mà chúng có thể kết hợp cùng với nhau trong một dự án để đạt được hiệu quả tốt nhất.