Black Lives Matter. Support the Equal Justice Initiative.
React
v16.13.1 LanguagesGitHub

API Tingkat Atas React

React merupakan entry point untuk menggunakan library React. Apabila Anda mengimpor React menggunakan tag <script>, API tingkat atas ini tersedia pada React global. Apabila Anda menggunakan ES6 dengan npm, Anda dapat mengimpor React dengan menuliskan import React from 'react'. Apabila Anda menggunakan ES5 dengan npm, Anda dapat mengimpor React dengan menuliskan var React = require('react').

Ikhtisar

Komponen

Komponen React membuat Anda dapat memisahkan antarmuka pengguna menjadi bagian yang independen dan dapat digunakan kembali, serta dapat dipikirkan secara terpisah. Komponen React dapat didefinisikan dengan melakukan subclassing pada kelas React.Component atau React.PureComponent.

Apabila Anda tidak menggunakan kelas ES6, Anda dapat menggunakan modul create-react-class. Kunjungi Menggunakan React Tanpa ES6 untuk informasi selengkapnya.

Komponen React juga dapat didefinisikan sebagai fungsi yang dapat dibungkus:

Membuat Elemen React

Kami menyarankan untuk menggunakan JSX untuk mendeskripsikan bagaimana tampilan antarmuka pengguna Anda seharusnya terlihat. Setiap elemen JSX merupakan syntactic sugar untuk memanggil React.createElement(). Anda tidak perlu memanggil method berikut secara langsung apabila Anda menggunakan JSX.

Kunjungi Menggunakan React tanpa JSX untuk informasi selengkapnya.

Mengubah Elemen

React menyediakan beberapa API untuk memanipulasi elemen:

Fragments

React juga menyediakan komponen untuk me-render lebih dari satu elemen tanpa perlu menggunakan pembungkus.

Refs

Suspense

Suspense membuat komponen dapat “menunggu” sesuatu sebelum melakukan rendering. Untuk saat ini, Suspense hanya mendukung satu kasus penggunaan: membuat komponen secara dinamis menggunakan React.lazy. Pada masa yang akan datang, Suspense akan mendukung penggunaan lain seperti pengambilan data.

Hooks

Hooks merupakan fitur baru pada React 16.8. Hook membuat Anda dapat menggunakan state dan fitur React lain tanpa menuliskan sebuah kelas. Hooks memiliki bagian dokumentasi tersendiri dan terpisah dengan referensi API:

Referensi

React.Component

React.Component merupakan kelas pokok untuk komponen React ketika didefinisikan menggunakan kelas ES6:

class Greeting extends React.Component {
  render() {
    return <h1>Halo, {this.props.name}</h1>;
  }
}

Kunjungi Referensi API React.Component untuk melihat daftar method dan property yang berhubungan dengan kelas React.Component.

React.PureComponent

React.PureComponent mirip dengan React.Component. Perbedaannya adalah React.Component tidak mengimplementasikan shouldComponentUpdate(), sedangkan React.PureComponent mengimplementasikannya dengan perbandingan props dan state secara dangkal (shallow).

Apabila fungsi render() pada komponen React Anda me-render hasil yang sama dengan props dan state yang sama juga, Anda dapat menggunakan React.PureComponent untuk meningkatkan kinerja komponen pada kasus tertentu.

Catatan

shouldComponentUpdate() pada React.PureComponent hanya membandingkan objek secara dangkal (shallow compare). Apabila objek tersebut berisi struktur data yang rumit dan dalam, bisa jadi hal ini akan menghasilkan false-negative pada perbandingan yang lebih dalam. Gunakan PureComponent hanya ketika Anda memiliki props dan state yang dangkal, atau gunakan forceUpdate() saat Anda tahu bahwa ada perubahan pada struktur data yang dalam. Atau, cobalah untuk menggunakan immutable object untuk mempercepat proses perbandingan data bersarang.

Selain itu, shouldComponentUpdate() pada React.PureComponent melewati proses pembaruan props pada seluruh komponen dibawahnya. Jadi pastikan semua komponen anaknya juga ”pure“.

React.memo 

const MyComponent = React.memo(function MyComponent(props) {
  /* render menggunakan props */
});

React.memo merupakan sebuah higher order component.

Apabila function component Anda me-render hasil yang sama jika diberikan props yang sama juga, Anda dapat membungkusnya dengan menggunakan React.memo untuk meningkatkan kinerjanya dengan cara menyimpan (memoize) hasil render-nya. Ini artinya React akan melewati proses render komponen, dan menggunakan hasil render terakhir.

React.memo hanya berefek kepada props yang berubah. Jika komponen Anda yang dibungkus dengan React.memo memiliki Hooks useState atau useContext dalam implementasinya, komponen itu akan tetap me-render ulang apabila state atau context berubah.

