Saya menonton kursus Pluralsight on React dan instruktur menyatakan bahwa alat peraga tidak boleh diubah. Saya sekarang sedang membaca sebuah artikel (uberVU / reaksi-panduan) tentang alat peraga vs negara dan katanya

Perubahan props dan perubahan status memicu pembaruan render.

Kemudian di artikel itu tertulis:

Alat peraga (kependekan dari properti) adalah konfigurasi Komponen, opsi jika memungkinkan. Mereka diterima dari atas dan tidak berubah.

• Jadi alat peraga dapat berubah tetapi harus tidak berubah?
• Kapan Anda harus menggunakan alat peraga dan kapan Anda harus menggunakan status?
• Jika Anda memiliki data yang diperlukan komponen Bereaksi, haruskah itu diteruskan melalui alat peraga atau pengaturan di komponen Bereaksi via getInitialState?

Alat peraga dan negara terkait. Keadaan satu komponen akan sering menjadi penyangga komponen anak. Alat peraga diteruskan ke anak dalam metode render orang tua sebagai argumen kedua React.createElement()atau, jika Anda menggunakan JSX, atribut tag yang lebih akrab.

<MyChild name={this.state.childsName} />

Nilai status orang tua childsNamemenjadi anak this.props.name. Dari sudut pandang anak, nama prop tidak dapat diubah. Jika perlu diubah, orang tua hanya perlu mengubah keadaan internalnya:

this.setState({ childsName: 'New name' });

dan Bereaksi akan menyebarkannya kepada anak untuk Anda. Pertanyaan tindak lanjut yang wajar adalah: bagaimana jika anak perlu mengganti namanya prop? Ini biasanya dilakukan melalui acara anak dan panggilan balik orang tua. Anak itu mungkin mengekspos suatu peristiwa yang disebut, misalnya onNameChanged,. Orang tua kemudian akan berlangganan acara tersebut dengan melewati penangan panggilan balik.

<MyChild name={this.state.childsName} onNameChanged={this.handleName} />

Anak itu akan meneruskan nama baru yang diminta sebagai argumen untuk panggilan balik acara dengan memanggil, misalnya this.props.onNameChanged('New name'), dan orang tua akan menggunakan nama dalam pengendali acara untuk memperbarui keadaannya.

handleName: function(newName) {
   this.setState({ childsName: newName });
}

Untuk komunikasi orang tua-anak, cukup lewati alat peraga.

Gunakan status untuk menyimpan data yang dibutuhkan halaman Anda saat ini di tampilan controller Anda.

Gunakan alat peraga untuk meneruskan data & penangan acara ke komponen anak Anda.

Daftar ini akan membantu memandu Anda ketika bekerja dengan data dalam komponen Anda.

Atribut

• tidak kekal
  • yang memungkinkan Bereaksi melakukan pemeriksaan referensi cepat
• digunakan untuk meneruskan data dari view-controller Anda
  • komponen tingkat atas Anda
• memiliki kinerja yang lebih baik
  • gunakan ini untuk meneruskan data ke komponen anak

Negara

• harus dikelola di view-controller Anda
  • komponen tingkat atas Anda
• bisa berubah
• memiliki kinerja yang lebih buruk
• tidak boleh diakses dari komponen anak
  • turunkan itu dengan alat peraga sebagai gantinya

Untuk komunikasi antara dua komponen yang tidak memiliki hubungan orangtua-anak, Anda dapat mengatur sistem acara global Anda sendiri. Berlangganan acara di componentDidMount (), berhenti berlangganan di componentWillUnmount (), dan panggil setState () saat Anda menerima suatu peristiwa. Pola fluks adalah salah satu cara yang mungkin untuk mengatur ini. - https://facebook.github.io/react/tips/communicate-between-components.html

Komponen Apa Yang Harus Dimiliki Negara?

Sebagian besar komponen Anda hanya harus mengambil beberapa data dari alat peraga dan membuatnya. Namun, terkadang Anda perlu menanggapi input pengguna, permintaan server atau berlalunya waktu. Untuk ini, Anda menggunakan negara.

Usahakan agar komponen Anda sebanyak mungkin tanpa kewarganegaraan . Dengan melakukan ini, Anda akan mengisolasi negara ke tempat yang paling logis dan meminimalkan redundansi, membuatnya lebih mudah untuk mempertimbangkan aplikasi Anda.

