Trang chủ

React Hooks là gì

React Hooks là một tính năng mới được chính thức release trong bản React 16.8.

Như chúng ta đã biết thì trong React có 2 loại component trong React là Stateless và Stateful. Với React Hooks nó cho phép một function component có thể sử dụng state, sử dụng các lifecycle method, context và nhiều thứ khác... Khắc phục những vấn đề "wrapper hell" - các component lồng nhau phức tạp, component dài dòng, bỏ đi mấy cái this màu mè.

Một vài tính năng mới của React Hooks

useState

Thông thường chúng ta xây dựng component trong react đều viết component theo dạngstateful(class). Đây là cách bình thường chúng ta sử dụng state trong một component:

import React from 'react';

export default class Input extends React.Component {
 constructor(props){
   super(props);

   this.state = {
     value: ''
   }
 }

 updateField = event => {
   this.setState({
     value: event.target.value
   })
 }

 render() {
   return (
     <div>
       <input
         className="form-control"
         type="text"
         value={this.state.value}
         onChange={this.updateField}
       />
       <h3>
         Value: <span className="text-success">{this.state.value}</span>
       </h3>
     </div>
   )
 }
}

Link demo:https://stackblitz.com/edit/react-demo-hook?file=Input.js

Chỉ cần return về jsx và không cònconstructorvớirendernữa.

Ở đâyuseState là một hook. Qua ví dụ thì các bạn cũng có thể thấy, thực chất hook cũng chỉ là một function. Và function này cho phép chúng ta mang state vào một stateless component.useState nhận một parameter duy nhất là giá trị ban đầu của state.

So với cách viết Stateful thì cách viết với hook có nhìn ngắn gọn hơn nhiều.

const [value, setValue] = useState('') // giá trị value ban đầu là rỗng

Ở đây chúng ta sử dụng array destructuring để gán tên cho state thông qua việc gọi useState.

useEffect

Khi chúng ta cần gọi api để lấy data, khai báo eventListener, thay đổi DOM... các side effect này được xử lý bằng cách sử dụng component life-cycle API của React. Ví dụ như:

componentDidMount() {
 axios.get('https://jsonplaceholder.typicode.com/users')
   .then(response => {
     setState({
       data: response.data
     })
   })
   .catch((error) => {
     console.log(error);
   });
}

Link demo:https://stackblitz.com/edit/react-demo-hook?file=Product.js

Để 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, componentDidUpdatevàcomponentWillUnmount nhưng được gom lại thành một hàm duy nhất.

Và đây cách làm tương đương khi sử dụng React Hooks:

useEffect(() => {
 axios.get('https://jsonplaceholder.typicode.com/users')
   .then(response => {
     setState(response.data)
   })
   .catch((error) => {
     console.log(error);
   });
}, [])

Link demo:https://stackblitz.com/edit/react-demo-hook?file=ProductUseHook.js

Đơn giản bạn chỉ cần thực thi nó trong useEffect

useEffect(() => {
// ahihi
}, [param]);

useEffect nhận 2 parameter, đầu tiên là một function nơi chúng ta xử lý các side effect, thứ hai là một array [param]. Chúng ta có thể hiểu array này là nơi chứa những variable (biến, không nhất thiết là state), mà khi những variable này thay đổi thì hookuseEffect này sẽ được kích hoạt (chạy, execute). Khi chúng ta không bỏ array này vào hookuseEffect thì nó sẽ chạy cùng vớimọi lần component chạy function render.

useEffect(() => {
// ahihi
});

Còn nếu như chúng ta chỉ muốn nó chạy 1 lần sau lần render đầu tiên thì chỉ cần thêm 1 array rỗng là được.

useEffect(() => {
// ahihi
}, []);

Ngoài một vài hook trên, còn một số các hook nữa mà chúng ta có thể sử dụng, ví dụ nhưuseContext, useReducer, useRef...

Tổng kết

Qua bài viết trên, chúng ta thấy được sự lợi hại mà React hooks đem lại:

• Thay cách viết stateful bằng stateless (làm giảm đáng kể số dòng code trong dự án của bạn)
• Bỏ đi từ khóathis màu mè
• Cung cấp API giúp bạn có thể thao tác sâu hơn vàoprops, state, context, refs, và các lifecycle.

Các bạn có thể tham khảo thêm tại:

https://reactjs.org/docs/hooks-reference.html

https://vi.reactjs.org/docs/hooks-overview.html