Peretasan Berguna React.js Setiap Pembangun Patut Tahu

React.js telah menjadi salah satu perpustakaan JavaScript yang paling popular untuk membina antara muka pengguna, terutamanya aplikasi satu halaman. Seni bina berasaskan komponen dan rendering yang cekap menjadikannya kegemaran pembangun. Sama ada anda seorang pemula atau pembangun berpengalaman, sentiasa ada petua dan kiat baharu untuk dipelajari untuk menjadikan proses pembangunan anda lebih cekap dan kod anda lebih elegan. Di bawah disenaraikan 11 petua React.js berguna yang perlu diketahui oleh setiap pembangun:

1. Gunakan komponen fungsi dengan Cangkuk

Dengan pengenalan React Hooks, komponen berfungsi lebih berkuasa berbanding sebelum ini. Cangkuk membolehkan anda menggunakan keadaan dan ciri React yang lain tanpa menulis kelas. Ini menjadikan kod anda lebih bersih dan lebih mudah difahami.

import React, { useState } from 'react';

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

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

export default Counter;

2. Gunakan komponen memori React.memo

Untuk mengoptimumkan prestasi, anda boleh menggunakan React.memo untuk menghafal komponen fungsi. Dengan membandingkan prop, hanya render semula apabila props berubah, dengan itu mengelakkan rendering semula yang tidak perlu.

import React from 'react';

const MemoizedComponent = React.memo(({ value }) => {
  console.log('Rendering...');
  return <div>{value}</div>;
});

export default MemoizedComponent;

3. Gunakan useEffect untuk menangani kesan sampingan

useEffect hook digunakan untuk melakukan kesan sampingan dalam komponen fungsi. Ia boleh digunakan untuk mendapatkan semula data, langganan atau perubahan manual pada DOM.

import React, { useEffect, useState } from 'react';

const DataFetcher = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      {data ? <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}

: 'Loading...'}

); }; export default DataFetcher;

Salin selepas log masuk

4. Cangkuk Tersuai untuk melaksanakan logik boleh guna semula

Cangkuk Tersuai membolehkan anda mengekstrak dan menggunakan semula logik dalam komponen yang berbeza. Ini menggalakkan kebolehgunaan semula kod dan memastikan komponen bersih.

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(data => {
        setData(data);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
};

export default useFetch;

5. Paparan bersyarat menggunakan penilaian litar pintas

Gunakan penilaian litar pintas untuk memudahkan pemaparan bersyarat. Ini menjadikan JSX anda lebih ringkas dan boleh dibaca.

const ConditionalRender = ({ isLoggedIn }) => {
  return (
    <div>
      {isLoggedIn && <p>Welcome back!</p>}
      {!isLoggedIn && <p>Please log in.</p>}
    </div>
  );
};

export default ConditionalRender;

6. Pembahagian kod menggunakan React.lazy

Pembahagian kod membantu mengurangkan masa muat awal aplikasi anda dengan membahagikan kod kepada berbilang pakej yang boleh dimuatkan atas permintaan.

import React, { Suspense, lazy } from 'react';

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

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

export default App;

7. Gunakan sempadan ralat untuk pengendalian ralat yang elegan

Sempadan ralat boleh menangkap ralat JavaScript di mana-mana sahaja dalam pepohon komponen anaknya, log ralat tersebut dan memaparkan UI ganti dan bukannya pepohon komponen ranap.

import React from 'react';

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

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

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

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

    return this.props.children;
  }
}

export default ErrorBoundary;

8. Elemen kumpulan menggunakan React.Fragment

React.Fragment membolehkan anda mengumpulkan senarai elemen anak tanpa menambah nod tambahan pada DOM. Ini amat berguna apabila anda perlu mengembalikan berbilang elemen daripada komponen.

const List = () => {
  return (
    <React.Fragment>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </React.Fragment>
  );
};

export default List;

9. Komponen Pesanan Tinggi (HOC) untuk penggunaan semula kod

Komponen tertib tinggi (HOC) ialah corak dalam React untuk menggunakan semula logik komponen. HOC ialah fungsi yang mengambil komponen dan mengembalikan komponen baharu.

const withLogger = (WrappedComponent) => {
  return class extends React.Component {
    componentDidMount() {
      console.log('Component mounted');
    }

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

export default withLogger;

10. Gunakan React.Context untuk pengurusan keadaan global

React.Context menyediakan cara untuk menghantar data melalui pepohon komponen tanpa menghantar prop pada setiap lapisan secara manual. Ini berguna untuk menguruskan keadaan global.

import React, { useState } from 'react';

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

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

export default Counter;

11. Gunakan React.PureComponent untuk mengoptimumkan prestasi

React.PureComponent adalah serupa dengan React.Component, tetapi ia menggunakan prop cetek dan menyatakan perbandingan untuk melaksanakan shouldComponentUpdate. Ini boleh meningkatkan prestasi dengan mengurangkan pemaparan semula yang tidak perlu.

import React from 'react';

const MemoizedComponent = React.memo(({ value }) => {
  console.log('Rendering...');
  return <div>{value}</div>;
});

export default MemoizedComponent;

Kesimpulan

React.js ialah perpustakaan berkuasa yang menyediakan pelbagai ciri dan amalan terbaik untuk membantu pembangun membina aplikasi yang cekap dan mudah diselenggara. Dengan memanfaatkan 11 petua ini, anda boleh menyelaraskan proses pembangunan anda, meningkatkan prestasi dan menulis kod yang lebih bersih dan lebih boleh digunakan semula. Sama ada anda baru bermula dengan React atau ingin meningkatkan kemahiran anda, petua ini akan membantu anda menjadi pembangun React yang lebih mahir.

Selamat pengekodan!

Atas ialah kandungan terperinci Peretasan Berguna React.js Setiap Pembangun Patut Tahu. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!