Tìm hiểu về React Hook

Reack Hook là gì?

- React Hook được thêm vào trong React ở version 16.8.

- Hooks cho phép các component có quyền truy cập vào các state, các tính năng khác của React.

- Có 3 quy tắc khi sử  Hook:

+ Hooks chỉ có thể gọi nội bộ trong function component.

+ Hooks chỉ có thể gọi trên đầu của 1 component.

+ Hooks không thể có điều kiện.

 Note: Hooks sẽ không làm việc trong React class components.

Ví dụ: 

import React, { useState } from "react";
import ReactDOM from "react-dom/client";

function FavoriteColor() {
  const [color, setColor] = useState("red");

  return (
    <>
      <h1>My favorite color is {color}!</h1>
      <button
        type="button"
        onClick={() => setColor("blue")}
      >Blue</button>
      <button
        type="button"
        onClick={() => setColor("red")}
      >Red</button>
      <button
        type="button"
        onClick={() => setColor("pink")}
      >Pink</button>
      <button
        type="button"
        onClick={() => setColor("green")}
      >Green</button>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<FavoriteColor />);

1. useState Hook

-  userState Hook cho phép theo dõi cập nhật state trong function component.

- Để sử dụng useState Hook chúng ta cần import vào component của chúng ta.

import { useState } from "react";

- Call useState để khởi tạo state trong function component

import { useState } from "react";

function FavoriteColor() {
  const [color, setColor] = useState("");
}

- color là giá trị hiện tại của state

- setColor là function để update state

- Tiếp theo ta sẽ hiển thị biến color  ra ngoài elenment

import { useState } from "react";
import ReactDOM from "react-dom/client";

function FavoriteColor() {
  const [color, setColor] = useState("red");

  return <h1>My favorite color is {color}!</h1>
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<FavoriteColor />);

- Update state

import { useState } from "react";
import ReactDOM from "react-dom/client";

function FavoriteColor() {
  const [color, setColor] = useState("red");

  return (
    <>
      <h1>My favorite color is {color}!</h1>
      <button
        type="button"
        onClick={() => setColor("blue")}
      >Blue</button>
    </>
  )
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<FavoriteColor />);

- useState Hook có thể được sử dụng để theo dõi các string, numbers, arrays, objects và bất kỳ sự kết hợp trong những thứ này

import { useState } from 'react';
import ReactDOM from 'react-dom/client';

function Person() {
   const [name, setName] = useState('Ken');
   const [age, setAge] = useState(20);
   const [interests, setInterests] = useState('so lo');
   const [skills, setSkills] = useState([]);

   useEffect() {
      setSkills(['PHP', '.NET', 'PYTHON', 'JAVA'])
   }

   return (
      <>
         <h1>Tên: {name}</h1>
         <p>Tuổi: {age}</p>
         <p>Sở thích: {interests}</p>
         <p>Kỹ năng: {skills[0]}</p>

      </>
   )
}

const root = React.DOM.createRoot(document.get.ElementById('root'));

root.render(<Person />);

 

 

Danh sách bài viết

  1. Tìm hiểu về React Hook