Tahap pertengahan: Kaedah Kitar Hayat dan Cangkuk dalam Reaksi

PHPz

Lepaskan： 2024-07-18 10:56:28

asal

1008 orang telah melayarinya

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;

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)}

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;

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;

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)}

Dalam contoh ini, useFetch ialah cangkuk tersuai yang mengambil data daripada URL yang diberikan.

Corak Cangkuk Lanjutan

Menguruskan Keadaan Kompleks dengan useReducer

Apabila berurusan dengan logik keadaan kompleks yang melibatkan berbilang sub-nilai atau apabila keadaan seterusnya bergantung pada yang sebelumnya, useReducer boleh menjadi lebih sesuai daripada useState.

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.

Mengoptimumkan Prestasi dengan useMemo dan useCallback

gunakanMemo

useMemo ialah cangkuk yang menghafal nilai yang dikira, mengiranya semula hanya apabila salah satu kebergantungan berubah. Ia membantu mengoptimumkan prestasi dengan menghalang pengiraan mahal pada setiap paparan.

Contoh:

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

const ExpensiveCalculation = ({ number }) => {
  const computeFactorial = (n) => {
    console.log('Computing factorial...');
    return n <= 1 ? 1 : n * computeFactorial(n - 1);
  };

  const factorial = useMemo(() => computeFactorial(number), [number]);

  return <div>Factorial of {number} is {factorial}</div>;
};

const App = () => {
  const [number, setNumber] = useState(5);

  return (
    <div>
      <input
        type="number"
        value={number}
        onChange={(e) => setNumber(parseInt(e.target.value, 10))}
      />
      <ExpensiveCalculation number={number} />
    </div>
  );
};

export default App;

Dalam contoh ini, useMemo memastikan bahawa pengiraan faktorial hanya dikira semula apabila nombor berubah.

gunakanPanggil balik

useCallback ialah cangkuk yang menghafal fungsi, menghalang rekreasinya pada setiap pemaparan melainkan salah satu kebergantungannya berubah. Ia berguna untuk menghantar fungsi stabil kepada komponen kanak-kanak yang bergantung pada kesamaan rujukan.

Contoh:

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

const Button = React.memo(({ onClick, children }) => {
  console.log(`Rendering button - ${children}`);
  return <button onClick={onClick}>{children}</button>;
});

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

  const increment = useCallback(() => setCount((c) => c + 1), []);

  return (
    <div>
      <Button onClick={increment}>Increment</Button>
      <p>Count: {count}</p>
    </div>
  );
};

export default App;

Dalam contoh ini, useCallback memastikan bahawa fungsi kenaikan hanya dicipta semula jika kebergantungannya berubah, menghalang pemaparan semula komponen Butang yang tidak perlu.

Kesimpulan

Menguasai React Hooks dan kaedah kitaran hayat adalah penting untuk membina aplikasi yang teguh dan boleh diselenggara. Dengan memahami dan menggunakan cangkuk seperti useState, useEffect, useContext dan useReducer, serta corak lanjutan seperti cangkuk tersuai dan pengoptimuman prestasi dengan useMemo dan useCallback, anda boleh mencipta aplikasi React yang cekap dan berskala. Sebagai pembangun peringkat pertengahan, kemahiran ini akan meningkatkan keupayaan anda dengan ketara untuk membangunkan dan mengekalkan aplikasi React yang berkualiti tinggi, menjadikan anda aset yang tidak ternilai kepada pasukan anda.

Atas ialah kandungan terperinci Tahap pertengahan: Kaedah Kitar Hayat dan Cangkuk dalam Reaksi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!