Asas React Bahagian 2

Berikut ialah beberapa konsep dan terminologi React yang lebih maju:

12. API Konteks

API Konteks menyediakan cara untuk menghantar data melalui pepohon komponen tanpa perlu menghantar prop secara manual di setiap peringkat. Ia berguna untuk data global seperti tema, pengesahan atau data pengguna.

Contoh:

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

function ThemedButton() {
  return (
    <ThemeContext.Consumer>
      {theme => <button className={theme}>I am styled by {theme} theme!</button>}
    </ThemeContext.Consumer>
  );
}

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <ThemedButton />
    </ThemeContext.Provider>
  );
}

13. Ruj

Ruj menyediakan cara untuk mengakses nod DOM atau elemen React yang dibuat dalam kaedah pemaparan. Ia sering digunakan untuk mengubah suai terus elemen DOM atau mengurus fokus.

Contoh:

import { useRef } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);

  const onButtonClick = () => {
    inputEl.current.focus();
  };

  return (
    <div>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </div>
  );
}

14. Komponen Pesanan Tinggi (HOC)

HOC ialah fungsi yang mengambil komponen dan mengembalikan komponen baharu. Ia sering digunakan untuk menggunakan semula logik komponen.

Contoh:

function withLogger(WrappedComponent) {
  return function WithLogger(props) {
    console.log('Rendering component');
    return <WrappedComponent {...props} />;
  };
}

const EnhancedComponent = withLogger(MyComponent);

15. React.memo

React.memo ialah komponen tertib lebih tinggi yang membantu mengoptimumkan prestasi dengan menghafal komponen. Jika prop tidak berubah, komponen akan melangkau pemaparan semula.

Contoh:

const MyComponent = React.memo(function MyComponent(props) {
  return <div>{props.text}</div>;
});

16. useReducer Hook

Kail useReducer ialah alternatif kepada useState. Ia berguna untuk mengurus logik keadaan yang lebih kompleks, terutamanya apabila keadaan bergantung pada nilai sebelumnya.

Contoh:

import { useReducer } from 'react';

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

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

  return (
    <div>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
      <span>{state.count}</span>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
    </div>
  );
}

17. Serpihan Bertindak Balas

React Fragments membolehkan anda mengumpulkan senarai kanak-kanak tanpa menambah nod tambahan pada DOM.

Contoh:

function Table() {
  return (
    <>
      <tr>
        <td>Row 1</td>
      </tr>
      <tr>
        <td>Row 2</td>
      </tr>
    </>
  );
}

18. Portal

Portal menyediakan cara untuk menjadikan kanak-kanak menjadi nod DOM yang wujud di luar hierarki komponen induk.

Contoh:

import ReactDOM from 'react-dom';

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

19. Sempadan Ralat

Sempadan Ralat ialah komponen React yang menangkap ralat JavaScript di mana-mana dalam pepohon komponen anak mereka, merekodkan ralat tersebut dan memaparkan UI sandaran.

Contoh:

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

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

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

    return this.props.children;
  }
}

20. Malas Memuat

React menyokong pemuatan malas komponen, yang bermaksud komponen boleh dimuatkan secara tidak segerak apabila diperlukan, meningkatkan prestasi untuk aplikasi besar.

Contoh:

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <OtherComponent />
    </Suspense>
  );
}

21. Mod Ketat

StrictMode ialah alat untuk menyerlahkan potensi masalah dalam aplikasi. Ia tidak memaparkan sebarang UI yang kelihatan tetapi menyemak isu seperti kaedah kitaran hayat yang ditamatkan.

Contoh:

function App() {
  return (
    <React.StrictMode>
      <MyComponent />
    </React.StrictMode>
  );
}

22. Komponen Terkawal vs Tidak Terkawal

Komponen Terkawal: Bentuk unsur yang nilainya dikawal oleh keadaan React.

Komponen Tidak Terkawal: Elemen bentuk yang nilainya dikendalikan oleh DOM.

Example of Controlled Component:

function ControlledInput() {
  const [value, setValue] = useState('');

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

Example of Uncontrolled Component:

function UncontrolledInput() {
  const inputRef = useRef(null);

  return <input type="text" ref={inputRef} />;
}

23. Penggerudian Prop

Penggerudian Prop berlaku apabila data diturunkan melalui berbilang peringkat komponen untuk mencapai anak yang sangat bersarang. Ini boleh dielakkan dengan menggunakan API Konteks atau perpustakaan pengurusan negeri.

Example of Prop Drilling:

function Grandparent() {
  const name = "John";
  return <Parent name={name} />;
}

function Parent({ name }) {
  return <Child name={name} />;
}

function Child({ name }) {
  return <p>{name}</p>;
}

24. Memaparkan Kitaran Hayat

Komponen tindak balas mempunyai kitaran hayat dengan kaedah yang digunakan pada peringkat yang berbeza, seperti melekap, mengemas kini dan menyahlekap.

Kaedah kitar hayat (komponen kelas):

1. - componentDidMount
2. - componentDidUpdate
3. - componentWillUnmount

Contoh:

class MyComponent extends React.Component {
  componentDidMount() {
    console.log('Component mounted');
  }

  componentDidUpdate() {
    console.log('Component updated');
  }

  componentWillUnmount() {
    console.log('Component will unmount');
  }

  render() {
    return <div>Hello!</div>;
  }
}

25. useRef Hook

Kait useRef digunakan untuk mengekalkan nilai merentas pemaparan tanpa menyebabkan pemaparan semula. Ia biasanya digunakan untuk mengakses elemen DOM atau menyimpan nilai boleh ubah.

Contoh:

function Timer() {
  const countRef = useRef(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      countRef.current += 1;
      console.log(countRef.current);
    }, 1000);

    return () => clearInterval(intervalId);
  }, []);

  return <p>Check the console to see the timer.</p>;
}

Konsep tambahan ini akan membantu anda memperdalam pemahaman anda tentang React dan menangani senario yang lebih maju!

Atas ialah kandungan terperinci Asas React Bahagian 2. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!