Pola umum adalah membuat beberapa komponen stateless yang hanya membuat data, dan memiliki komponen stateful di atasnya dalam hierarki yang meneruskan statusnya kepada anak-anaknya melalui alat peraga. Komponen stateful merangkum semua logika interaksi, sementara komponen stateless mengatur rendering data dengan cara deklaratif. - https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-components-should-have-state

Apa yang Harus Masuk Negara?

Status harus berisi data yang dapat diubah oleh pengendali acara komponen untuk memicu pembaruan UI. Dalam aplikasi nyata, data ini cenderung sangat kecil dan JSON-serializable. Saat membangun komponen stateful, pikirkan representasi minimum yang mungkin dari state-nya, dan simpan saja properti-properti itu di status ini. Di dalam render () cukup hitung informasi lain yang Anda butuhkan berdasarkan kondisi ini. Anda akan menemukan bahwa memikirkan dan menulis aplikasi dengan cara ini cenderung mengarah ke aplikasi yang paling benar, karena menambahkan nilai-nilai yang berlebihan atau dikomputasi ke negara berarti bahwa Anda perlu secara eksplisit menyimpannya dalam sinkronisasi daripada mengandalkan Bereaksi menghitungnya untuk Anda. - https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-should-go-in-state

Anda dapat memahaminya dengan menghubungkannya dengan fungsi Plain JS.

Sederhananya,

Keadaan adalah keadaan lokal dari komponen yang tidak dapat diakses dan dimodifikasi di luar komponen. Ini setara dengan variabel lokal dalam suatu fungsi.

Fungsi JS Biasa

const DummyFunction = () => {
  let name = 'Manoj';
  console.log(`Hey ${name}`)
}

Bereaksi Komponen

class DummyComponent extends React.Component {
  state = {
    name: 'Manoj'
  }
  render() {
    return <div>Hello {this.state.name}</div>;
  }

Alat peraga , di sisi lain, membuat komponen dapat digunakan kembali dengan memberikan komponen kemampuan untuk menerima data dari komponen induknya dalam bentuk alat peraga. Mereka setara dengan parameter fungsi.

Fungsi JS Biasa

const DummyFunction = (name) => {
  console.log(`Hey ${name}`)
}

// when using the function
DummyFunction('Manoj');
DummyFunction('Ajay');

Bereaksi Komponen

class DummyComponent extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }

}

// when using the component
<DummyComponent name="Manoj" />
<DummyComponent name="Ajay" />

Penghargaan: Manoj Singh Negi

Artikel Link: React State vs Props menjelaskan

Ringkasan props vs state yang paling saya sukai ada di sini: panduan reaksi Tip topi besar untuk mereka. Di bawah ini adalah versi halaman yang diedit:

alat peraga vs negara

tl; dr Jika Komponen perlu mengubah salah satu atributnya pada suatu saat, atribut itu harus menjadi bagian dari kondisinya, jika tidak, itu hanya akan menjadi penyangga untuk Komponen itu.

Atribut

Alat peraga (kependekan dari properti) adalah konfigurasi Komponen. Mereka diterima dari atas dan tidak berubah sejauh Komponen yang menerimanya bersangkutan. Suatu Komponen tidak dapat mengubah alat peraga, tetapi ia bertanggung jawab untuk menyatukan alat peraga dari Komponen anaknya. Alat peraga tidak harus hanya berupa data - fungsi panggilan balik dapat dilewatkan sebagai alat peraga.

negara

Status adalah struktur data yang dimulai dengan nilai default ketika Komponen mount. Mungkin dimutasi sepanjang waktu, sebagian besar sebagai akibat dari peristiwa pengguna.

Komponen mengelola keadaannya sendiri secara internal. Selain menetapkan keadaan awal, ia tidak memiliki bisnis mengutak-atik keadaan anak-anaknya. Anda dapat mengkonsep negara sebagai pribadi ke komponen itu.

Mengubah alat peraga dan negara

                                                   alat peraga negara
    Bisakah mendapatkan nilai awal dari Komponen induk? ya ya
    Dapat diubah oleh Komponen induk? ya Tidak
    Dapat menetapkan nilai default di dalam Komponen? * Ya Ya
    Bisakah mengubah di dalam Komponen? Tidak iya
    Dapat menetapkan nilai awal untuk Komponen anak? ya ya
    Dapat mengubah Komponen anak? ya Tidak

