Lembaran Penipuan React: Edisi Komponen Fungsian

Lembaran Cheat React

React telah berkembang dengan ketara sejak penubuhannya, dan dengan kemunculan Hooks, komponen berfungsi telah menjadi pendekatan utama untuk membina aplikasi React. Helaian tipu ini memberikan gambaran keseluruhan konsep utama, ciri dan amalan terbaik untuk menggunakan komponen berfungsi dalam React.

1. Asas Komponen Berfungsi

Komponen berfungsi ialah fungsi JavaScript biasa yang mengembalikan elemen React.

const MyComponent = () => {
  return <div>Hello, World!</div>;
};

2. Menggunakan JSX

JSX ialah sambungan sintaks yang membolehkan anda menulis kod seperti HTML dalam JavaScript anda.

const MyComponent = () => {
  return (
    <div>
      <h1>Welcome to React</h1>
    </div>
  );
};

3. Props

Props digunakan untuk menghantar data daripada komponen induk kepada komponen anak.

const Greeting = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

// Usage
<Greeting name="Alice" />

4. Props Lalai

Anda boleh menentukan prop lalai untuk komponen.

const Greeting = ({ name = "Guest" }) => {
  return <h1>Hello, {name}!</h1>;
};

5. Nyatakan dengan useState

UseState Hook membolehkan anda menambah keadaan pada komponen berfungsi.

import { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

6. Cangkuk Kesan: useEffect

UseEffect Hook membolehkan anda melakukan kesan sampingan dalam komponen berfungsi.

import { useEffect } from 'react';

const DataFetcher = () => {
  useEffect(() => {
    fetch('/api/data')
      .then(response => response.json())
      .then(data => console.log(data));
  }, []); // Empty dependency array means it runs once

  return <div>Data fetched. Check console.</div>;
};

7. Rendering Bersyarat

Memberikan elemen UI yang berbeza berdasarkan syarat tertentu.

const LoginMessage = ({ isLoggedIn }) => {
  return (
    <div>
      {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please log in.</h1>}
    </div>
  );
};

8. Senarai dan Kunci

Render senarai data dan gunakan kekunci untuk membantu React mengenal pasti item yang telah berubah.

const ItemList = ({ items }) => {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

9. Pengendalian Acara

Kendalikan acara dalam komponen berfungsi.

const Button = () => {
  const handleClick = () => {
    alert('Button clicked!');
  };

  return <button onClick={handleClick}>Click Me</button>;
};

10. Borang dan Komponen Terkawal

Kendalikan input borang dengan komponen terkawal.

const Form = () => {
  const [value, setValue] = useState('');

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Submitted value: ${value}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={value} onChange={handleChange} />
      <button type="submit">Submit</button>
    </form>
  );
};

11. API Konteks

Gunakan API Konteks untuk pengurusan keadaan merentas pepohon komponen.

import { createContext, useContext } from 'react';

const MyContext = createContext();

const MyProvider = ({ children }) => {
  const value = 'Hello from context';

  return (
    <MyContext.Provider value={value}>
      {children}
    </MyContext.Provider>
  );
};

const MyComponent = () => {
  const contextValue = useContext(MyContext);

  return <div>{contextValue}</div>;
};

12. Cangkuk Tersuai

Buat logik boleh guna semula dengan cangkuk tersuai.

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

// Usage
const DataComponent = () => {
  const data = useFetch('/api/data');

  return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
};

13. Memoisasi dengan useMemo

Optimumkan prestasi dengan menghafal pengiraan mahal.

import { useMemo } from 'react';

const ExpensiveComponent = ({ number }) => {
  const expensiveCalculation = useMemo(() => {
    // Assume this is a computationally expensive operation
    return number * 2;
  }, [number]);

  return <div>{expensiveCalculation}</div>;
};

14. gunakanPanggil balik

Gunakan useCallback untuk menghafal fungsi untuk mengelakkan pemaparan semula yang tidak perlu.

import { useCallback } from 'react';

const Button = ({ onClick }) => {
  return <button onClick={onClick}>Click me</button>;
};

const ParentComponent = () => {
  const handleClick = useCallback(() => {
    console.log('Button clicked');
  }, []);

  return <Button onClick={handleClick} />;
};

15. useReducer

Urus logik keadaan kompleks dengan useReducer Hook.

import { useReducer } from 'react';

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

const Counter = () => {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

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

16. Serpihan

Gunakan serpihan untuk mengumpulkan berbilang elemen tanpa menambah nod tambahan pada DOM.

const MyComponent = () => {
  return (
    <>
      <h1>Title</h1>
      <p>Description</p>
    </>
  );
};

17. Portal

Menjadikan kanak-kanak ke dalam nod DOM di luar hierarki DOM komponen induk.

import { createPortal } from 'react-dom';

const Modal = ({ children }) => {
  return createPortal(
    <div className="modal">
      {children}
    </div>,
    document.getElementById('modal-root')
  );
};

18. Sempadan Ralat dengan Komponen Sempadan Ralat

Gunakan komponen kelas untuk sempadan ralat.

import { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    console.log(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

// Usage
<ErrorBoundary>
  <MyComponent />
</ErrorBoundary>

19. Lazy Loading dengan React.lazy dan Suspense

Import komponen secara dinamik untuk mengurangkan masa pemuatan awal.

import { lazy, Suspense } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

const App = () => {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
};

20. PropTypes untuk Pemeriksaan Jenis

Gunakan jenis prop untuk mendokumenkan dan menguatkuasakan jenis prop komponen.

import PropTypes from 'prop-types';

const Greeting = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

Greeting.propTypes = {
  name: PropTypes.string.isRequired,
};

Komponen berfungsi menawarkan cara yang bersih dan mudah untuk membina aplikasi React, terutamanya dengan keupayaan berkuasa yang diperkenalkan oleh Hooks. Helaian panduan ini menyediakan rujukan pantas kepada konsep penting, membantu anda menulis kod Reaksi yang berkesan dan cekap.

Atas ialah kandungan terperinci Lembaran Penipuan React: Edisi Komponen Fungsian. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!