Apa itu useState () di React?

Saat ini saya sedang mempelajari konsep hook di React dan mencoba untuk memahami contoh di bawah ini.

import { useState } from 'react';

function Example() {
    // Declare a new state variable, which we'll call "count"
    const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Contoh di atas menambah penghitung pada parameter fungsi handler itu sendiri. Bagaimana jika saya ingin mengubah nilai hitungan di dalam fungsi event handler

Pertimbangkan contoh di bawah ini

setCount = () => {
  //how can I modify count value here. Not sure if I can use setState to modify its value
  //also I want to modify other state values as well here. How can I do that
}

<button onClick={() => setCount()}>
  Click me
</button>

React hooks adalah cara baru (masih dikembangkan) untuk mengakses fitur inti react seperti statetanpa harus menggunakan kelas, dalam contoh Anda jika Anda ingin menambah penghitung secara langsung di fungsi handler tanpa menentukannya secara langsung di onClickprop, Anda bisa melakukan sesuatu seperti:

...
const [count, setCounter] = useState(0);
const [moreStuff, setMoreStuff] = useState(...);
...

const setCount = () => {
    setCounter(count + 1);
    setMoreStuff(...);
    ...
};

dan onClick:

<button onClick={setCount}>
    Click me
</button>

Mari kita jelaskan dengan cepat apa yang terjadi di baris ini:

const [count, setCounter] = useState(0);

useState(0)mengembalikan tupel di mana parameter pertama countadalah keadaan penghitung saat ini dan setCountermerupakan metode yang memungkinkan kita untuk memperbarui keadaan penghitung. Kita dapat menggunakan setCountermetode untuk memperbarui status di countmana saja - Dalam hal ini kita menggunakannya di dalam setCountfungsi di mana kita dapat melakukan lebih banyak hal; ide dengan hook adalah bahwa kita dapat menjaga kode kita lebih fungsional dan menghindari komponen berbasis kelas jika tidak diinginkan / diperlukan.

Saya menulis sebuah artikel lengkap tentang kait dengan beberapa contoh (termasuk counter) seperti ini codepen , saya memanfaatkan useState, useEffect, useContext, dan kait kustom . Saya bisa membahas lebih detail tentang bagaimana hook bekerja pada jawaban ini tetapi dokumentasinya melakukan pekerjaan yang sangat baik menjelaskan hook negara dan lainnya secara rinci, semoga ini membantu.

update: Hooks bukan lagi proposal , karena versi 16.8 sekarang tersedia untuk digunakan, ada bagian di situs React yang menjawab beberapa FAQ .

useStateadalah salah satu kait reaksi bawaan yang tersedia dalam 0.16.7versi.

useStateharus digunakan hanya di dalam komponen fungsional. useStateadalah cara jika kita membutuhkan keadaan internal dan tidak perlu mengimplementasikan logika yang lebih kompleks seperti metode siklus hidup.

const [state, setState] = useState(initialState);

Mengembalikan nilai stateful, dan fungsi untuk memperbaruinya.

Selama render awal, status yang dikembalikan (status) sama dengan nilai yang diteruskan sebagai argumen pertama (initialState).

Fungsi setState digunakan untuk memperbarui status. Ini menerima nilai status baru dan mengantre ulang komponen.

Harap dicatat bahwa useStatehook callback untuk memperbarui status berperilaku berbeda dari komponen this.setState. Untuk menunjukkan perbedaannya, saya menyiapkan dua contoh.

class UserInfoClass extends React.Component {
  state = { firstName: 'John', lastName: 'Doe' };
  
  render() {
    return <div>
      <p>userInfo: {JSON.stringify(this.state)}</p>
      <button onClick={() => this.setState({ 
        firstName: 'Jason'
      })}>Update name to Jason</button>
    </div>;
  }
}

// Please note that new object is created when setUserInfo callback is used
function UserInfoFunction() {
  const [userInfo, setUserInfo] = React.useState({ 
    firstName: 'John', lastName: 'Doe',
  });

  return (
    <div>
      <p>userInfo: {JSON.stringify(userInfo)}</p>
      <button onClick={() => setUserInfo({ firstName: 'Jason' })}>Update name to Jason</button>
    </div>
  );
}

ReactDOM.render(
  <div>
    <UserInfoClass />
    <UserInfoFunction />
  </div>
, document.querySelector('#app'));

<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

<div id="app"></div>

Objek baru dibuat saat setUserInfocallback digunakan. Perhatikan kami kehilangan lastNamenilai kunci. Untuk memperbaikinya kita bisa melewatkan fungsi di dalamnya useState.

setUserInfo(prevState => ({ ...prevState, firstName: 'Jason' })

Lihat contoh:

// Please note that new object is created when setUserInfo callback is used
function UserInfoFunction() {
  const [userInfo, setUserInfo] = React.useState({ 
    firstName: 'John', lastName: 'Doe',
  });

  return (
    <div>
      <p>userInfo: {JSON.stringify(userInfo)}</p>
      <button onClick={() => setUserInfo(prevState => ({
        ...prevState, firstName: 'Jason' }))}>
        Update name to Jason
      </button>
    </div>
  );
}

ReactDOM.render(
    <UserInfoFunction />
, document.querySelector('#app'));

<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

<div id="app"></div>

Tidak seperti metode setState yang ditemukan di komponen kelas, useState tidak secara otomatis menggabungkan objek pembaruan. Anda dapat mereplikasi perilaku ini dengan menggabungkan formulir fungsi updater dengan sintaks penyebaran objek:

setState(prevState => {
  // Object.assign would also work
  return {...prevState, ...updatedValues};
});

Untuk lebih lanjut tentang useStatelihat dokumentasi resmi .

Sintaks dari useStatehook sangatlah mudah.

const [value, setValue] = useState(defaultValue)

Jika Anda tidak terbiasa dengan sintaks ini, buka di sini .

Saya akan merekomendasikan Anda membaca dokumentasi . Ada penjelasan yang sangat baik dengan jumlah contoh yang layak.

import { useState } from 'react';

function Example() {
    // Declare a new state variable, which we'll call "count"
    const [count, setCount] = useState(0);
  
  // its up to you how you do it
  const buttonClickHandler = e => {
   // increment
   // setCount(count + 1)
   
   // decrement
   // setCount(count -1)
   
   // anything
   // setCount(0)
  }
  

  return (
       <div>
          <p>You clicked {count} times</p>
         <button onClick={buttonClickHandler}>
             Click me
         </button>
      </div>
   );
 }

useStateadalah salah satu pengait yang tersedia di React v16.8.0. Ini pada dasarnya memungkinkan Anda mengubah komponen non-stateful / fungsional Anda menjadi komponen yang dapat memiliki statusnya sendiri.

Pada tingkat paling dasar, ini digunakan sebagai berikut:

const [isLoading, setLoading] = useState(true);

Ini kemudian memungkinkan Anda memanggil setLoadingmeneruskan nilai boolean. Ini adalah cara yang keren untuk memiliki komponen fungsional "stateful".

useState()adalah hook React. Hook memungkinkan untuk menggunakan status dan mutabilitas di dalam komponen fungsi.

Meskipun Anda tidak bisa menggunakan hook di dalam kelas, Anda bisa membungkus komponen kelas Anda dengan fungsi satu dan menggunakan hook darinya. Ini adalah alat yang hebat untuk memigrasi komponen dari kelas ke bentuk fungsi. Berikut contoh lengkapnya:

Untuk contoh ini saya akan menggunakan komponen penghitung. Ini dia:

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: props.count };
  }
  
  inc() {
    this.setState(prev => ({count: prev.count+1}));
  }
  
  render() {
    return <button onClick={() => this.inc()}>{this.state.count}</button>
  }
}

