3. belajar tentang state | belajar react js untuk pemula

3. belajar tentang state | belajar react js untuk pemula
Di Posting Oleh : wandi
Kategori :

apa itu state pada reactjs?

state adalah sebuah object javascript yang menyimpan data dinamis didalam component dan memungkinkan sebuah component dapat berubah scara dinamis. Cara mendifinisikan state pada component yang ditulis dalam format class component dapat menggunakan keyword this.state yang diletakan didalam sebuah constructor.

import React, { Component } from 'react';
class App extends Component {
  constructor(){
    super();
 this.state={
      nama :'eka'
    }
  }
  render() {
    return (
 <div classname="App">
<h1>
selamat datang {this.state.nama}</h1>
</div>
     
);
  }
}
export default App;

state bersifat private jadi hanya dapat diakses didalam component itu sendiri tidak bisa diakses diluar component, hal ini mirip dengan function scope. untuk melakukan perubahan pada nilai state dapat digunakan keyword setState(). jika state berubah maka component merespon akan merender ulang.

cara menggunakan state dengan benar:

1. tidak boleh merubah state scara langsung

    //code salah
    this.state.name = 'ogi';
    

sebagai gantinya menggunakan setState()

    //code benar
    this.setState({name = 'ogi'});
    

2. Update state tidak sinkron(State Updates May Be Asynchronous) contoh code update yang          mungkin gagal memupdate value yang berada didalam state

    // salah
    this.setState({
    score: this.state.score + this.props.increment,
    });
    

untuk membenarkannya bisa menggunakan memberikan fungsi pada object setState()

    // benar
    this.setState((state, props) => ({
    score: state.score + props.increment
    }));
    

code di atas menggunakan arrow function, tatapi bisa juga menggunakan function biasa

    // benar
    this.setState(function(state, props) {
    return {
        score: state.score + props.increment
    };
    });
    

Baca Juga artikel berbeda 
Mau liat atau download source code aplikasi premium bisa disini.

Tweet