React hooks cho phép bạn sử dụng trạng thái và các tính năng khác mà trước đây chỉ có thể thực hiện được với các class components. Dưới đây là những điều bạn cần biết về React Hooks, hãy cùng Mellori khám phá nhé!

Nguyên tắc sử dụng Hook

Khi sử dụng hook có 2 điều bạn cần lưu ý. Đầu tiên, bạn chỉ có thể sử dụng hook trong functional component. Thứ hai, bạn chỉ có thể sử dụng hook ở level cao nhất của function. Bạn không thể sử dụng chúng trong các mệnh đề điều kiện, trong loops, hoặc trong các nested function.

Để có thể tự động hóa việc thực hiện các nguyên tắc trong dự án của bạn, bạn có thể sử dụng eslint-plugin-react-hooks. 

>>> Tham khảo khoá học Reactjs của Mellori tại đây.

The useRef Hook

Để bắt đầu, bạn hãy xem xét một trong những hook đơn giản nhất trong react, được gọi là useRef. useRef chủ yếu được sử dụng để lưu trữ các tham chiếu đến các phần tử DOM. Bạn có thể đã quen với React.createRef từ các thành phần dựa trên lớp. 

Như bạn có thể thấy, mỗi hook trong React là một function sử dụng từ “use” làm tiền tố. Bạn có thể nhập chúng từ React và những gì bạn chuyển sang useRef sẽ là giá trị mặc định của bạn. Sau đó, bạn có thể chuyển function tới useRef thành một ref prop để gán nó cho một element. Để xem hook đang hoạt động, bạn có thể thử ví dụ trên CodeSandbox.

The useState Hook

Cũng như đối với useRef, bất cứ thứ gì bạn truyền vào function sẽ là giá trị ban đầu của state của bạn. Function luôn trả về một mảng có hai elements:

  • Element đầu tiên sẽ là state của bạn.
  • Element thứ hai trong mảng sẽ là một function mà bạn có thể sử dụng để cập nhật trạng thái của mình.

Trong ví dụ trên, việc gọi setInput với giá trị của e.target.value sẽ cập nhật  giá trị của biến vừa được nhập vào.

Bạn cũng có thể sử dụng một function cho initial state:

Điều này sẽ giúp ích cho những phép toán tốn kém. Điều này là do nó chỉ được thực hiện một lần thay vì trên mỗi render. Bạn cũng có thể chuyển chức năng Updater cho chức năng SetInput:

Trong trường hợp này, nó sẽ trả về giá trị cập nhật của trạng thái.

Một điều quan trọng khác cần biết là không giống như setState trong các thành phần dựa trên lớp, useState không hợp nhất các objects một cách tự động. Điều này có nghĩa là nếu bạn có một object dưới dạng state và bạn muốn cập nhật một single property, bạn cần hợp nhất phần còn lại của các objects theo cách thủ công.

Lưu ý rằng trong ví dụ thứ hai, setState sẽ ghi đè toàn bộ đối tượng và chỉ để lại thuộc tính cập nhật trong đó. Để khắc phục, hãy sử dụng phương pháp đầu tiên.

Một phương pháp khác là chỉ cần sử dụng hai hook useState và tách hai properties thành hai states khác nhau. Bạn có thể sử dụng các hook useState tùy thích, không có giới hạn nào đối với các hook này.

The useEffect Hook

useState là một sự thay thế tuyệt vời của chức năng setState trong các thành phần lớp. Nhưng nếu bạn muốn sử dụng các phương thức vòng đời trong các thành phần chức năng thì sao? Bạn không có componentDidMount hoặc componentWillUnmount trong các component dựa trên function. Tuy nhiên, với Useseffect, bạn có thể thực hiện một hành vi tương tự:

Như bạn có thể thấy, useEffect mong đợi một callback function như một tham số. Ví dụ này hiển thị một danh sách các bơ. Mỗi lần tôi nhấp vào nút, thành phần sẽ được kết xuất lại và chức năng được gọi. Vì vậy, làm thế nào bạn có thể làm cho nó để nó chỉ được gọi một lần, như ComponentDidMount? Bạn cần vượt qua một mảng trống làm tham số thứ hai.

