Komponen Bertindak balas: Kelas lwn Berfungsi.

Perjalanan React saya bermula empat tahun lalu dengan komponen berfungsi dan Cangkuk. Kemudian datang 'Siswe, rakan peserta dalam bootcamp dan peminat komponen kelas penduduk kami. Semasa kami yang lain bekerjasama dalam projek pasukan dengan komponen berfungsi, 'Siswe berpegang teguh pada komponen kelas dengan kesetiaan yang tidak berbelah bahagi.

Komponen ialah blok binaan antara muka pengguna (UI) anda.

Anggap mereka sebagai bata Lego – anda boleh menggabungkannya dalam pelbagai cara untuk mencipta struktur yang kompleks. Ia adalah kepingan kod bebas dan boleh diguna semula yang merangkumi UI dan logik.

Menggunakan semula komponen dalam komponen lain biasanya kelihatan seperti ini:

import MyComponent from './MyComponent';

function ParentComponent() {
  return (
    <div>
      <MyComponent />
    </div>
  );
}

Komponen Kelas dan Komponen Fungsian ialah dua cara utama untuk mencipta komponen dalam React.

import React, { Component } from 'react';

class Counter extends Component {
 constructor(props) {
  super(props);
  this.state = { count: 0 };
 }

 handleClick = () => {
  this.setState({  
 count: this.state.count + 1 });
 };

 render() {
  return  
 (
   <div>
    <p>You clicked {this.state.count} times</p>
    <button onClick={this.handleClick}>Click me</button>
   </div>
  );
 }
}

export default Counter;

Ini ialah komponen kelas, dibuat menggunakan kelas JavaScript yang memanjangkan kelas React.Component.

import React, { useState } from 'react';

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

  const handleClick = () => {
    setCount(count + 1);
  };

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

export default Counter;

Ini sebaliknya ialah komponen berfungsi, ditulis sebagai fungsi JavaScript yang mudah.

Pengurusan Negeri: Perbezaan Teras.

Komponen kelas menguruskan keadaan dalaman mereka sendiri menggunakan this.state. Ini biasanya dimulakan dalam pembina, diakses menggunakan objek this.state dan dikemas kini menggunakan kaedah this.setState, seperti yang dilihat dalam blok kod di atas.

Komponen berfungsi pada mulanya tidak mempunyai kewarganegaraan. Tetapi dengan pengenalan Hooks, mereka memperoleh keupayaan untuk mengurus logik keadaan dan kitaran hayat. Menggunakan cangkuk useState untuk mengurus keadaan, ia mengembalikan sepasang nilai: keadaan semasa dan fungsi untuk mengemas kininya, seperti yang dilihat di atas. Ini cukup untuk pengurusan negeri yang mudah. Untuk logik keadaan yang lebih kompleks yang melibatkan berbilang sub-nilai, atau apabila keadaan seterusnya bergantung pada yang sebelumnya, anda ingin menggunakan useReducer.
Contohnya:

import React, { useReducer } from 'react';

const initialState = {
  count: 0,
  step: 1,
};

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

      return { ...state, count: state.count - state.step };
    case 'setStep':
      return { ...state, step: action.payload   
 };
    default:
      throw new Error();
  }
};

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

  const increment = () => dispatch({ type: 'increment' });
  const decrement = () => dispatch({ type: 'decrement'   
 });
  const setStep = (newStep) => dispatch({ type: 'setStep', payload: newStep });

  return (
    <div>
      <p>Count: {state.count}</p>
      <p>Step: {state.step}</p>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
      <input type="number" value={state.step} onChange={(e) => setStep(Number(e.target.value))} />
    </div>
  );
}

export default Counter;

Di sini, useReducer mengurus berbilang nilai keadaan dan logik kemas kini kompleks dengan cara yang tersusun dan boleh diselenggara. Cangkuk adalah eksklusif untuk komponen berfungsi.

Elakkan manipulasi langsung objek keadaan dalam kedua-dua komponen.

Jangan sekali-kali mengubah suai atau memutasi objek keadaan, tanpa mengira jenis komponen. Sebaliknya, buat objek baharu dengan nilai yang dikemas kini. Pendekatan ini membantu React menjejaki perubahan dengan cekap dan mengoptimumkan pemaparan semula.

Contoh komponen berfungsi:

import React, { useState } from 'react';