Secara bawaan React.memo hanya akan membandingkan objek yang kompleks pada objek props secara dangkal (shallow comparison). Apabila Anda ingin membuat perbandingan sendiri, Anda juga dapat memberikan fungsi pembanding custom sebagai argumen kedua.

function MyComponent(props) {
  /* render menggunakan props */
}
function areEqual(prevProps, nextProps) {
  /*
  mengembalikan nilai true apabila dengan mengoper nextProps ke render akan mengembalikan
  hasil yang sama seperti mengoper prevProps ke render,
  selain itu akan mengembalikan nilai false
  */
}
export default React.memo(MyComponent, areEqual);

Method ini hanya digunakan sebagai optimasi kinerja. Jangan menggunakannya untuk “mencegah” render, karena dapat menyebabkan bug.

Catatan

Tidak seperti method shouldComponentUpdate() pada class component, fungsi areEqual mengembalikan nilai true apabila props bernilai sama dan false Apabila props tidak sama. Ini merupakan kebalikan dari shouldComponentUpdate.

createElement() 

React.createElement(
  type,
  [props],
  [...children]
)

Membuat dan mengembalikan elemen React baru berdasarkan type yang diberikan. Argumen type dapat diisi dengan nama tag berupa string (seperti 'div' atau 'span'), komponen React (kelas atau fungsi), atau fragment React.

Kode yang ditulis dengan JSX akan dikonversi menggunakan React.createElement(). Anda tidak perlu menggunakan React.createElement() secara langsung apabila Anda menggunakan JSX. Kunjungi React tanpa JSX untuk informasi selengkapnya.

cloneElement() 

React.cloneElement(
  element,
  [props],
  [...children]
)

Melakukan clone dan mengembalikan elemen React baru berdasarkan elemen yang diberikan. Elemen yang dihasilkan akan memiliki props dari elemen asli (elemen yang di-clone) dengan tambahan props baru yang akan digabungkan secara dangkal. Children baru yang dimasukkan sebagai argumen akan menggantikan children yang sudah ada. Sedangkan key dan ref dari elemen asli akan tetap dipertahankan.

React.cloneElement() mirip dengan:

<element.type {...element.props} {...props}>{children}</element.type>

Namun, React.cloneElement() tetap mempertahankan ref. Ini artinya apabila Anda mendapatkan child yang memiliki ref, Anda tidak akan mencurinya secara tidak sengaja dari ancestor. Anda akan mendapatkan ref yang sama yang dilampirkan ke elemen yang baru.

API ini dikenalkan sebagai pengganti dari React.addons.cloneWithProps().

createFactory() 

React.createFactory(type)

Mengembalikan fungsi yang akan menghasilkan elemen React berdasarkan type yang diberikan. Seperti React.createElement(), argumen type dapat diisi dengan nama tag berupa string (seperti 'div' atau 'span'), komponen React (kelas atau fungsi), atau fragment React.

Helper ini dianggap legacy, dan Kami menganjurkan Anda untuk menggunakan JSX atau React.createElement() secara langsung.

Anda tidak perlu menggunakan React.createFactory() secara langsung apabila Anda menggunakan JSX. Kunjungi React Tanpa JSX untuk informasi selengkapnya.

isValidElement() 

React.isValidElement(object)

Memeriksa apakah objek yang diberikan merupakan elemen React atau bukan. Mengembalikan true atau false.

React.Children

React.Children memberikan utilitas untuk berurusan dengan struktur data this.props.children.

React.Children.map 

React.Children.map(children, function[(thisArg)])

Menjalankan sebuah fungsi pada setiap child yang berada pada children dengan this yang diisikan ke thisArg. Apabila children berbentuk senarai, maka senarai tersebut akan dilewati dan fungsi akan dipanggil untuk setiap child di dalam senarai. Apabila children bernilai null atau undefined, method ini akan mengembalikan nilai null atau undefined daripada senarai.

Catatan

Apabila children merupakan Fragment maka children tersebut akan dianggap sebagai satu child dan tidak akan diproses.

React.Children.forEach 

React.Children.forEach(children, function[(thisArg)])

Mirip dengan React.Children.map() namun tidak mengembalikan senarai.

React.Children.count 

React.Children.count(children)

Mengembalikan jumlah total komponen yang berada di dalam children, jumlah total yang dihasilkan sama dengan berapa kali sebuah callback yang dioper ke map atau forEach akan dijalankan.

React.Children.only 

React.Children.only(children)

Memeriksa apakah children yang diberikan hanya memiliki satu child (elemen React) dan mengembalikannya. Jika tidak method ini akan melempar error.

Catatan:

React.Children.only() mengembalikan nilai yang berbeda dengan React.Children.map() karena React.Children.map() mengembalikan senarai dan bukan elemen React.

React.Children.toArray 

React.Children.toArray(children)

