React Hooks thực sự nó 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() {
// Hàm useState() nhận vào một tham số là giá trị ban đầu
// của state, trả về một cặp [value, handler] chứa giá trị
// hiện tại của state, và handler để thay đổi state đó.
const [count, setCount] = useState(0)
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
)
}
Điều này có nghĩa là từ phiên bản 16.8 trở đi, chúng ta đã có thể sử dụng state trong stateless (functional) component, việc mà từ trước tới nay ta bắt buộc phải khai báo Class. Có thể thấy, các nhà phát triển React họ đang muốn hướng đến 1 tương lai Functional Programming thay vì sử dụng những Class mà chỉ nghe cái tên thôi là ta đã nghĩ ngay đến OOP. Cộng với việc không sử dụng Class kế thừa từ React Component nữa nên giờ đây kích thước bundle sẽ được giảm đáng kể bởi code sử dụng Hooks.
Để có thể thay thế được Class thì React Hooks cung cấp cho chúng ta một bộ các built-in Hooks, giúp chúng ta sử dụng được các thành phần tạo nên React, có 2 loại built-in đó là: Basic Hooks và Additional Hooks
Basic Hooks
useState
Cái tên nói lên tất cả hàm này nhận đầu vào là giá trị khởi tạo của 1 state và trả ra 1 mảng gồm có 2 phần tử, phần tử đầu tiên là state hiện tại, phần tử thứ 2 là 1 function dùng để update state (giống như hàm setState cũ vậy). Ví dụ:
Ngày trước dùng Class thì viết như này
constructor(props) {
super(props);
this.state = { isLoading: false }
}
onClick() {
this.setState({
isLoading: true,
})
}
Còn bây giờ thì chỉ cần viết ngắn gọn như này
const [isLoading, setLoading] = useState(false);
onClick() {
setLoading(true)
}
Khi muốn update state cho isLoading là true thì chỉ cần gọi đến hàm setLoading(true) là Ok, Nếu như bạn đang làm việc với React-Redux để quản lý State thì mình khuyên bạn chỉ nên sử dụng useState để quản lý các UI State (là những state có giá trị boolean nhằm mục đích render ra UI) để tránh việc conflict với cả Redux State và maintain sau này.
useEffect
Như đã giới thiệu trong phần mở đầu về sự phức tạp trong các hàm LifeCycle thì để thay thế nó chúng ta sẽ có hàm useEffect. Nó giúp chúng ta xử lý các side effects, useEffect sẽ tương đương với các hàm componentDidMount, componentDidUpdate và componentWillUnMount trong LifeCycle. Ví dụ:
import { callApi } from './actions'
const App = ({ callApi, data }) => {
useEffect(() => {
callApi('some_payload_')
}, [])
return(
<div>
{data.map(item => {// do something })}
</div>
)
}
const mapDispatchToProps = dispatch => ({
callApi: (keyword) => dispatch(callApi)
})
export default connect({}, mapDispatchToProps)(App)
Có thể thấy trong useState ta cũng có thể thực hiện công việc call API giống như hàm ComponentDidMount ngày trước. Để tránh việc hàm useEffect luôn chạy vào mỗi khi có thay đổi State thì ta có thể truyền vào tham số thứ 2 trong useEffect đó là 1 array, trong array này ta có thể truyền vào đó những giá trị mà useEffect sẽ subcribe nó, tức là chỉ khi nào những giá trị đó thay đổi thì hàm useEffect mới được thực thi. Hoặc bạn cũng có thể truyền vào 1 array rỗng thì khi đó nó sẽ chỉ chạy 1 lần đầu tiên sau khi render giống với hàm ComponentDidMount Ví dụ:
useEffect(
() => {
const subscription = props.source.subscribe();
return () => {
subscription.unsubscribe();
};
},
[props.source], // giá trị được subcrive
);
Còn 1 vấn đề nữa đó là trong hàm useState ta có thể return về 1 function (chú ý là bắt buộc phải return về function) thì khi làm điều này nó sẽ tương đương với việc ta sử dụng hàm LifeCycle componentWillUnMount
Tổng kết lại thì đây là những gì ta cần nhớ trong hàm useEffect:
useEffect(() => {
// almost same as componentDidMount
console.log('mounted!');
return () => {
// almost same as componentWillUnmount
console.log('unmount!');
};
}, []);
Ngoài những hook cơ bản hay được sử dụng mà mình đã giới thiệu ở trên thì vẫn còn 1 số hook khác như là useContext, useRef, useLayoutEffect, useDebugValue, useImperativeHandle các bạn có thể vào trang chủ của react hooks để tìm hiểu thêm nhé.
Author: Nguyen Duc Trung
0 Comments:
Post a Comment