• Perhatikan bahwa baik alat peraga dan nyatakan nilai awal yang diterima dari orang tua menimpa nilai default yang ditentukan di dalam Komponen.

Haruskah Komponen ini memiliki status?

Status adalah opsional. Karena status meningkatkan kompleksitas dan mengurangi kemampuan prediksi, Komponen tanpa kondisi lebih disukai. Meskipun Anda jelas tidak dapat melakukannya tanpa status dalam aplikasi interaktif, Anda harus menghindari memiliki terlalu banyak Komponen Nikmat.

Jenis komponen

Komponen Stateless Hanya Komponen , tidak ada status. Tidak banyak yang terjadi selain fungsi render (). Logika mereka berputar di sekitar alat peraga yang mereka terima. Ini membuat mereka sangat mudah diikuti, dan diuji.

Komponen stateful Baik alat peraga dan negara. Ini digunakan ketika komponen Anda harus mempertahankan beberapa keadaan. Ini adalah tempat yang baik untuk komunikasi klien-server (XHR, soket web, dll.), Memproses data dan menanggapi peristiwa pengguna. Logistik semacam ini harus dienkapsulasi dalam jumlah yang cukup dari Komponen Negara, sementara semua visualisasi dan pemformatan logika harus pindah ke hilir ke banyak Komponen Tanpa Negara.

sumber

• Pertanyaan tentang 'properti' dan 'status' - Google Groups
• Berpikir dalam Bereaksi: Identifikasi di mana negara Anda seharusnya tinggal

props (kependekan dari "properties") dan state keduanya adalah objek JavaScript. Sementara keduanya menyimpan informasi yang mempengaruhi output dari render, keduanya berbeda dalam satu cara penting: alat peraga diteruskan ke komponen (mirip dengan parameter fungsi) sedangkan status dikelola dalam komponen (mirip dengan variabel yang dideklarasikan dalam suatu fungsi).

Jadi sederhananya status terbatas pada komponen Anda saat ini tetapi alat peraga dapat diteruskan ke komponen apa pun yang Anda inginkan ... Anda dapat melewati status komponen saat ini sebagai penyangga untuk komponen lain ...

Juga dalam Bereaksi, kami memiliki komponen stateless yang hanya memiliki alat peraga dan bukan status internal ...

Contoh di bawah ini menunjukkan cara kerjanya di aplikasi Anda:

Induk (komponen negara penuh):

class SuperClock extends React.Component {

  constructor(props) {
    super(props);
    this.state = {name: "Alireza", date: new Date().toLocaleTimeString()};
  }

  render() {
    return (
      <div>
        <Clock name={this.state.name} date={this.state.date} />
      </div>
    );
  }
}

Anak (komponen tanpa-negara):

const Clock = ({name}, {date}) => (
    <div>
      <h1>{`Hi ${name}`}.</h1>
      <h2>{`It is ${date}`}.</h2>
    </div>
);

Perbedaan utama antara alat peraga dan keadaan adalah bahwa keadaan internal dan dikontrol oleh komponen itu sendiri sementara props eksternal dan dikendalikan oleh apa pun yang membuat komponen.

function A(props) {
  return <h1>{props.message}</h1>
}

render(<A message=”hello” />,document.getElementById(“root”));

class A extends React.Component{  
  constructor(props) {  
    super(props)  
    this.state={data:"Sample Data"}  
  }  
  render() {
    return(<h2>Class State data: {this.state.data}</h2>)  
  } 
}

render(<A />, document.getElementById("root"));

• Negara dapat diubah (Mutable)
• Sedangkan Alat Peraga tidak bisa (Tidak Berubah)

Pada dasarnya, perbedaannya adalah bahwa state adalah sesuatu seperti atribut dalam OOP : itu adalah sesuatu yang bersifat lokal untuk suatu kelas (komponen), yang digunakan untuk menggambarkannya dengan lebih baik. Alat peraga seperti parameter - mereka diteruskan ke komponen dari penelepon komponen (induk): seolah-olah Anda memanggil fungsi dengan parameter tertentu.

