Pengurusan Negeri di React Native

mata teras

Negeri dalam React Native merujuk kepada apa-apa yang berubah dari masa ke masa, seperti kaunter dalam permohonan kaunter atau senarai tugasan dalam aplikasi tugasan. Ia diuruskan menggunakan pelbagai kaedah, termasuk kaedah
• React, API konteks, dan baru -baru ini diperkenalkan cangkuk. setState()
Konteks API menyediakan cara untuk lulus data dalam pokok komponen tanpa prop lulus secara manual di setiap lapisan, dengan itu mengelakkan masalah yang dipanggil "props penggerudian". Ia membolehkan data dipindahkan secara langsung antara komponen.
React cangkuk diperkenalkan dalam React v16.8, memudahkan cara keadaan digunakan dalam React. Mereka membenarkan penggunaan keadaan dalam komponen fungsi, mengurangkan bilangan baris kod dan membuat kod lebih mudah dibaca.
Perkongsian negeri merentasi komponen boleh dicapai dengan mengangkat negeri ke komponen induk. Amalan ini, walaupun tidak selalu mudah, adalah perkara biasa dalam bertindak balas dan membantu mencegah komponen induk daripada menjadi objek negara yang besar.

Pengurusan negeri adalah salah satu konsep yang paling sukar untuk menguasai dalam pembelajaran bertindak balas asli, kerana terdapat banyak cara untuk melaksanakannya. Terdapat banyak perpustakaan pengurusan negeri yang banyak di pendaftaran NPM -seperti Redux -dan terdapat banyak perpustakaan yang dibina di perpustakaan pengurusan negeri yang lain untuk memudahkan perpustakaan asal itu sendiri -seperti Redux mudah. Perpustakaan pengurusan negeri baru diperkenalkan dalam React setiap minggu, tetapi sejak pengenalan React, konsep asas mengekalkan keadaan aplikasi tetap sama.

Cara yang paling biasa untuk menetapkan keadaan dalam React Native adalah dengan menggunakan kaedah React's

. Kami juga boleh menggunakan API konteks untuk mengelakkan penggerudian prop dan lulus keadaan berbilang lapisan tanpa lulus kepada subkomponen individu di dalam pokok. setState()

Baru -baru ini, cangkuk muncul dalam React v16.8.0, mod baru yang memudahkan penggunaan keadaan dalam React. React Native mendapatnya dalam v0.59.

Dalam tutorial ini, kita akan mempelajari apa sebenarnya yang dimaksudkan dengan keadaan, serta kaedah

, API konteks, dan cangkuk React. Ini adalah asas untuk menetapkan keadaan dalam React Native. Semua perpustakaan dibina berdasarkan konsep asas di atas. Oleh itu, apabila anda memahami konsep -konsep ini, mudah untuk memahami perpustakaan atau membuat perpustakaan pengurusan negeri anda sendiri. setState()

Ingin belajar React Native dari awal? Artikel ini dikutip dari Perpustakaan Lanjutan kami. Sertai SitePoint Premium sekarang untuk koleksi buku asli yang lengkap yang meliputi asas, projek, tip, dan alat, hanya $ 9 sebulan.

Apakah status?

apa -apa yang berubah dari masa ke masa dipanggil keadaan. Jika kita mempunyai permohonan kaunter, negara adalah kaunter itu sendiri. Jika kita mempunyai aplikasi tugasan, senarai tugasan berubah dari masa ke masa, jadi senarai ini akan menjadi status. Malah elemen input adalah keadaan dalam erti kata, kerana ia berubah dari masa ke masa apabila pengguna menaipnya.

SetState PENGENALAN

Sekarang kita tahu apa keadaan, mari kita faham bagaimana React menyimpannya.

Pertimbangkan aplikasi kaunter yang mudah:

<code class="language-javascript">import React from 'react';
import { Text, Button } from 'react-native';

class Counter extends React.Component {
  state = {
    counter: 0,
  };

  render() {
    const { counter } = this.state;
    return (
      <>
        <text>{counter}</text>
        <button title="Increment" onpress="{()"> this.setState({ counter: counter + 1 })} />
        <button title="Decrement" onpress="{()"> this.setState({ counter: counter - 1 })} />
      </>
    );
  }
}</button></button></code>

Dalam permohonan ini, kami menyimpan Negeri dalam objek dalam pembina dan menyerahkannya kepada this.state.