ReactDOM.render(<Hello count={0}/>, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='root'></div>

Ini adalah komponen kelas sederhana dengan status hitungan, dan pembaruan status dilakukan dengan metode. Ini adalah pola yang sangat umum pada komponen kelas. Hal pertama adalah membungkusnya dengan komponen fungsi dengan nama yang sama, yang mendelegasikan semua propertinya ke komponen yang dibungkus. Anda juga perlu merender komponen yang dibungkus dalam fungsi kembali. Ini dia:

function Hello(props) {
  class Hello extends React.Component {
    constructor(props) {
      super(props);
      this.state = { count: props.count };
    }

    inc() {
      this.setState(prev => ({count: prev.count+1}));
    }

    render() {
      return <button onClick={() => this.inc()}>{this.state.count}</button>
    }
  }
  return <Hello {...props}/>
}

ReactDOM.render(<Hello count={0}/>, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='root'></div>

Ini adalah komponen yang persis sama, dengan perilaku yang sama, nama yang sama, dan properti yang sama. Sekarang mari kita angkat status penghitungan ke komponen fungsi. Beginilah kelanjutannya:

function Hello(props) {
  const [count, setCount] = React.useState(0);
  class Hello extends React.Component {
    constructor(props) {
      super(props);
      this.state = { count: props.count };
    }

    inc() {
      this.setState(prev => ({count: prev.count+1}));
    }

    render() {
      return <button onClick={() => setCount(count+1)}>{count}</button>
    }
  }
  return <Hello {...props}/>
}

ReactDOM.render(<Hello count={0}/>, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js" integrity="sha256-3vo65ZXn5pfsCfGM5H55X+SmwJHBlyNHPwRmWAPgJnM=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js" integrity="sha256-qVsF1ftL3vUq8RFOLwPnKimXOLo72xguDliIxeffHRc=" crossorigin="anonymous"></script>
<div id='root'></div>

Perhatikan bahwa metode incini masih ada, tidak akan merugikan siapa pun, sebenarnya adalah kode mati. Ini idenya, teruslah angkat status. Setelah Anda selesai, Anda dapat menghapus komponen kelas:

function Hello(props) {
  const [count, setCount] = React.useState(0);

  return <button onClick={() => setCount(count+1)}>{count}</button>;
}

ReactDOM.render(<Hello count={0}/>, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js" integrity="sha256-3vo65ZXn5pfsCfGM5H55X+SmwJHBlyNHPwRmWAPgJnM=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js" integrity="sha256-qVsF1ftL3vUq8RFOLwPnKimXOLo72xguDliIxeffHRc=" crossorigin="anonymous"></script>

<div id='root'></div>

Meskipun ini memungkinkan untuk menggunakan kait di dalam komponen kelas, saya tidak akan merekomendasikan Anda untuk melakukannya kecuali jika Anda bermigrasi seperti yang saya lakukan dalam contoh ini. Fungsi pencampuran dan komponen kelas akan membuat manajemen negara menjadi berantakan. saya harap ini membantu

Salam Hormat

useState () adalah contoh hook React bawaan yang memungkinkan Anda menggunakan status dalam komponen fungsional Anda. Ini tidak mungkin dilakukan sebelum React 16.7.

Fungsi useState adalah pengait bawaan yang dapat diimpor dari paket react. Ini memungkinkan Anda untuk menambahkan status ke komponen fungsional Anda. Dengan menggunakan hook useState di dalam komponen fungsi, Anda dapat membuat bagian dari status tanpa beralih ke komponen kelas.

Hooks adalah fitur baru di React v16.7.0-alpha useStateadalah "Hook". useState()setel nilai default dari variabel apapun dan kelola dalam komponen fungsi (fungsi PureComponent). ex : const [count, setCount] = useState(0);atur nilai default dari count 0. dan u dapat digunakan setCountuntuk incrementatau decrementnilainya. onClick={() => setCount(count + 1)}menambah nilai hitungan. DOKTER

Terima kasih loelsonk, saya melakukannya

const [dataAction, setDataAction] = useState({name: '', description: ''});

    const _handleChangeName = (data) => {
        if(data.name)
            setDataAction( prevState  => ({ ...prevState,   name : data.name }));
        if(data.description)
            setDataAction( prevState  => ({ ...prevState,   description : data.description }));
    };
    
    ....return (
    
          <input onChange={(event) => _handleChangeName({name: event.target.value})}/>
          <input onChange={(event) => _handleChangeName({description: event.target.value})}/>
    )

useState adalah pengait yang memungkinkan Anda menambahkan status ke komponen fungsional. Ini menerima argumen yang merupakan nilai awal dari properti negara dan mengembalikan nilai saat ini dari properti negara dan metode yang mampu memperbarui properti negara tersebut.
Berikut ini contoh sederhananya:
import React, {useState} from react
function HookCounter {
const [count, stateCount]= useState(0)
return(
<div>
<button onClick{( ) => setCount(count+1)}> count{count} </button>
</div>
)
}

useState menerima nilai awal dari variabel state yang nol dalam kasus ini dan mengembalikan sepasang nilai. Nilai state saat ini disebut count dan metode yang dapat memperbarui variabel state disebut sebagai setCount.