Kedua keadaan dan alat peraga dalam reaksi digunakan untuk mengontrol data menjadi suatu komponen, umumnya alat peraga diatur oleh orang tua dan diteruskan ke komponen anak dan mereka diperbaiki di seluruh komponen. Untuk data yang akan berubah, kita harus menggunakan status. Dan alat peraga tidak berubah sementara status bisa berubah , jika Anda ingin mengubah alat peraga yang dapat Anda lakukan dari komponen induk dan kemudian meneruskannya ke komponen turunan.

seperti yang saya pelajari saat bekerja dengan reaksi.

• alat peraga digunakan oleh komponen untuk mendapatkan data dari lingkungan eksternal yaitu komponen lain (murni, fungsional atau kelas) atau kelas umum atau javascript / kode naskah

• status digunakan untuk mengelola lingkungan internal suatu komponen berarti perubahan data di dalam komponen

Alat Peraga: Alat peraga tidak lain adalah properti dari komponen dan komponen reaksi tidak lain adalah fungsi javascript.

  class Welcome extends React.Component {
    render() {
      return <h1>Hello {this.props.name}</h1>;
    }
  }

elemen const =;

di sini <Welcome name="Sara" />melewati objek {name: 'Sara'} sebagai alat peraga komponen Selamat Datang. Untuk meneruskan data dari satu komponen induk ke komponen turunan, kami menggunakan properti. Alat peraga tidak bisa diubah. Selama siklus hidup komponen, alat peraga tidak boleh berubah (menganggapnya tidak dapat diubah).

Status: status hanya dapat diakses dalam Komponen. Untuk melacak data dalam komponen, kami menggunakan status. kita dapat mengubah status dengan setState. Jika kita perlu menyampaikan status kepada anak, kita harus menyampaikannya sebagai alat peraga.

class Button extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 0,
    };
  }

  updateCount() {
    this.setState((prevState, props) => {
      return { count: prevState.count + 1 }
    });
  }

  render() {
    return (<button
              onClick={() => this.updateCount()}
            >
              Clicked {this.state.count} times
            </button>);
  }
}

Negara:

1. negara bisa berubah.
2. status dikaitkan dengan komponen individual yang tidak dapat digunakan oleh komponen lain.
3. status diinisialisasi pada mount komponen.
4. status digunakan untuk menampilkan perubahan dinamis dalam komponen.

Atribut:

1. alat peraga tidak berubah.
2. Anda dapat melewatkan alat peraga di antara komponen.
3. alat peraga sebagian besar digunakan untuk berkomunikasi antar komponen. Anda dapat berpindah dari orangtua ke anak secara langsung. Untuk berpindah dari anak ke orang tua, Anda perlu menggunakan konsep status angkat.

class Parent extends React.Component{
  render()
  {
     return(
        <div>
            <Child name = {"ron"}/>
        </div>
      );
  }
}

class Child extends React.Component{
{
    render(){
      return(
         <div>
              {this.props.name}
        </div>
      );
     }
}

Pada dasarnya, alat peraga dan keadaan adalah dua cara komponen dapat mengetahui apa dan bagaimana membuatnya. Bagian mana dari status aplikasi milik negara dan yang ke beberapa toko tingkat atas, lebih terkait dengan desain aplikasi Anda, daripada bagaimana React bekerja. Cara paling sederhana untuk memutuskan, IMO, adalah dengan berpikir, apakah data tertentu ini berguna untuk aplikasi secara keseluruhan, atau itu adalah informasi lokal. Juga, penting untuk tidak menggandakan status, jadi jika sebagian data dapat dihitung dari alat peraga - itu harus dihitung dari alat peraga.

Sebagai contoh, katakanlah Anda memiliki beberapa kontrol dropdown (yang membungkus standar HTML pilih untuk styling kustom), yang dapat a) memilih beberapa nilai dari daftar, dan b) dibuka atau ditutup (yaitu, daftar opsi ditampilkan atau disembunyikan). Sekarang, katakanlah aplikasi Anda menampilkan daftar barang dari beberapa jenis dan filter kontrol dropdown Anda untuk entri daftar. Kemudian, akan lebih baik untuk melewatkan nilai filter aktif sebagai penyangga, dan tetap membuka / menutup status lokal. Selain itu, untuk membuatnya berfungsi, Anda akan meneruskan penangan onChange dari komponen induk, yang akan dipanggil di dalam elemen dropdown dan mengirim informasi yang diperbarui (filter baru yang dipilih) ke toko segera. Di sisi lain, keadaan buka / tutup dapat disimpan di dalam komponen dropdown, karena sisa aplikasi tidak terlalu peduli jika kontrol dibuka, sampai pengguna benar-benar mengubah nilainya.