ingat bahawa keadaan hanya boleh menjadi satu objek. Anda tidak boleh menyimpan nombor secara langsung. Inilah sebabnya kami membuat pembolehubah counter di dalam objek.

Dalam kaedah render, kita membongkar atribut this.state dari counter dan menjadikannya dalam <h1></h1>. Perhatikan bahawa pada masa ini ia hanya akan memaparkan nilai statik (0).

anda juga boleh menulis negeri di luar pembina seperti berikut:

<code class="language-javascript">import React from 'react';
import { Text, Button } from 'react-native';

class Counter extends React.Component {
  state = { counter: 0 };

  render() {
    const { counter } = this.state;
    return (
      <>
        <text>{counter}</text>
        <button title="Increment" onpress="{()"> this.setState({ counter: counter + 1 })} />
        <button title="Decrement" onpress="{()"> this.setState({ counter: counter - 1 })} />
      </>
    );
  }
}</button></button></code>

sekarang anggap kita mahu butang "" dan "-" berfungsi. Kita perlu menulis beberapa kod di dalam pengendali onPress masing -masing:

<code class="language-javascript">import React from 'react';
import { Text, Button } from 'react-native';

class Counter extends React.Component {
  state = { counter: 0 };

  render() {
    const { counter } = this.state;
    return (
      <>
        <text>{counter}</text>
        <button title="Increment" onpress="{()"> this.setState(prevState => ({ counter: prevState.counter + 1 }))} />
        <button title="Decrement" onpress="{()"> this.setState(prevState => ({ counter: prevState.counter - 1 }))} />
      </>
    );
  }
}</button></button></code>

Sekarang, apabila kita mengklik butang "" "dan"-", bertindak balas semula komponen. Ini kerana kaedah setState() digunakan.

Kaedah

setState() membentuk semula sebahagian daripada pokok yang diubah. Dalam kes ini, ia semula menjadi <h1></h1>.

jadi jika kita mengklik ", ia akan meningkatkan kaunter dengan 1. Jika kita mengklik "-", ia akan mengurangkan kaunter dengan 1.

ingat bahawa anda tidak boleh mengubah status secara langsung dengan menukar this.state; this.state = counter 1

Di samping itu, perubahan keadaan adalah operasi tak segerak, yang bermaksud bahawa jika anda membaca

sejurus selepas memanggil this.setState, ia tidak akan mencerminkan perubahan terkini. this.state

di sini, kami menggunakan sintaks "fungsi sebagai panggilan balik" untuk menggunakan

seperti yang ditunjukkan di bawah: setState()

<code class="language-javascript">import React from 'react';
import { Text, Button } from 'react-native';

class Counter extends React.Component {
  state = { counter: 0 };

  render() {
    const { counter } = this.state;
    return (
      <>
        <text>{counter}</text>
        <button title="Increment" onpress="{()"> this.setState(prevState => ({ counter: prevState.counter + 1 }))} />
        <button title="Decrement" onpress="{()"> this.setState(prevState => ({ counter: prevState.counter - 1 }))} />
      </>
    );
  }
}</button></button></code>

"Fungsi sebagai panggilan balik" Sintaks menyediakan keadaan terkini - dalam kes ini

- sebagai parameter kepada kaedah prevState. setState()

Dengan cara ini, kita boleh mendapatkan perubahan terkini kepada negara.

Apa itu cangkuk?

cangkuk adalah ciri baru dalam React v16.8. Terdahulu, anda hanya boleh menggunakan Negeri dengan membuat komponen kelas. Anda tidak boleh menggunakan keadaan dalam komponen fungsi itu sendiri.

Dengan penambahan cangkuk, anda boleh menggunakan keadaan dalam komponen fungsi itu sendiri.

mari kita menukar komponen kelas

di atas ke Counter komponen fungsi dan gunakan cangkuk reaksi: Counter

<code class="language-javascript">import React from 'react';
import { Text, Button } from 'react-native';

const Counter = () => {
  const [counter, setCounter] = React.useState(0);
  return (
    <>
      <text>{counter}</text>
      <button title="Increment" onpress="{()"> setCounter(counter + 1)} />
      <button title="Decrement" onpress="{()"> setCounter(counter - 1)} />
    </>
  );
};</button></button></code>

Perhatikan bahawa kami mengurangkan bilangan baris kod untuk komponen kelas dari 18 hingga hanya 12 baris. Di samping itu, kod itu lebih mudah dibaca.

