React Hooks là gì?

Trong React Conf 2018 diễn ra tuần vừa mới qua ở bang Nevada, Mỹ, nhóm tăng trưởng React đã ra mắt React Hooks – được cho phép sử dụng state và những hiệu ứng lề ( side effects ) mà không cần phải khai báo ES6 class. Ý tưởng này hứa hẹn sẽ đổi khác khá nhiều bộ mặt của React, khiến những components trở nên gọn nhẹ hơn, giảm đáng kể số lượng code, đồng thời giúp React dễ tiếp cận hơn với những lập trình viên có ít kinh nghiệm tay nghề với JavaScript .Không bỏ lỡ thời cơ đi tắt đón đầu, Ehkoo mời bạn nhào lên “ chuyến tàu hứng khởi ” để xem React Hooks là gì nhé .

GHI CHÚ QUAN TRỌNG
Hooks vẫn còn đang ở giai đoạn RFC, nên những hàm hay phương thức trong bài viết này có khả năng sẽ thay đổi trong tương lai. Tuy nhiên, ý tưởng chung của Hooks chắc chắn vẫn được giữ lại.

Nếu không thích đọc dài dòng, bạn có thể xem hai videos dưới đây:

Bạn đang đọc: React Hooks là gì?

Sophie Alpert và Dan Abramov trình làng về React Hooks
Ryan Florence cho biết : dùng Hooks giảm được 90 % số lượng code

Tại sao phải có Hooks?

Khó khăn khi chia sẻ logic giữa các components

Trong React, việc sử dụng higher-order components và render props tương đối phổ biến khi bạn cần chia sẻ logic giữa các components với nhau. Chẳng hạn, để đưa redux actions thành methods, ta có connect(), hoặc khi cần thao tác với location, history, v.v… bạn sẽ dùng withRouter(), hay mới đây nhất là dùng render props để sử dụng React Context. Cho đến một ngày nào đó, bạn đụng phải “wrapper hell” như thế này.

Lifecycles có khả năng tạo bẫy cho người mới

Một trong những quy tắc thông dụng khi muốn lấy dữ liệu bằng AJAX trong React là gửi request trong componentDidMount(). Khi props thay đổi, chúng ta sẽ dùng giá trị mới và gọi lại hàm gửi request, nhưng lần này lại là trong componentDidUpdate(). Sau đó, giả sử trong componentDidMount() bạn gọi setInteval() thì bạn phải gọi đến clearInteval(id) bên trong lifecycle componentWillUnmount() nếu không muốn ứng dụng bị rò rỉ bộ nhớ. Việc phải nhớ chức năng của từng lifecycle có thể gây khó khăn và tạo bẫy cho những người mới làm quen với React.

ES6 class thật ra không thân thiện lắm

Ai đã từng viết JS mà không đặt câu hỏi “What this is this?“. Cả người mới làm quen với JavaScript lẫn các lập trình viên kì cựu chắc không ít lần dính chưởng Error: 'this' is undefined. Rất có thể bạn đã gặp đoạn code như thế này khi mới làm quen với React.

constructor(props) {
  super(props)
   
  this.handleEmailChange = this.handleEmailChange.bind(this)
  this.handlePasswordChange = this.handlePasswordChange.bind(this)
}

Vấn đề trên hoàn toàn có thể được xử lý bằng cách dùng hàm mũi tên khi khai báo phương pháp trong class, tuy nhiên sẽ có chút không tự nhiên .Bên cạnh đó, rất khó để thực thi việc “ rung cây ” hay vô hiệu code chết ( dead code elimination ) với những phương pháp của class. Cùng với những lifecycles, ứng dụng sau khi build và minify vẫn chiếm dung tích đáng kể .

Vậy React Hooks là gì?

Hooks là những hàm cho phép bạn “kết nối” React state và lifecycle vào các components sử dụng hàm. Với Hooks bạn có thể sử dụng state và lifecycles mà không cần dùng ES6 class. Hãy xem ví dụ sau về hook useState.

import { useState } from ' react '

function Counter() {
   
   
   
  const [count, setCount] = useState(0)

  return (
    

      
You clicked {count} times

      
    

  )
}