Kode berikut ini tidak sepenuhnya berfungsi, perlu css dan menangani dropdown klik / blur / ubah acara, tapi saya ingin menyimpan contoh minimal. Semoga ini membantu untuk memahami perbedaannya.

const _store = {
    items: [
    { id: 1, label: 'One' },
    { id: 2, label: 'Two' },
    { id: 3, label: 'Three', new: true },
    { id: 4, label: 'Four', new: true },
    { id: 5, label: 'Five', important: true },
    { id: 6, label: 'Six' },
    { id: 7, label: 'Seven', important: true },
    ],
  activeFilter: 'important',
  possibleFilters: [
    { key: 'all', label: 'All' },
    { key: 'new', label: 'New' },
    { key: 'important', label: 'Important' }
  ]
}

function getFilteredItems(items, filter) {
    switch (filter) {
    case 'all':
        return items;

    case 'new':
        return items.filter(function(item) { return Boolean(item.new); });

    case 'important':
        return items.filter(function(item) { return Boolean(item.important); });

    default:
        return items;
  }
}

const App = React.createClass({
  render: function() {
    return (
            <div>
            My list:

            <ItemList   items={this.props.listItems} />
          <div>
            <Dropdown 
              onFilterChange={function(e) {
                _store.activeFilter = e.currentTarget.value;
                console.log(_store); // in real life, some action would be dispatched here
              }}
              filterOptions={this.props.filterOptions}
              value={this.props.activeFilter}
              />
          </div>
        </div>
      );
  }
});

const ItemList = React.createClass({
  render: function() {
    return (
      <div>
        {this.props.items.map(function(item) {
          return <div key={item.id}>{item.id}: {item.label}</div>;
        })}
      </div>
    );
  }
});

const Dropdown = React.createClass({
    getInitialState: function() {
    return {
        isOpen: false
    };
  },

  render: function() {
    return (
        <div>
            <select 
            className="hidden-select" 
          onChange={this.props.onFilterChange}
          value={this.props.value}>
            {this.props.filterOptions.map(function(option) {
            return <option value={option.key} key={option.key}>{option.label}</option>
          })}
        </select>

        <div className={'custom-select' + (this.state.isOpen ? ' open' : '')} onClick={this.onClick}>
            <div className="selected-value">{this.props.activeFilter}</div>
          {this.props.filterOptions.map(function(option) {
            return <div data-value={option.key} key={option.key}>{option.label}</div>
          })}
        </div>
      </div>
    );
  },

  onClick: function(e) {
    this.setState({
        isOpen: !this.state.isOpen
    });
  }
});

ReactDOM.render(
  <App 
    listItems={getFilteredItems(_store.items, _store.activeFilter)} 
    filterOptions={_store.possibleFilters}
    activeFilter={_store.activeFilter}
    />,
  document.getElementById('root')
);

Negara adalah cara bereaksi menangani informasi yang dipegang oleh komponen Anda.

Misalkan Anda memiliki komponen yang perlu mengambil beberapa data dari server. Anda biasanya ingin memberi tahu pengguna jika permintaan sedang diproses, jika gagal, dll. Ini adalah informasi yang hanya relevan untuk komponen tertentu itu. Di sinilah negara memasuki permainan.

Biasanya cara terbaik untuk mendefinisikan status adalah sebagai berikut:

class MyComponent extends React.Component {
  constructor() {
    super();
    this.state = { key1: value1, key2: value2 }    
  }
}

tetapi dalam implementasi terbaru dari reaksi asli yang dapat Anda lakukan:

class MyComponent extends React.Component {
  state = { key1: value1, key2: value2 }    
}

Dua contoh ini dieksekusi dengan cara yang persis sama, itu hanya peningkatan sintaksis.