Tham số thứ hai của useEffect là một mảng dependency. Điều này có nghĩa là hiệu ứng không phụ thuộc vào bất kỳ props hoặc state, vì vậy nó không bao giờ nên chạy lại. 

Nếu bạn cần cập nhật component và chạy effect trên state hoặc props, bạn có thể pass chúng đến mảng dependency của mình và nó sẽ chỉ được rendered nếu bất kỳ giá trị nào thay đổi.

Khi các thay đổi được thực hiện đối với các giá trị bên trong mảng dependency, React thực hiện a shallow comparison, vì vậy hãy ghi nhớ điều đó khi xử lý các object. 

Bạn cũng có thể mở rộng callback function bên trong usesEffect với return stament để làm sạch mọi thứ. Bạn có thể nghĩ về những điều như loại bỏ người nghe sự kiện, hủy đăng ký các sự kiện và đảm bảo rằng bộ nhớ không sử dụng được giải phóng.

The useCallback Hook

useCallback hook hữu ích khi bạn muốn ghi nhớ một callback function, điều đó chỉ thay đổi nếu một trong những dependencies của nó thay đổi. Nó có thể sử dụng để tối ưu các component con, nơi bạn có thể re-renders bằng callback function. Hãy xem ví dụ sau đây:

The useMemo Hook

Một React hook khác được sử dụng cho mục đích tối ưu hóa là useMemo hook. Trong khi UseCallback ghi nhớ các callbacks

Một móc phản ứng khác có thể được sử dụng cho mục đích tối ưu hóa là Hook Usememo. Trong khi Usecallback ghi nhớ các cuộc gọi lại, Usememo có thể được sử dụng để ghi nhớ các giá trị.

Lưu ý rằng useMemo (() => fn, []) tương đương với useCallback (fn, []). Giống như đối với useCallback, chỉ sử dụng Usememo nếu bạn gặp vấn đề về hiệu suất. 

The useReducer Hook

useReducer là một giải pháp thay thế cho useState. Nó hoạt động tương tự như Redux, chấp nhận hai tham số, hàm giảm thiểu và state ban đầu:

Bạn có thể sử dụng state và dispatch function để có thể sử dụng để call render function. Lưu ý rằng bạn nên xác định chức năng bên ngoài component của bạn. Đây là một function sẽ giữ tất cả logic của bạn về việc cập nhật state. Nó chấp nhận hai tham số:

state: đây là trạng thái hiện tại của bạn

action: điều này sẽ nhận được giá trị của bất cứ điều gì chuyển bài dispatch finction và được trả về từ useReducer.

The useContext Hook

Nếu bạn đã sử dụng API context trước đó, Usecontext tương đương với static context = UserContext. 

Để sử dụng context với useContext hook bên trong routes, bạn cần nhập context và chuyển nó vào useContext hook:

Bạn có thể sử dụng state này bất cứ nơi nào bạn cần bằng cách sử dụng useContext. Để cho phép các thay đổi đối với state và các component cập nhật nơi nó được sử dụng, bạn có thể chuyển user object cho useState và chuyển các giá trị của nó xuống provider.

Nếu bạn gọi setUser trong routes của bạn, các routes khác cũng sẽ được cập nhật.

Trên đây là tất cả những gì bạn cần biết về React hook. Nếu bạn đã nắm hết tất cả các cách sử dụng hook trên, bạn cần đảm bảo sử dụng cho một vấn đề nhất định, hoặc thậm chí làm thế nào để tạo ra những thứ của riêng bạn. 

Mellori hiện đang tuyển dụng Giảng Viên giảng dạy online các lớp học về kỹ năng số với mức offer hấp dẫn. Để hợp tác giảng dạy, vui lòng liên hệ hotline: 090.226.1879, hoặc email: [email protected] (Ms.Nhung)