React의 상태 사용법에 대한 자세한 설명

이번에는 React에서 상태를 사용하는 방법에 대해 자세히 설명하고, React에서 상태를 사용할 때 주의사항은 무엇인지 살펴보겠습니다.

state

상태는 소품으로 이해될 수 있지만, 차이점은 소품은 읽기 전용이고 상태는 읽기 쓰기 가능하다는 점입니다. 상태가 변경되면 render 메서드가 다시 실행되어 전체 DOM 트리를 렌더링하며, diff 알고리즘을 사용하여 어떤 DOM이 업데이트되었는지 계산하므로 성능이 향상됩니다. 상태를 사용하기 전에 먼저 getInitialState를 초기화해야 합니다상태를 변경하려면 setState를 사용해야 합니다.
getInitialState 이 메서드는 매번 한 번씩 호출됩니다. 당신은 렌더링합니다. getInitialState
更改 state 一定要用 setState
getInitialState

//es5
var StateComponent = React.createClass({
    getInitialState: function(){
        return {
            text: ''
        }
    },
    change: function(event){
        this.setState({text: event.target.value});
    },
    render: function(){
        return (
            <p>
                <p><input type="text" onChange={this.change}/></p>
                <p>{this.state.text}</p>
            </p>
        )
    }
}) 
//es6
import React from 'react';
import ReactDOM from 'react-dom';
class Component1 extends React.Component{
    state = {
        text: ''
    }
    change(event){
        this.setState({text: event.target.value});
    },
    render(){
        return (
            <p>
                <p><input type="text" onChange={this.change}/></p>
                <p>{this.state.text}</p>
            </p>
        )
    }
}

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

반응에서 선택한 li을 강조 표시하는 단계에 대한 자세한 설명

JS의 JSON 및 수학 사용 사례 분석

위 내용은 React의 상태 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!