Corak Reka Bentuk ReactJS: Menulis Komponen Teguh dan Boleh Skala

Corak reka bentuk dalam ReactJS menyediakan penyelesaian piawai dan terbukti kepada masalah biasa dalam pembangunan aplikasi. Menggunakan corak ini bukan sahaja menjadikan kod anda lebih mudah dibaca dan diselenggara tetapi juga meningkatkan kebolehskalaan dan keteguhannya. Mari kita selami beberapa corak reka bentuk ReactJS yang paling popular, dengan contoh untuk menggambarkan penggunaannya.

1. Corak Bekas dan Komponen Persembahan

Corak Bekas dan Persembahan memisahkan komponen kepada dua kategori:

• Komponen Persembahan: Fokus pada rupa perkara (UI).
• Komponen Bekas: Fokus pada cara sesuatu berfungsi (logik dan pengurusan keadaan).

Pemisahan ini membolehkan kebolehgunaan semula yang lebih baik, ujian yang lebih mudah dan kod yang lebih bersih.

Contoh: Komponen Persembahan dan Bekas

// Presentational Component: Displaying User List (UserList.js)
import React from 'react';

const UserList = ({ users }) => (
  <ul>
    {users.map((user) => (
      <li key={user.id}>{user.name}</li>
    ))}
  </ul>
);

export default UserList;

// Container Component: Fetching User Data (UserContainer.js)
import React, { useState, useEffect } from 'react';
import UserList from './UserList';

const UserContainer = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    const fetchUsers = async () => {
      const response = await fetch('https://jsonplaceholder.typicode.com/users');
      const data = await response.json();
      setUsers(data);
    };
    fetchUsers();
  }, []);

  return <UserList users={users} />;
};

export default UserContainer;

Di sini, UserList ialah komponen pembentangan yang menerima pengguna sebagai prop, manakala UserContainer mengendalikan pengambilan data dan pengurusan keadaan.

2. Corak Komponen Pesanan Tinggi (HOC)

Satu Komponen Pesanan Tinggi (HOC) ialah fungsi yang mengambil komponen sebagai hujah dan mengembalikan komponen baharu. HOC biasanya digunakan untuk merentasi kebimbangan seperti pengesahan, pengelogan atau mempertingkatkan gelagat komponen.

Contoh: Membuat HOC untuk Kebenaran

// withAuthorization.js (HOC for Authorization)
import React from 'react';

const withAuthorization = (WrappedComponent) => {
  return class extends React.Component {
    componentDidMount() {
      if (!localStorage.getItem('authToken')) {
        // Redirect to login if not authenticated
        window.location.href = '/login';
      }
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
};

export default withAuthorization;

// Dashboard.js (Component Wrapped with HOC)
import React from 'react';
import withAuthorization from './withAuthorization';

const Dashboard = () => <h1>Welcome to the Dashboard</h1>;

export default withAuthorization(Dashboard);

Dengan membalut Papan Pemuka dengan withAuthorization, anda memastikan bahawa hanya pengguna yang disahkan boleh mengaksesnya.

3. Corak Props Render

Corak Render Props melibatkan perkongsian kod antara komponen menggunakan prop yang nilainya ialah fungsi. Corak ini berguna untuk pemaparan dinamik berdasarkan keadaan atau keadaan tertentu.

Contoh: Menggunakan Render Props untuk Penjejakan Tetikus

// MouseTracker.js (Component with Render Props)
import React, { useState } from 'react';

const MouseTracker = ({ render }) => {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  const handleMouseMove = (event) => {
    setPosition({ x: event.clientX, y: event.clientY });
  };

  return <div onMouseMove={handleMouseMove}>{render(position)}</div>;
};

export default MouseTracker;

// App.js (Using Render Props)
import React from 'react';
import MouseTracker from './MouseTracker';

const App = () => (
  <MouseTracker
    render={({ x, y }) => (
      <h1>
        Mouse position: ({x}, {y})
      </h1>
    )}
  />
);

export default App;

Komponen MouseTracker menggunakan prop render untuk menghantar data kedudukan tetikus kepada mana-mana komponen, menjadikannya sangat boleh digunakan semula.

4. Corak Cangkuk Tersuai

Cangkuk Tersuai membolehkan anda merangkum dan menggunakan semula logik stateful merentas berbilang komponen. Corak ini menggalakkan kebolehgunaan semula kod dan pemisahan kebimbangan yang bersih.

Contoh: Mencipta Cangkuk Tersuai untuk Mengambil Data

// useFetch.js (Custom Hook)
import { useState, useEffect } from 'react';

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

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(url);
      const result = await response.json();
      setData(result);
      setLoading(false);
    };
    fetchData();
  }, [url]);

  return { data, loading };
};

export default useFetch;

// App.js (Using the Custom Hook)
import React from 'react';
import useFetch from './useFetch';