Jadi, apa yang berbeda dari hanya menggunakan atribut objek seperti yang selalu kita miliki dalam pemrograman OO? Biasanya, informasi yang disimpan di negara Anda tidak dimaksudkan untuk menjadi statis, itu akan berubah seiring waktu dan Tampilan Anda perlu diperbarui untuk mencerminkan perubahan ini. Negara menawarkan fungsi ini dengan cara sederhana.

Negara DIMAKSUDKAN UNTUK DIMINTA! dan saya tidak bisa cukup menekankan hal ini. Apa artinya ini? Ini berarti bahwa Anda TIDAK PERNAH melakukan sesuatu seperti ini.

 state.key2 = newValue;

Cara yang tepat untuk melakukannya adalah:

this.setState({ key2: newValue });

Menggunakan this.setState komponen Anda berjalan melalui siklus pembaruan dan jika ada bagian negara yang berubah, metode komponen render Anda akan dipanggil lagi untuk mencerminkan perubahan ini.

Periksa dokumen reaksi untuk penjelasan yang lebih luas: https://facebook.github.io/react/docs/state-and-lifecycle.html

Alat peraga hanyalah singkatan untuk properti. Alat peraga adalah bagaimana komponen saling berbicara. Jika Anda sama sekali akrab dengan Bereaksi maka Anda harus tahu bahwa alat peraga mengalir ke bawah dari komponen induk.

Ada juga kasus bahwa Anda dapat memiliki alat peraga standar sehingga alat peraga diatur bahkan jika komponen induk tidak lulus alat peraga.

Inilah sebabnya mengapa orang menyebut React sebagai memiliki aliran data uni-directional. Ini membutuhkan sedikit perhatian Anda dan saya mungkin akan menulis blog tentang ini nanti, tetapi untuk sekarang hanya ingat: data mengalir dari orang tua ke anak. Alat peraga tidak berubah (kata yang bagus untuk itu tidak berubah)

Jadi kita bahagia. Komponen menerima data dari induk. Semua diurutkan, kan?

Ya tidak cukup. Apa yang terjadi ketika komponen menerima data dari orang lain selain dari orang tua? Bagaimana jika pengguna memasukkan data secara langsung ke komponen?

Nah, inilah mengapa kita memiliki keadaan.

NEGARA

Alat peraga seharusnya tidak berubah, jadi nyatakan langkah. Biasanya komponen tidak memiliki status dan disebut stateless. Komponen yang menggunakan status dikenal sebagai stateful. Jangan ragu untuk melepaskan berita gembira kecil itu di pesta-pesta dan melihat orang-orang menjauh dari Anda.

Jadi status digunakan sehingga komponen dapat melacak informasi di antara setiap perender yang dilakukannya. Ketika Anda mengaturState itu memperbarui objek negara dan kemudian merender komponen. Ini sangat keren karena itu berarti Bereaksi mengurus kerja keras dan sangat cepat.

Sebagai sedikit contoh keadaan, berikut ini cuplikan dari bilah pencarian (layak untuk memeriksa kursus ini jika Anda ingin mempelajari lebih lanjut tentang Bereaksi)

Class SearchBar extends Component {
 constructor(props) {
  super(props);
this.state = { term: '' };
 }
render() {
  return (
   <div className="search-bar">
   <input 
   value={this.state.term}
   onChange={event => this.onInputChange(event.target.value)} />
   </div>
   );
 }
onInputChange(term) {
  this.setState({term});
  this.props.onSearchTermChange(term);
 }
}

RINGKASAN

Alat peraga dan negara melakukan hal serupa tetapi digunakan dengan cara yang berbeda. Mayoritas komponen Anda mungkin tidak bernegara.

Alat peraga digunakan untuk meneruskan data dari orang tua ke anak atau oleh komponen itu sendiri. Mereka tidak berubah dan dengan demikian tidak akan diubah.

Status digunakan untuk data yang bisa diubah, atau data yang akan berubah. Ini sangat berguna untuk input pengguna. Pikirkan bilah pencarian misalnya. Pengguna akan mengetik data dan ini akan memperbarui apa yang mereka lihat.

Pendeknya.

nilai alat peraga tidak dapat diubah [tidak berubah]

nilai-nilai negara dapat diubah, menggunakan metode setState [bisa berubah]

negara - Ini adalah properti yang bisa berubah-ubah khusus yang menyimpan data Komponen. ini memiliki nilai default ketika Komponen mount.

