Asas React Bahagian 2-tutorial js-php.cn

Asas React Bahagian 2

DDD

Lepaskan： 2024-09-19 06:27:06

asal

826 orang telah melayarinya

React Basics Part 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>
  );
}

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

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

Salin selepas log masuk

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

Salin selepas log masuk

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!