const App = () => {
  const { data, loading } = useFetch('https://jsonplaceholder.typicode.com/posts');

  if (loading) return <div>Loading...</div>;

  return (
    <ul>
      {data.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
};

export default App;

Kait tersuai useFetch merangkum logik pengambilan data, yang boleh digunakan semula merentas komponen yang berbeza.

5. Corak Komponen Kompaun

Corak Komponen Kompaun membolehkan komponen berfungsi bersama untuk mengurus keadaan dan tingkah laku. Corak ini berguna untuk membina komponen UI yang kompleks seperti tab, akordion atau lungsur turun.

Contoh: Membina Tab dengan Komponen Kompaun

// Tabs.js (Parent Component)
import React, { useState } from 'react';

const Tabs = ({ children }) => {
  const [activeIndex, setActiveIndex] = useState(0);

  return React.Children.map(children, (child, index) =>
    React.cloneElement(child, { isActive: index === activeIndex, setActiveIndex, index })
  );
};

const Tab = ({ children, isActive, setActiveIndex, index }) => (
  <button onClick={() => setActiveIndex(index)}>{children}</button>
);

const TabPanel = ({ children, isActive }) => (isActive ? <div>{children}</div> : null);

Tabs.Tab = Tab;
Tabs.TabPanel = TabPanel;

export default Tabs;

// App.js (Using Compound Components)
import React from 'react';
import Tabs from './Tabs';

const App = () => (
  <Tabs>
    <Tabs.Tab>Tab 1</Tabs.Tab>
    <Tabs.Tab>Tab 2</Tabs.Tab>
    <Tabs.TabPanel>Content for Tab 1</Tabs.TabPanel>
    <Tabs.TabPanel>Content for Tab 2</Tabs.TabPanel>
  </Tabs>
);

export default App;

Komponen Tab mengurus keadaan, manakala komponen Tab dan TabPanel berfungsi bersama untuk memaparkan kandungan tab.

6. Corak Komponen Terkawal dan Tidak Terkawal

Komponen terkawal diurus sepenuhnya oleh keadaan React, manakala komponen tidak terkawal bergantung pada DOM untuk keadaannya. Kedua-duanya mempunyai kegunaannya, tetapi komponen terkawal biasanya lebih disukai untuk ketekalan dan kebolehselenggaraan.

Contoh: Komponen Terkawal lwn. Tidak Terkawal

// Controlled Component (TextInputControlled.js)
import React, { useState } from 'react';

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

  return (
    <input type="text" value={value} onChange={(e) => setValue(e.target.value)} />
  );
};

export default TextInputControlled;

// Uncontrolled Component (TextInputUncontrolled.js)
import React, { useRef } from 'react';

const TextInputUncontrolled = () => {
  const inputRef = useRef();

  const handleClick = () => {
    console.log(inputRef.current.value);
  };

  return (
    <>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Log Input Value</button>
    </>
  );
};

export default TextInputUncontrolled;

Dalam komponen terkawal, React mengawal sepenuhnya keadaan borang, manakala dalam komponen tidak terkawal, keadaan diuruskan oleh DOM sendiri.

7. Corak Kilang Cangkuk

Corak Kilang Hooks melibatkan penciptaan cangkuk yang menjana dan mengurus berbilang keadaan atau gelagat secara dinamik, menyediakan cara yang fleksibel untuk mengurus logik yang kompleks.

Contoh: Pengurusan Negeri Dinamik dengan Kilang Cangkuk

// useDynamicState.js (Hook Factory)
import { useState } from 'react';

const useDynamicState = (initialStates) => {
  const states = {};
  const setters = {};

  initialStates.forEach(([key, initialValue]) => {
    const [state, setState] = useState(initialValue);
    states[key] = state;
    setters[key] = setState;
  });

  return [states, setters];
};

export default useDynamicState;

// App.js (Using the Hooks Factory)
import React from 'react';
import useDynamicState from './useDynamicState';

const App = () => {
  const [states, setters] = useDynamicState([
    ['name', ''],
    ['age', 0],
  ]);

  return (
    <div>
      <input
        type="text"
        value={states.name}
        onChange={(e) => setters

.name(e.target.value)}
      />
      <input
        type="number"
        value={states.age}
        onChange={(e) => setters.age(parseInt(e.target.value))}
      />
      <p>Name: {states.name}</p>
      <p>Age: {states.age}</p>
    </div>
  );
};

export default App;

Kilang cangkuk ini mencipta dan mengurus berbilang keadaan secara dinamik, memberikan fleksibiliti dan kod yang lebih bersih.

Kesimpulan

Dengan memanfaatkan corak reka bentuk ini, anda boleh mencipta aplikasi React yang lebih teguh, berskala dan boleh diselenggara. Corak ini membantu anda menulis kod yang bersih dan boleh diguna semula yang mematuhi amalan terbaik, memastikan aplikasi anda lebih mudah untuk dibangunkan dan diurus dari semasa ke semasa.

Adakah anda ingin menyelami lebih mendalam mana-mana corak ini atau meneroka topik lain?

Atas ialah kandungan terperinci Corak Reka Bentuk ReactJS: Menulis Komponen Teguh dan Boleh Skala. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!