Peringkat pelatih: Kaedah Kitar Hayat dan Cangkuk dalam React

Pengenalan kepada React Hooks

React Hooks ialah fungsi yang membolehkan anda menggunakan keadaan dan ciri React yang lain dalam komponen berfungsi. Sebelum cangkuk, logik stateful hanya tersedia dalam komponen kelas. Hooks menyediakan API yang lebih terus kepada konsep React yang anda sudah tahu, seperti keadaan, kaedah kitaran hayat dan konteks.

Cangkuk Utama dalam React

useState

useState ialah cangkuk yang membolehkan anda menambah keadaan pada komponen berfungsi.

Contoh:

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
};

export default Counter;

Dalam contoh ini, useState memulakan pembolehubah keadaan kiraan kepada 0. Fungsi setCount digunakan untuk mengemas kini keadaan apabila butang diklik.

useEffect

useEffect ialah cangkuk yang membolehkan anda melakukan kesan sampingan dalam komponen berfungsi, seperti mengambil data, berinteraksi secara langsung dengan DOM dan menyediakan langganan. Ia menggabungkan kefungsian beberapa kaedah kitaran hayat dalam komponen kelas (componentDidMount, componentDidUpdate dan componentWillUnmount).

Contoh:

import React, { useState, useEffect } from 'react';

const DataFetcher = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      {data ? <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}

: 'Loading...'}

); }; export default DataFetcher;

Salin selepas log masuk

Dalam contoh ini, useEffect mengambil data daripada API apabila komponen dipasang.

gunakanKonteks

useContext ialah cangkuk yang membolehkan anda mengakses nilai konteks untuk konteks tertentu.

Contoh:

import React, { useContext } from 'react';

const ThemeContext = React.createContext('light');

const ThemedComponent = () => {
  const theme = useContext(ThemeContext);

  return <div>The current theme is {theme}</div>;
};

export default ThemedComponent;

Dalam contoh ini, useContext mengakses nilai semasa ThemeContext.

useReducer

useReducer ialah cangkuk yang membolehkan anda mengurus logik keadaan kompleks dalam komponen berfungsi. Ia adalah alternatif untuk menggunakanState.

Contoh:

import React, { useReducer } from 'react';

const initialState = { count: 0 };

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

const Counter = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
};

export default Counter;

Dalam contoh ini, useReducer mengurus keadaan kiraan dengan fungsi pengurang.

Cangkuk Tersuai

Cakuk tersuai membolehkan anda menggunakan semula logik stateful merentas berbilang komponen. Cangkuk tersuai ialah fungsi yang menggunakan cangkuk terbina dalam.

Contoh:

import { useState, useEffect } from 'react';

const useFetch = (url) => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(data => setData(data));
  }, [url]);

  return data;
};

const DataFetcher = ({ url }) => {
  const data = useFetch(url);

  return (
    <div>
      {data ? <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}

: 'Loading...'}

); }; export default DataFetcher;

Salin selepas log masuk