mari kita semak kod di atas. Pertama, kami menggunakan kaedah terbina dalam

React. useState boleh menjadi jenis -jenis seperti nombor, rentetan, array, boolean, objek, atau apa -apa jenis data -tidak seperti useState, setState() hanya boleh mempunyai satu objek. setState()

Dalam contoh kaunter kami, ia mengambil nombor dan mengembalikan array yang mengandungi dua nilai.

Nilai pertama dalam

nilai pertama dalam array ialah nilai keadaan semasa. Oleh itu, counter kini 0.

Nilai kedua dalam

nilai kedua dalam array adalah fungsi yang membolehkan anda mengemas kini nilai keadaan.

Dalam onPress kami, kami boleh menggunakan setCounter untuk mengemas kini counter secara langsung.

Oleh itu, fungsi tambahan kami menjadi

dan fungsi penurunan kami menjadi setCounter(counter 1). setCounter(counter - 1)

React mempunyai banyak cangkuk terbina dalam seperti

, useState, useEffect, useContext, useReducer, useCallback, useMemo, useRef, useImperativeHandle, useLayoutEffect, useDebugValue,

,

dan

- Anda boleh mendapatkan lebih banyak maklumat dalam dokumentasi Hooks React.

Di samping itu, kita boleh membina cangkuk tersuai kita sendiri.

1. Dua peraturan dikehendaki diikuti semasa membina atau menggunakan cangkuk: useState useEffect
cangkuk panggilan di peringkat atas sahaja. Jangan panggil cangkuk dalam gelung, keadaan, atau fungsi bersarang. Sebaliknya, selalu gunakan cangkuk di peringkat teratas fungsi React. Dengan mengikuti peraturan ini, anda dapat memastikan bahawa cangkuk dipanggil dalam urutan yang sama setiap kali komponen membuat. Inilah sebabnya React dibenarkan untuk mengekalkan keadaan cangkuk dengan betul antara panggilan pelbagai
2. dan
.

cangkuk panggilan dari fungsi React sahaja. Jangan panggil cangkuk dari fungsi JavaScript biasa. Sebaliknya, anda boleh memanggil cangkuk dari komponen fungsi React atau dari cangkuk tersuai.

Dengan mengikuti peraturan ini, anda dapat memastikan bahawa semua logik negara dalam komponen dapat dilihat dari kod sumbernya.

cangkuk sangat mudah difahami dan berguna apabila menambah keadaan untuk berfungsi komponen.

Konteks Api

Konteks menyediakan cara untuk lulus data dalam pokok komponen tanpa prop lulus secara manual di setiap lapisan.

theme Dalam aplikasi Native React biasa, data diluluskan dari atas ke bawah melalui prop. Sekiranya terdapat pelbagai tahap komponen dalam aplikasi React dan komponen kanak -kanak yang terakhir dalam pokok komponen ingin mengambil data dari komponen induk paling teratas, anda mesti lulus prop ke bawah secara individu. App Pic Pertimbangkan contoh berikut. Kami mahu lulus nilai

dari komponen

<code class="language-javascript">import React from 'react';
import { Text, Button } from 'react-native';

class Counter extends React.Component {
  state = {
    counter: 0,
  };

  render() {
    const { counter } = this.state;
    return (
      <>
        <text>{counter}</text>
        <button title="Increment" onpress="{()"> this.setState({ counter: counter + 1 })} />
        <button title="Decrement" onpress="{()"> this.setState({ counter: counter - 1 })} />
      </>
    );
  }
}</button></button></code>

ke komponen

. Biasanya, jika kita tidak menggunakan konteks, kita akan lulus melalui setiap peringkat pertengahan, seperti: theme

Nilai

diluluskan dari app -& gt; Masalah di atas dipanggil penggerudian prop.

Ini adalah contoh mudah, tetapi pertimbangkan aplikasi sebenar dengan berpuluh -puluh tahap yang berbeza.

Ia menjadi sukar untuk lulus data melalui setiap komponen kanak -kanak hanya untuk menggunakannya dalam komponen anak terakhir. Jadi kita mempunyai konteks. Konteks membolehkan kami lulus data secara langsung dari app -& gt;

Berikut adalah cara menggunakan API konteks:

<code class="language-javascript">import React from 'react';
import { Text, Button } from 'react-native';

class Counter extends React.Component {
  state = {
    counter: 0,
  };