Mengembalikan struktur data children sebagai senarai datar dengan key yang diberikan pada setiap child. Sangat berguna apabila Anda ingin memanipulasi kumpulan children pada method render Anda, terutama apabila Anda ingin mengurutkan atau memotong this.props.children sebelum menurunkannya.

Catatan:

React.Children.toArray() mengubah key untuk mempertahankan semantik dari senarai bersarang ketika meratakan (flatten) daftar children. Itu artinya, toArray menambahkan prefiks di setiap key pada senarai yang dikembalikan sehingga setiap key elemen mencakup senarai masukan yang mengandungnya.

React.Fragment

Komponen React.Fragment membuat Anda dapat mengembalikan lebih dari satu elemen pada method render() tanpa membuat elemen DOM tambahan:

render() {
  return (
    <React.Fragment>
      Beberapa teks.
      <h2>Sebuah heading</h2>
    </React.Fragment>
  );
}

Anda juga dapat menggunakannya dengan menuliskan sintaksis pintas <></>. Untuk informasi selengkapnya, kunjungi React v16.2.0: Improved Support for Fragments.

React.createRef

React.createRef membuat sebuah ref yang dapat dilampirkan ke elemen React melalaui atribut ref. 

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.inputRef = React.createRef();  }

  render() {
    return <input type="text" ref={this.inputRef} />;  }

  componentDidMount() {
    this.inputRef.current.focus();  }
}

React.forwardRef

React.forwardRef membuat komponen React yang dapat meneruskan atribut ref yang diterima ke komponen lain yang berada di bawahnya. teknik ini jarang digunakan tapi sangat berguna pada dua skenario berikut:

React.forwardRef menerima fungsi rendering sebagai argumen. React akan memanggil fungsi ini dengan props dan ref sebagai dua argumen. Fungsi ini akan mengembalikan node React.

const FancyButton = React.forwardRef((props, ref) => (  <button ref={ref} className="FancyButton">    {props.children}
  </button>
));

// You can now get a ref directly to the DOM button:
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

Pada contoh diatas, React mengoper ref yang diberikan ke elemen <FancyButton ref={ref}> sebagai argumen kedua ke fungsi rendering yang berada pada pemanggilan React.forwardRef. Fungsi rendering ini mengoper ref ke elemen <button ref={ref}>.

Hasilnya, setelah React melampirkan ref tersebut, ref.current akan menunjuk ke instansi elemen DOM <button> secara langsung.

Untuk informasi selengkapnya, kunjungi meneruskan ref.

React.lazy

React.lazy() membuat Anda dapat mendefinisikan komponen yang akan dimuat secara dinamis. Ini membantu mengurangi ukuran bundel dengan menunda pemuatan komponen yang tidak digunakan saat render pertama.

Anda dapat belajar cara menggunakan React.lazy() dari dokumentasi pembagian kode kami. Anda mungkin juga ingin melihat artikel ini yang menjelaskan cara menggunakan React.lazy() secara lebih detail.

// Komponen ini dimuat secara dinamis
const SomeComponent = React.lazy(() => import('./SomeComponent'));

Perhatikan bahwa untuk me-render komponen lazy, Anda membutuhkan komponen <React.Suspense> yang berada pada posisi yang lebih tinggi di dalam pohon rendering. Ini merupakan cara bagaimana Anda menentukan indikator pemuatan.

Catatan

Menggunakan React.lazy dengan impor yang dinamis membutuhkan Promises tersedia pada lingkungan JS. Ini membutuhkan polyfill pada IE11 ke bawah.

React.Suspense

React.Suspense membuat Anda dapat menentukan indikator pemuatan apabila beberapa komponen di bawahnya belum siap untuk di-render. Saat ini, komponen lazy loading merupakan satu-satunya kasus penggunaan yang didukung <React.Suspense>:

// Komponen ini dimuat secara dinamis
const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    // Tampilkan <Spinner> hingga OtherComponent dimuat
    <React.Suspense fallback={<Spinner />}>
      <div>
        <OtherComponent />
      </div>
    </React.Suspense>
  );
}

Hal itu didokumentasikan pada panduan pembagian kode kami. Perhatikan bahwa komponen lazy dapat berada jauh di dalam pohon Suspense — komponen tersebut tidak perlu dibungkus secara satu per satu. Sangat disarankan untuk meletakkan <Suspense> dimana Anda ingin melihat indikator pemuatan, akan tetapi untuk menggunakan lazy() dimanapun Anda ingin melakukan pembagian kode.

Meskipun hal ini tidak didukung untuk saat ini, pada masa yang akan datang Kami berencana untuk membuat Suspense dapat menangani lebih banyak skenario seperti pengambilan data. Anda dapat membaca tentang hal ini pada roadmap kami.

Note:

React.lazy() dan <React.Suspense> belum didukung oleh ReactDOMServer. Ini merupakan batasan yang akan diselesaikan pada masa yang akan datang.

Is this page useful?Edit halaman ini