Để tiếp cận vào các lifecycles, chúng ta có useEffect. Hook này có tác dụng tương tự như componentDidMount, componentDidUpdate, và componentWillUnmount, nhưng được gom lại thành một hàm duy nhất.

import { useState, useEffect } from ' react '

function Example() {
  const [count, setCount] = useState(
0
)

   
  useEffect(() => {
    document.title = 
`You clicked
USD {count}
times`

  })

  return (
    

      
You clicked {count} times

      
    

  )
}

Effect hook có thể trả về một hàm, và hàm này sẽ được gọi để thực hiện các tác vụ dọn dẹp, tương tự như componentWillUnmount().

useEffect(() => {
  const id = setInteval(() => setCount(count + 1), 100)

   
  return () => clearInteval(id)
})

Trong cùng một component, bạn có thể sử dụng bao nhiêu useState và useEffect tùy ý. Nhưng bắt buộc các hooks này phải được đặt ở phía bắt đầu hàm, và không nằm trong if, switch, vòng lặp for, while, hay trong các hàm lồng nhau.

function Counter(props) {
   
  if (props.shouldCount) {
    const [count, setCount] = useState(0)
  }
}

Hooks thoạt nhìn có vẻ rất là ảo diệu. Làm thế nào React biết được useState() được gọi ở component nào để render lại, vì chúng ta có truyền vào tên hàm hay gì đâu? Nhưng theo lời của acemarke, ở phía bên dưới useState() hoạt động như this.setState() và React có cơ chế để theo dõi từng component để rerender cho đúng.

React cung ứng một cơ số hooks có sẵn mà bạn hoàn toàn có thể tìm hiểu thêm ở đây. Bên cạnh đó, bạn cũng hoàn toàn có thể tự viết hook của riêng mình. Phần này dài dòng nên hẹn bạn ở bài viết sau .

Lợi ích của Hooks

Ngoài việc xử lý những yếu tố ở trên thì React Hooks còn có những ưu điểm như :

Code ngắn gọn hơn

So sánh giữa những components sử dụng class và components sử dụng hàm, số lượng code phải viết chênh lệch nhau khá nhiều. Nếu bạn đã xem video của Ryan ở trên, 90 % code trở nên thật sạch hơn. Ứng dụng sau khi build cũng gọn nhẹ hơn hẳn .

Hoàn toàn tự nguyện, 100% tương thích ngược

Việc sử dụng Hooks khi tạo components là hoàn toàn tự nguyện. Nếu không muốn bạn vẫn có thể sử dụng ES6 class như bình thường và React cũng chưa có ý định hoàn toàn loại bỏ class. Ngoài ra các dự án cũ khi được cập nhật lên phiên bản React có hỗ trợ Hooks vẫn có thể hoạt động trơn tru. Bạn cũng không phải bỏ hết những khái niệm đã biết khi dùng Hooks. Thay vào đó, Hooks cung cấp API giúp bạn có thể thao tác sâu hơn vào props, state, context, refs, và các lifecycle.

Demo

Ehkoo có thử làm một demo nhỏ với React Hook ở đây. Ứng dụng này được cho phép bạn xem thông tin của những bộ phim Ghibli bằng cách sử dụng API của https://ghibliapi.herokuapp.com/. Bạn hoàn toàn có thể tìm hiểu thêm mã nguồn ở đây https://github.com/ehkoo/react-hooks-demo .Một số điểm cần chú ý quan tâm :

  • Khi sử dụng useEffect để lấy dữ liệu, cần kiểm tra dữ liệu đã tồn tại hay chưa. Nếu không thì hàm sẽ gửi request liên tục.
  • Có thể sử dụng tham số thứ hai của hàm useEffect() để chỉ định chỉ thực thi hàm khi biến thay đổi giá trị. Xem thêm thông tin ở đây.

Kết

Hi vọng bài viết này đã đem lại cho bạn cái nhìn toàn cảnh về React Hooks, và vì sao Hooks hoàn toàn có thể đổi khác đáng kể những dự án Bất Động Sản dùng React. Ehkoo sẽ liên tục theo dõi và update với bạn những thông tin mới nhất về tính năng khá mê hoặc này. Hãy đón đọc nhé .

Rate this post