  render() {
    const { counter } = this.state;
    return (
      <>
        <text>{counter}</text>
        <button title="Increment" onpress="{()"> this.setState({ counter: counter + 1 })} />
        <button title="Decrement" onpress="{()"> this.setState({ counter: counter - 1 })} />
      </>
    );
  }
}</button></button></code>

Pertama, kami menggunakan API React.createContext untuk membuat ThemeContext. Kami menetapkan light ke nilai lalai.

Kemudian, kita menggunakan theme untuk membungkus elemen akar komponen ThemeContext.Provider dengan App apabila kami menyediakan

sebagai prop.

ThemeContext.Consumer Akhirnya, kami menggunakan theme sebagai prop rendering untuk mendapatkan nilai dark adalah

.

ThemeContext.Consumer Rendering mod prop adalah baik, tetapi jika kita mempunyai banyak konteks, ia boleh menyebabkan neraka panggil balik. Untuk mengelakkan neraka panggil balik, kita boleh menggunakan cangkuk dan bukannya

.

Profile Satu -satunya perkara yang perlu kita ubah ialah Butiran Pelaksanaan Komponen

:

<code class="language-javascript">import React from 'react';
import { Text, Button } from 'react-native';

class Counter extends React.Component {
  state = { counter: 0 };

  render() {
    const { counter } = this.state;
    return (
      <>
        <text>{counter}</text>
        <button title="Increment" onpress="{()"> this.setState({ counter: counter + 1 })} />
        <button title="Decrement" onpress="{()"> this.setState({ counter: counter - 1 })} />
      </>
    );
  }
}</button></button></code>

Dengan cara ini, kita tidak perlu bimbang tentang panggilan balik.

Negeri dikongsi di seluruh komponen

Setakat ini, kami hanya menguruskan keadaan dalam komponen itu sendiri. Sekarang kita akan memahami bagaimana menguruskan keadaan antara komponen.

Katakan kami membuat aplikasi senarai tugasan mudah seperti yang ditunjukkan di bawah:

<code class="language-javascript">import React from 'react';
import { Text, Button } from 'react-native';

class Counter extends React.Component {
  state = { counter: 0 };

  render() {
    const { counter } = this.state;
    return (
      <>
        <text>{counter}</text>
        <button title="Increment" onpress="{()"> this.setState(prevState => ({ counter: prevState.counter + 1 }))} />
        <button title="Decrement" onpress="{()"> this.setState(prevState => ({ counter: prevState.counter - 1 }))} />
      </>
    );
  }
}</button></button></code>

AddTodo Sekarang, jika kita mahu menambah tugasan dari komponen TodoList, bagaimanakah ia akan dipaparkan dalam komponen todos

? Jawapannya adalah "keadaan tinggi".

Jika dua komponen saudara ingin berkongsi negeri, mereka mesti dinaikkan pangkat ke komponen induk. Contoh lengkap harus kelihatan seperti ini:

<code class="language-javascript">import React from 'react';
import { Text, Button } from 'react-native';

class Counter extends React.Component {
  state = { counter: 0 };

  render() {
    const { counter } = this.state;
    return (
      <>
        <text>{counter}</text>
        <button title="Increment" onpress="{()"> this.setState(prevState => ({ counter: prevState.counter + 1 }))} />
        <button title="Decrement" onpress="{()"> this.setState(prevState => ({ counter: prevState.counter - 1 }))} />
      </>
    );
  }
}</button></button></code>

App di sini, kami menyelamatkan keadaan dalam komponen useState. Kami menggunakan React Hook todos untuk menyimpan

sebagai array kosong.

addTodo maka kita lulus kaedah AddTodo ke komponen todos dan lulus array TodoList ke komponen

.

Komponen AddTodo addTodo menerima kaedah

sebagai prop. Kaedah ini harus dipanggil selepas menekan butang.

TextInput Kami juga mempunyai elemen useState, yang juga menggunakan cangkuk React TextInput untuk menjejaki nilai perubahan

.

App Selepas menekan butang, kami akan memanggil kaedah addTodo yang diluluskan dari ibu bapa todos. Ini memastikan bahawa item tugasan ditambah ke senarai TextInput. Kami akan membersihkan kotak

kemudian.

TodoList todos Komponen menerima

dan membentangkannya untuk melakukan senarai.

Anda juga boleh cuba memadam item tugasan untuk mengamalkan memperbaiki diri anda. Inilah penyelesaiannya:

<code class="language-javascript">import React from 'react';
import { Text, Button } from 'react-native';

const Counter = () => {
  const [counter, setCounter] = React.useState(0);
  return (
    <>
      <text>{counter}</text>
      <button title="Increment" onpress="{()"> setCounter(counter + 1)} />
      <button title="Decrement" onpress="{()"> setCounter(counter - 1)} />
    </>
  );
};</button></button></code>

Ini adalah amalan yang paling biasa dalam React. Peningkatan ini tidak semudah yang kelihatannya. Ini adalah contoh yang mudah, tetapi dalam aplikasi sebenar kita tidak tahu negeri mana yang perlu dipromosikan kepada ibu bapa untuk digunakan dalam komponen saudara. Oleh itu, pertama, Negeri disimpan dalam komponen itu sendiri, dan hanya apabila keadaan berlaku apabila perlu untuk berkongsi keadaan antara komponen, Negeri dipromosikan kepada ibu bapa.

Dengan cara ini, anda tidak membuat komponen induk objek negara besar.

Kesimpulan

semua dalam semua, kita faham apa keadaan dan bagaimana untuk menetapkan nilai negeri menggunakan API setState() yang disediakan oleh React. Kami juga belajar tentang cangkuk React, yang menjadikannya mudah untuk menambah keadaan untuk berfungsi komponen tanpa menukarnya ke dalam komponen kelas.

kami mempelajari API Konteks Baru dan versi cangkuknya useContext, yang membantu kami mengelakkan memberikan neraka panggil balik prop.

Akhirnya, kita belajar bagaimana untuk memperbaiki keadaan untuk berkongsi keadaan di kalangan komponen saudara.

React menjadi sangat mudah apabila anda memahami konsep teras ini. Ingatlah untuk menjaga negeri tempatan ke komponen sebanyak mungkin. Gunakan API konteks hanya jika penggerudian prop menjadi masalah. Menggalakkan keadaan hanya jika diperlukan.

Akhir sekali, apabila aplikasi anda menjadi rumit dan sukar untuk debug perubahan keadaan, periksa perpustakaan pengurusan negeri seperti Redux dan Mobx.

Soalan Lazim Mengenai React Native State Management

Apakah pengurusan negeri di React Native? Pengurusan negeri di React Native merujuk kepada pengurusan dan pemprosesan negara (data dan logik UI) dalam aplikasi Native React. Ia melibatkan pengemaskinian dan penyegerakan negara -negara yang cekap dalam komponen yang berlainan dalam aplikasi.

Kenapa pengurusan negeri penting dalam pembangunan asli React? Pengurusan negeri adalah penting untuk bertindak balas kerana ia mengekalkan dan mengemas kini data dinamik dan antara muka pengguna aplikasi. Ia memastikan bahawa perubahan dalam sebahagian daripada aplikasi itu ditunjukkan dengan tepat di bahagian lain, memberikan pengalaman pengguna yang lancar dan responsif.

Apakah cara yang berbeza untuk menguruskan keadaan dalam React Native? React Native menyediakan pelbagai kaedah pengurusan negeri, termasuk keadaan komponen tempatan, cangkuk Reacts (

), redux, mobx, dan API konteks. Pilihan bergantung kepada kerumitan dan keperluan khusus permohonan. useState

Bilakah saya harus menggunakan keadaan komponen tempatan dengan penyelesaian pengurusan negara global seperti Redux atau Mobx? Untuk mudah, pengurusan negeri tempatan dalam komponen, gunakan keadaan komponen tempatan. Bagi aplikasi yang kompleks yang berkongsi keadaan di antara pelbagai komponen, pertimbangkan untuk menggunakan penyelesaian pengurusan negara global seperti Redux atau Mobx untuk mengekalkan keadaan berpusat dan mudah diakses.

Bagaimanakah API konteks memudahkan pengurusan negeri dalam React Native? API konteks adalah ciri dalam React yang membolehkan komponen untuk berkongsi keadaan tanpa secara jelas melewati prop melalui pokok komponen. Ia berguna untuk menguruskan keadaan global tanpa memerlukan perpustakaan tambahan seperti Redux.

Output yang disemak ini mengekalkan lokasi dan format imej asal, menyusun semula teks untuk keaslian sambil memelihara makna teras, dan menangani keperluan prompt.

Atas ialah kandungan terperinci Pengurusan Negeri di React Native. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!