Sebastian N.

present my blog programming

State w React.js

2019-02-24 SeNBasic-React.js

State w React.js to jest kluczowe zagadnienie, które należy znać posługując się tą biblioteką! Tak, więc zaczynajmy!

unsplash.com

State można określić poprostu stanami, które chcemy przechowywać, zmieniać i przekazywać w odpowiednie miejsca danego komponentu. Ponadto w state możemy zamieszczać tablice, zmienne (w tym null), stringii, badź pustą zawartość używając tych znaków ’ ’ lub tych [ ], gdy operujemy na tablicy danych. This.setState jest to drugi ciekawy keyword, dzięki któremu dokonujemy zmiany/aktualizacji stanu na pożądany. Więcej znajdziesz tutaj -> https://css-tricks.com/understanding-react-setstate/

Przykłady state poniżej:

  • “pustoStan” - stan, który w zasadzie zawiera null
export default class ExampleComponent extends React.Component{
    this.state = {
        nameTitle: ''
    }
}

Dzięki takiemu zapisowi możemy w dowolnym miejscu swojego komponentu przypisać nową zawartość stanu, np.

return(
    <div className="header"> {this.state.nameTitle='TSR'} </div>
)
  • następnym sposobem jest utworzenie switch toggle:
export default class ExampleComponent extends React.Component{
    this.state = {
        left: true
    }
    onLeft = () => {
        this.setState({
            left: !this.state.left
          })
    }
    render () {
        return (
            {
                !this.state.left && <ContentMini data={dataWay} action={this.onClick} />
            }
        )
    }
}

Ten zapis umożliwia nam zmianę stanu początkowego, na inny. W tym wypadku tworząc arrow function onLeft i przypisując ją pozwalamy na przepływ od stanu początkowego do końcowego w return.

  • stany “sliderowe” przydatne przy elementach, które mają zmieniać się, w jakiejś kolejności z początkowym stanem wskazującym pierwsze elementy.
export default class ExampleComponent extends React.Component{
    this.state = {
        start: 0,
        finish: 5
    }

    componentDidMount () {
        const textInterval = setInterval(() => {
            let start = this.state.start;
            let finish = this.state.finish;
                if (finish < this.state.sliderPhotos.length * 6 ) {
                    this.setState({
                        start: start + 5,
                        finish: finish + 5
                    });
                    } else {
                    this.setState({
                        fadedright: true,
                        start: start = 0,
                        finish: finish = 5
                    });
                }
            this.setState({
                fadedleft: false
            });
        }, 5000)  
        console.log('loaded interval images Slide' + textInterval);
    }
    render() {
        var startindex = this.state.start;
        var finishindex = this.state.finish;
        console.log(startindex + finishindex);
        return(
            ........cały stuff do wywołania
        )
    }
}

Używając tej konstrukcji, którą wywołamy bądź przypiszemy w return, uzyskamy stany które co 5 sekund będą zmieniały się i jeżeli będą powiązane np. ze zdjęciami wówczas nastąpi cykliczna zmiana jednych na drugie.

  • tablice w state:
export default class ExampleComponent extends React.Component{
    this.state = {
        tableImage: [],
        tableImage2: [
            "https://s3.us-east-2.amazonaws.com/dzuz14/thumbnails/city.jpg",
            "https://s3.us-east-2.amazonaws.com/dzuz14/thumbnails/desert.jpg",
            "https://s3.us-east-2.amazonaws.com/dzuz14/thumbnails/mountains.jpg",
            "https://s3.us-east-2.amazonaws.com/dzuz14/thumbnails/redsky.jpg",
            "https://s3.us-east-2.amazonaws.com/dzuz14/thumbnails/sandy-shores.jpg",
            "https://s3.us-east-2.amazonaws.com/dzuz14/thumbnails/tree-of-life.jpg"
        ]
    }
    render() {
        return (
            <div className="sliderGalery">
                {
                    this.state.tableImage2.map((image, i) => (
                        <Slide key={i} image={image} />
                    ))
                }
            </div>
    }
}

Operacje na tabliacach zawartych w state możemy wykonywać choćby poprzez funkcje: map, slice, filter, find, itd. kwestia użyteczności i potrzeby rzecz jasna! A i jeszcze jedno tableImage jest stanem, w którym jest pomieszczona pusta tablica, do której możemy przypisać nowe obiekty.

PS. Używalność keyword-a this, opisuje https://www.w3schools.com/js/js_this.asp w akapicie “What is this?”. Po krótce można powiedzieć, że słowo kluczowe this odwzorowuje przypisanie i wywołanie danego stanu w miejscu, w którym występuję.

Tu znajdziesz więcej o state -> https://reactjs.org/docs/state-and-lifecycle.html