React Hooks - menggunakan variabel useState vs hanya

12

React Hooks memberi kita opsi useState, dan saya selalu melihat perbandingan Hooks vs Class-State. Tetapi bagaimana dengan Hooks dan beberapa variabel reguler?

Sebagai contoh,

function Foo() {
    let a = 0;
    a = 1;
    return <div>{a}</div>;
}

Saya tidak menggunakan Hooks, dan itu akan memberi saya hasil yang sama seperti:

function Foo() {
    const [a, setA] = useState(0);
    if (a != 1) setA(1); // to avoid infinite-loop
    return <div>{a}</div>;
}

Jadi apa bedanya? Menggunakan Hooks lebih rumit lagi untuk kasus itu ... Jadi mengapa mulai menggunakannya?

— Moshe Nagar
sumber

Anda membandingkan 2 hal yang berbeda. Fungsi kedua dengan kait memiliki kemampuan untuk memperbarui data. Yang pertama tidak benar-benar melakukan apa pun. Anda bisa saja menginisialisasi dengan let a = 1; return <div>{a}</div>dan Anda akan mendapatkan hasil yang sama.

— Yathi

13

Alasannya adalah jika Anda useStatemengubah tampilan. Variabel sendiri hanya mengubah bit dalam memori dan keadaan aplikasi Anda bisa tidak sinkron dengan tampilan.

Bandingkan contoh ini:

function Foo() {
    const [a, setA] = useState(0);
    return <div onClick={() => setA(a + 1)}>{a}</div>;
}

function Foo() {
    let a = 0;
    return <div onClick={() => a + 1}>{a}</div>;
}

Dalam kedua kasus, aperubahan pada klik tetapi hanya ketika Anda menggunakan useStatetampilan dengan benar menunjukkan anilai saat ini.

— marzelin
sumber

Terima kasih! Jadi jika saya tidak perlu membuat tampilan - hanya cara untuk mengatur data saya (alat peraga) ke dalam beberapa array - saya dapat menggunakan 'let'? Ini berfungsi untuk saya, saya hanya ingin tahu itu oke dan bisa diterima.

— Moshe Nagar

@ MosheNagar jika Anda memperoleh data dari alat peraga, disarankan untuk menggunakan variabel lokal daripada menyimpan data dalam keadaan karena komponen akan rerender pada perubahan prop pula sehingga tampilan akan disinkronkan dengan data. Menempatkan mereka dalam keadaan hanya akan menyebabkan rerender yang tidak perlu - pertama pada perubahan prop, kemudian pada perubahan negara.

— marzelin

Satu lagi cara untuk melihat jawaban ini adalah dengan berpikir bahwa dalam kasus kedua, variabel tersebut aakan menjadi sampah yang dikumpulkan setelah selesai dieksekusi, sedangkan pada yang pertama, karena meningkatkannya useStateakan mempertahankan nilaia

— João Marcos Gris

Dia masih bisa menggunakan useRefjika dia tidak ingin membuat kembali tampilan. Pertanyaannya tetap apakah dia harus menggunakan variabel lokal atau Bereaksi referensi. Misalnya jika Anda memiliki batas waktu yang perlu Anda hapus, atau permintaan http yang sedang berjalan menggunakan aksioma, apakah Anda menyimpan sumber waktu habis atau sumber aksioma dalam variabel atau dalam React ref?

— Tom

3

@ Tom Aturan umum adalah menggunakan vars lokal untuk status turunan. Untuk apa pun gunakan useRef(jika Anda tidak ingin rerender) atau useState(jika Anda ingin rerender). Dalam kasus timer, karena mereka adalah efek samping, mereka harus dimulai dengan useEffectkaitan. Jika Anda timerIdhanya ingin untuk tujuan pembersihan, Anda dapat menyimpannya dalam variabel lokal handler . Jika Anda ingin dapat menghapus timer dari tempat lain di komponen, Anda harus menggunakan useRef. Menyimpan timerIddalam variabel lokal komponen akan menjadi kesalahan karena vars lokal "reset" pada setiap render.

— marzelin

1

Status pemutakhiran akan membuat komponen untuk merender kembali, tetapi nilai lokal tidak.

Dalam kasus Anda, Anda memberikan nilai itu di komponen Anda. Itu berarti, ketika nilainya diubah, komponen harus dirender ulang untuk menunjukkan nilai yang diperbarui.

Jadi akan lebih baik untuk digunakan useStatedaripada nilai lokal normal.

function Foo() {
    let a = 0;
    a = 1; // there will be no re-render.
    return <div>{a}</div>;
}

function Foo() {
    const [a, setA] = useState(0);
    if (a != 1) setA(1); // re-render required
    return <div>{a}</div>;
}

— berlian
sumber

0

Contoh pertama Anda hanya berfungsi karena data dasarnya tidak pernah berubah. Titik masuk menggunakan setStateadalah untuk merender seluruh komponen Anda ketika negara hang. Jadi, jika contoh Anda memerlukan semacam perubahan atau manajemen negara, Anda akan segera menyadari bahwa nilai perubahan diperlukan dan untuk memperbarui tampilan dengan nilai variabel, Anda akan memerlukan status dan rerendering.

— 10100111001
sumber

0

function Foo() {
    const [a, setA] = useState(0);
    if (a != 1) setA(1); // to avoid infinite-loop
    return <div>{a}</div>;
}

setara dengan

class Foo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            a: 0
        };
    }
    // ...
}

Apa yang useStatedikembalikan adalah dua hal:

variabel status baru
setter untuk variabel itu

jika Anda menelepon, setA(1)Anda akan menelepon this.setState({ a: 1 })dan memicu render ulang.

— schogges
sumber

0

Variabel lokal akan disetel ulang setiap render saat mutasi sedangkan negara akan memperbarui:

function App() {
  let a = 0; // reset to 0 on render/re-render
  const [b, setB] = useState(0);

  return (
    <div className="App">
      <div>
        {a}
        <button onClick={() => a++}>local variable a++</button>
      </div>
      <div>
        {b}
        <button onClick={() => setB(prevB => prevB + 1)}>
          state variable b++
        </button>
      </div>
    </div>
  );
}

— Drew Reese
sumber