Atribut - Ini adalah properti khusus yang tidak dapat diubah secara alami dan digunakan jika melewati nilai dari orangtua ke anak. alat peraga hanyalah saluran komunikasi antara Komponen, selalu bergerak dari atas (induk) ke buttom (anak).

di bawah ini adalah contoh lengkap dari penggabungan keadaan & alat peraga: -

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" />
        <title>state&props example</title>

        <script src="https://unpkg.com/[email protected]/dist/react.min.js"></script>
        <script src="https://unpkg.com/[email protected]/dist/react-dom.min.js"></script>
        <script src="https://unpkg.com/[email protected]/babel.min.js"></script>

      </head>
      <body>
      <div id="root"></div>
        <script type="text/babel">

            var TodoList = React.createClass({
                render(){
                    return <div className='tacos-list'>
                                {
                                    this.props.list.map( ( todo, index ) => {
                                    return <p key={ `taco-${ index }` }>{ todo }</p>;
                            })}
                            </div>;
                }
            });

            var Todo = React.createClass({
                getInitialState(){
                    return {
                        list : [ 'Banana', 'Apple', 'Beans' ]       
                    }
                },
                handleReverse(){
                    this.setState({list : this.state.list.reverse()});
                },
                render(){
                    return <div className='parent-component'>
                              <h3 onClick={this.handleReverse}>List of todo:</h3>
                              <TodoList list={ this.state.list }  />
                           </div>;
                }
            });

            ReactDOM.render(
                <Todo/>,
                document.getElementById('root')
            );

        </script>
      </body>
      </html>

Secara umum, keadaan satu komponen (induk) adalah penyangga untuk komponen anak.

1. Status berada dalam komponen di mana sebagai alat peraga ditularkan dari orangtua ke anak.

2. Alat peraga pada umumnya tidak berubah.

   class Parent extends React.Component {
       constructor() {
           super();
           this.state = {
               name : "John",
           }
       }
       render() {
           return (
               <Child name={this.state.name}>
           )
       }
   }
   
   class Child extends React.Component {
       constructor() {
           super();
       }
   
       render() {
           return(
               {this.props.name} 
           )
       }
   }

Dalam kode di atas, kami memiliki kelas induk (Induk) yang memiliki nama sebagai statusnya yang diteruskan ke komponen anak (Kelas anak) sebagai penyangga dan komponen anak menjadikannya menggunakan {this.props.name}

Anda memiliki beberapa data yang dimasukkan oleh pengguna di suatu tempat di aplikasi.

1. komponen di mana data dimasukkan harus memiliki data ini dalam keadaannya karena perlu memanipulasi dan mengubahnya selama entri data

2. di tempat lain dalam aplikasi data harus diturunkan sebagai alat peraga untuk semua komponen lainnya

Jadi ya props berubah tetapi mereka diubah di 'sumber' dan kemudian akan mengalir dari sana. Jadi alat peraga tidak berubah dalam konteks komponen yang menerimanya .

Misalnya layar data referensi di mana pengguna mengedit daftar pemasok akan mengelola ini dalam keadaan, yang kemudian akan memiliki tindakan yang menyebabkan data yang diperbarui disimpan di ReferenceDataState yang bisa satu tingkat di bawah AppState dan kemudian daftar pemasok ini akan diteruskan sebagai alat peraga untuk semua komponen yang perlu menggunakannya.

Dalam Bereaksi, negara menyimpan data serta alat peraga. Perbedaannya dengan yang terakhir adalah bahwa data yang disimpan dapat dimodifikasi oleh perubahan yang berbeda. Ini tidak lebih dari objek yang ditulis dalam JavaScript datar, sehingga dapat berisi data atau kode, mewakili informasi yang ingin Anda modelkan. Jika Anda membutuhkan detail lebih lanjut, disarankan agar Anda melihat publikasi ini Penggunaan Negara dalam Bereaksi dan Penggunaan Alat Peraga dalam Bereaksi

• alat peraga --- Anda tidak dapat mengubah nilainya.
• menyatakan --- Anda dapat mengubah nilainya dalam kode Anda, tetapi akan aktif ketika render terjadi.

Beberapa perbedaan antara "keadaan" dan "alat peraga" bereaksi.