function UserProfile() {
  const [user, setUser] = useState({ name: 'Jane Doe', age: 30 });

  const handleNameChange = (newName) => {
    setUser({ ...user, name: newName }); // Create a new object with updated name
  };

  return (
    <div>
      <p>Name: {user.name}</p>
      <p>Age: {user.age}</p>
      <input type="text" value={user.name} onChange={(e) => handleNameChange(e.target.value)} />
    </div>
  );
}

export default UserProfile;

Contoh komponen kelas:

import React, { Component } from 'react';

class UserProfile extends Component {
  state = { user: { name: 'Jane Doe', age: 30 } };

  handleNameChange = (newName) => {
    this.setState(prevState => ({
      user: { ...prevState.user, name: newName } // Create a new object with updated name
    }));
  };

  render() {
    return (
      <div>
        <p>Name: {this.state.user.name}</p>
        <p>Age: {this.state.user.age}</p>
        <input type="text" value={this.state.user.name} onChange={(e) => this.handleNameChange(e.target.value)} />
      </div>
    );
  }
}

export default UserProfile;

Dalam kedua-dua contoh, kami mengemas kini sifat nama objek pengguna sambil mengekalkan integriti objek asal. Ini memastikan objek keadaan baharu dicipta, mengekalkan kebolehubahan dan menghalang potensi isu dengan kemas kini keadaan. Pematuhan kepada perkara ini memastikan tingkah laku yang boleh diramal, pengoptimuman prestasi dan penyahpepijatan yang lebih mudah.

Komponen kelas adalah untuk logik yang kompleks.

• Pengurusan Negeri yang Kompleks: Apabila berurusan dengan logik keadaan rumit yang memerlukan kawalan yang terperinci, komponen kelas dengan this.state dan this.setState boleh menawarkan lebih banyak fleksibiliti.
• Kaedah Kitar Hayat: Untuk komponen yang sangat bergantung pada kaedah kitar hayat seperti componentDidMount, componentDidUpdate atau componentWillUnmount, komponen kelas ialah pilihan tradisional.
• Sempadan Ralat: Untuk mengendalikan ralat dalam pepohon komponen dan mengelakkan ranap, komponen kelas dengan componentDidCatch adalah penting.
• Pengoptimuman Prestasi: Dalam senario kritikal prestasi tertentu, PureComponent atau shouldComponentUpdate dalam komponen kelas boleh dimanfaatkan.
• Pangkalan Kod Warisan: Jika anda sedang mengusahakan projek sedia ada yang sangat bergantung pada komponen kelas, mungkin lebih mudah untuk mengekalkan konsistensi dengan menggunakannya untuk komponen baharu.

Komponen berfungsi adalah untuk pandangan mudah.

• Komponen Mudah: Untuk komponen pembentangan dengan keadaan atau logik yang minimum, komponen berfungsi selalunya menjadi pilihan pilihan kerana kesederhanaan dan kebolehbacaannya.
• Pengurusan Negeri dengan Cangkuk: Memanfaatkan useState dan useReducer dalam komponen berfungsi menyediakan cara yang berkuasa dan fleksibel untuk mengurus keadaan.
• Kesan Sampingan: Cangkuk useEffect membenarkan untuk mengurus kesan sampingan seperti pengambilan data, langganan atau manipulasi DOM (model objek dokumen) manual.
• Pengoptimuman Prestasi: useMemo dan useCallback boleh digunakan untuk mengoptimumkan prestasi dalam komponen berfungsi.

Biarkan keperluan komponen anda membimbing keputusan anda.

Pendekatan berfungsi secara amnya dianggap lebih ringkas dan boleh dibaca, dan selalunya mencukupi kerana kesederhanaan dan kecekapan. Walau bagaimanapun, komponen kelas menawarkan lebih kawalan ke atas pengurusan keadaan dan kaedah kitaran hayat, terutamanya apabila berurusan dengan logik yang rumit atau pengoptimuman prestasi. Ini bermakna struktur yang lebih baik untuk mengatur logik yang kompleks.

Pilihan antara kelas dan komponen berfungsi tidak selalunya jelas, kerana tiada peraturan yang ketat. Nilaikan keperluan komponen anda dan gunakan jenis yang paling sesuai dengan keperluan projek anda.

Komponen manakah yang anda suka bekerja dengan lebih banyak?

Atas ialah kandungan terperinci Komponen Bertindak balas: Kelas lwn Berfungsi.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!