Hooks trong React — Giới thiệu

Các hook đã được thêm vào React trong phiên bản 16.8 và cho phép sử dụng trạng thái trong các thành phần chức năng của React. Trước đây, chỉ các thành phần của lớp mới có quyền truy cập vào trạng thái. Việc bổ sung các hook mới này giúp việc xử lý trạng thái trong phản ứng trở nên dễ dàng hơn.

//handling state in React class component
import React from "react"

class App extends React.Component {

  constructor(props) {    
    super(props);    
    this.state = {name: "Thushitha"};  
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <p>I'm {this.state.name}</p>      
      </div>
    );
  }
}

export default App;

import {useState} from 'react'

1. Chúng chỉ có thể được sử dụng trong các thành phần chức năng của React
2. Chúng chỉ có thể được gọi ở đầu các thành phần.

//importing required hook from react
import {useState} from 'react'

export default function App() {

  // correctly calling useState hook
  const [name,setName]=useState("Max")

  if(name==="Max"){
    //wrong usage as this hook is called conditionally. The hooks have to be 
    //called in the same order in every rendering
    const [school,setSchool]=useState("ABC School");
  }else{
    const [college,setCollege]=useState("XYZ College");
  }

  return (
    <div>
      <h1>Hello World!</h1>
    </div>
  );
}