Tại sao React hook lại tồn tại trên trái đất này?React hook tồn tại trên trái đất này có lợi ích gì không?
Lịch sử
Tháng 5, 2013
Nếu bạn còn nhớ về cách viết một component trong React bằng React.createClass, chứng tỏ bạn đã là già làng trong React, ngày mới ra đời khi javascript không hề có khai báo class, chúng ta sẽ khai báo component như thế này
const ReposGrid = React.createClass({ getInitialState () { return { } }, componentDidMount () { }, componentDidUpdate (prevProps) { }, render() { return (
Tháng giêng, 2015
Tổ chức Ác ma thế giới công bố chuẩn EcmaScript 2015, còn gọi với tên thân thương ES6. class chính thức có mặt trong javascript. Đội ngũ phát triển của React lúc đó kết luận, chúng ta không cần phát minh lại cái bánh xe (don’t reinvent the wheel), cứ xài theo chuẩn đã có. Thế là từ đó chúng ta khai báo component bằng class extends
class ReposGrid extends React.Component { constructor (props) { super(props) this.state = { repos: , loading: true } this.updateRepos = this.updateRepos.bind(this) } componentDidMount () { } componentDidUpdate (prevProps) { } render() { return (
Khi khai báo component bằng class, chúng ta khởi tạo giá trị của state bên trong phương thức constructor và nó sẽ được nhét vào trong this. Tuy nhiên, với cách khai báo đã quốc tế hóa của class, nếu chúng ta extends từ một class, chúng ta phải gọi super() trước khi có thể sử dụng this. Và riêng với React, chúng ta còn phải truyền thêm props vào trong super. Các bạn lập trình viên phát bệnh vì cách viết chướng mắt này.
Bạn đang xem: Hook là gì
Giải quyết
Từ React 0.14 chúng ta có 2 cách tạo component, dùng class hoặc dùng function. Nếu cần state và các lifecycle thì dùng class, nếu chỉ nhận props rồi trả về UI thì dùng function. Đó là cách chúng ta được dạy.
Bác CTO John Carmack nói, em xin lỗi sửa câu văn của bác chút
Tụi bây dẹp phương thức, class, framework hết dùm tao cái, Dùng hết function đi
React team, chân lý đây rồi, chúng ta tìm cách biến function component đáp ứng được những gì class component làm được đi.
Xem thêm: Bartender Là Gì – Vai Trò Và Nhiệm Vụ Của Bartender
Với function component, chúng ta chả cần quan tâm tới super(props), this chạy thế nào. Chúng ta sẽ bổ sung state, giải quyết lifecycle, chia sẻ logic nữa là xong.
Và thế là các hook của React ra đời: useState, useEffect, custom hook
Để sử dụng state, chúng ta dùng hook là React.useState
function ReposGrid ({ id }) { const = React.useState() const = React.useState(true)}function ReposGrid ({ id }) { const = React.useState() const = React.useState(true)}
Lifecycle thì có thể bạn sẽ buồn (hoặc vui) khi nghe tin này. Nếu bắt đầu sử dụng React hook, function component, dẹp hết những gì bạn đã từng biết về lifecycle của component đi, quên đi những việc cần làm ở giai đoạn này, giai đoạn kia của component. Bạn hay tiếp cận cách tư duy khác hoàn toàn Đồng bộ hóa
Thử nghĩ những gì bạn làm ở một sự kiện của lifecycle, có thể là đổi state, fetch dữ liệu, cập nhập DOM, tất cả đều gom về một mục đích duy nhất Đồng bộ hóa. Những gì chúng ta cần đồng bộ thường là những thứ nằm ngoài React (gọi API, DOM, đại loại như thế) với những thứ bên trong React (state) hoặc ngược lại.
Xem thêm: Google Play Trò Chơi
Vì sao React Hooks lại được sử dụng nhiều trong các dự án đến thế?
Thật không thể tin được bạn có thể khai báo và setState bên trong một function bình thường. Chúng ta đã có một React mạnh mẽ với các đặc tính sauĐơn giản hóaĐóng góiLinh độngMở rộng
Không những giải quyết vấn đề đang có, như cách mà các bạn làm marketing cho React tuyên truyền: sử dụng Hook để có state bên trong function component. Thật ra nó còn mang tới những giá trị to lớn khác là tăng khả năng tái sử dụng và kết hợp logic.
Chuyên mục: Hỏi Đáp