Bereaksi kontrol dan merender DOM berdasarkan negara. Ada dua jenis status komponen: alat peraga adalah status yang mentransfer antar komponen, dan status adalah status internal komponen. Alat peraga digunakan untuk transfer data dari komponen induk ke komponen anak. Komponen-komponen tersebut juga memiliki keadaan di dalamnya: keadaan yang hanya dapat dimodifikasi di dalam komponen.

Secara umum keadaan komponen tertentu bisa menjadi penyangga komponen anak, alat peraga akan diberikan kepada anak-anak yang dinyatakan dalam metode rendering komponen induk

Atribut

• alat peraga digunakan untuk melewatkan data dalam komponen anak

• alat peraga mengubah nilai di luar komponen (komponen anak)

Negara

• penggunaan negara di dalam komponen kelas

• negara mengubah nilai di dalam komponen

• Jika Anda merender halaman, Anda memanggil setState untuk memperbarui DOM (memperbarui nilai halaman)

Negara memiliki peran penting dalam bereaksi

Dalam menjawab pertanyaan awal tentang alat peraga yang tidak dapat diubah, mereka dikatakan tidak berubah sejauh menyangkut komponen anak tetapi dapat diubah pada orang tua.

React Components using state untuk MEMBACA / MENULIS variabel internal yang dapat diubah / dimutasi misalnya:

this.setState({name: 'Lila'})

React props adalah objek khusus yang memungkinkan programmer untuk mendapatkan variabel dan metode dari Parent Component ke Child Component.

Itu seperti Windows dan pintu rumah. Alat peraga juga Komponen Anak yang kekal tidak dapat mengubah / memperbaruinya.

Ada beberapa metode yang membantu untuk mendengarkan ketika alat peraga diubah oleh Komponen Induk.

Ini adalah sudut pandang saya saat ini mengenai penjelasan antara negara dan alat peraga

1. Negara seperti variabel lokal Anda di dalam komponen Anda. Anda dapat memanipulasi nilai kondisi dengan menggunakan kondisi set. Anda kemudian dapat meneruskan nilai status ke komponen anak Anda misalnya.

2. Alat peraga adalah nilai yang persis berada di dalam toko redux Anda, ini sebenarnya berasal dari keadaan yang berasal dari peredam. Komponen Anda harus terhubung ke redux untuk mendapatkan nilai dari alat peraga. Anda juga dapat meneruskan nilai alat peraga Anda ke komponen anak Anda

Penjelasan sederhana adalah: STATE adalah keadaan komponen lokal misalnya color = "blue" atau animation = true dll. Gunakan this.setState untuk mengubah status komponen. PROPS adalah bagaimana komponen berbicara satu sama lain (mengirim data dari orang tua ke anak) dan membuat komponen dapat digunakan kembali.

Status adalah data Anda, dapat diubah, Anda dapat melakukan apa pun yang Anda butuhkan dengan itu, alat peraga hanya membaca data, biasanya ketika Anda lulus alat peraga Anda sudah bekerja dengan data Anda dan Anda memerlukan komponen anak untuk merendernya atau jika alat peraga Anda adalah berfungsi u panggil untuk melakukan tugas

Negara adalah asal dari kebenaran, tempat data Anda tinggal. Anda bisa mengatakan negara memanifestasikan dirinya melalui alat peraga.

Menyediakan alat peraga untuk komponen adalah apa yang membuat UI Anda tetap sinkron dengan data Anda. Komponen sebenarnya hanya fungsi yang mengembalikan markup.

Mengingat alat peraga yang sama (data untuk ditampilkan) itu akan selalu menghasilkan markup yang sama .

Jadi alat peraga seperti pipa yang membawa data dari asal ke komponen fungsional.

Alat peraga: merepresentasikan data "hanya baca", yang tidak dapat diubah dan merujuk ke atribut dari komponen orang tua.

Status: merupakan data yang dapat berubah, yang pada akhirnya memengaruhi apa yang dirender pada halaman dan dikelola secara internal oleh komponen itu sendiri dan berubah dari waktu ke waktu umumnya karena input Pengguna.

Perbedaan utama adalah bahwa negara bersifat pribadi untuk komponen dan dapat diubah di dalam komponen itu hanya sementara alat peraga hanya nilai statis dan kunci untuk komponen anak yang dilewatkan melalui komponen induk dan tidak dapat diubah di dalam komponen anak