[ReactJS] Cái nhìn đầu tiên về Hooks

Có một thực tế đó là ES6 ra đời nhằm giải quyết rất nhiều vấn đề của ngôn ngữ javascript tuy nhiên nó có vẻ không thân thiện cho lắm đối với các lập trình viên,đặc biệt là những lập trình viên mới.Trước khi ES6 ra đời JS là một ngôn ngữ hướng function(function programing),tức là chúng ta chỉ có thể viết các function một cách tuần tự để xử lý các tác vụ,.ES6 ra đời nó hỗ trợ OOP(hướng đối tượng) và các framework build trên nền tảng JS như react,angular,vue... đã dựa trên ES6 để xây dựng.ReactJS ban đầu sử dụng ES6 để làm nền tảng xây dựng,tuy nhiên vào năm ngoái(2018) đội ngũ phát triển của react có vẻ cũng đã nhận ra sự khó tiếp cận của reactjs đối với các lập trình viên mới nên họ đã nghiên cứu và cho ra đời React Hook cho phép chúng ta khai báo và sử dụng state mà không cần sử dụng class.Việc này giúp chúng ta giảm bớt được rất nhiều công sức để học react vì sự rắc rối của state và lifecycle của nó.Nào chúng ta cùng nhau tìm hiểu về React Hook nhé.

1.State Hooks

Hooks được react thêm vào từ phiên bản 16.8,bây giờ không cần dùng class chúng ta vẫn sử dụng được state.để làm việc đó chúng ta làm thế nào?

A,Hàm đầu tiên cần nhớ đó là useState().

 import React, {useState} from 'react';  

Để sử dụng hàm useState chúng ta cần khai báo một mảng gồm 2 tham số,tham số đầu tiên là tên của state tham số thứ hai là method để thay đổi giá trị của state.Tham số được truyền vào hàm useState sẽ là giá trị initial của state.Ví dụ nhé

 const [state, setState] = useState(false);  

Demo nhé

 import React, { useState } from 'react';  
 function Example() {  
  // Khai báo 1 biến số đếm, gọi là "count"  
  const [count, setCount] = useState(0);  
  return (  
   <div>  
    <p>Bạn đã bấm {count} lần</p>  
    <button onClick={() => setCount(count + 1)}>  
     Bấm vào tôi  
    </button>  
   </div>  
  );  
 }  

Biến count được khai báo giá trị ban đầu là 0 và function để thay đổi giá trị là setCount.vậy nên khi click nút thì giá trị của biến count được tăng lên 1.