[javascript] React.js의 setState 대 replaceState

Program / 글쓴이

저는 React.js 라이브러리를 처음 접했고 튜토리얼 중 일부를 살펴 보았는데 다음과 같이 나타났습니다.

  • this.setState
  • this.replaceState

제공된 설명이 명확하지 않습니다 (IMO).

setState is done to 'set' the state of a value, even if its already set
in the 'getInitialState' function.

비슷하게,

The replaceState() method is for when you want to clear out the values
already in state, and add new ones.

나는 this.setState({data: someArray});다음을 시도한 this.replaceState({test: someArray});다음 console.logged하고 state이제 data및 test.

그럼, 시도 this.setState({data: someArray});다음에 this.setState({test: someArray});다음을 console.logged 나는 것을 발견 state다시 모두 가지고 data와 test.

그렇다면 둘의 차이점은 정확히 무엇입니까?

답변

으로 setState현재 및 이전 상태 병합됩니다. 를 사용 replaceState하면 현재 상태를 버리고 사용자가 제공하는 것만으로 바꿉니다. setState어떤 이유로 키를 제거해야하는 경우가 아니면 일반적 으로 사용됩니다. 그러나 그것들을 false / null로 설정하는 것이 일반적으로 더 명확한 전술입니다.

가능하지만 변경 될 수 있습니다. replaceState는 현재 상태로 전달 된 객체를 사용합니다. 즉 replaceState(x), 일단 설정되면 this.state === x. 이것은보다 약간 가볍기 setState때문에 수천 개의 구성 요소가 상태를 자주 설정하는 경우 최적화로 사용할 수 있습니다.
나는 이 테스트 케이스 로 이것을 주장했다 .

현재 상태가 {a: 1}이고 전화하면 this.setState({b: 2}); 상태가 적용되면 {a: 1, b: 2}. 당신이 전화하면 당신 this.replaceState({b: 2})의 상태가 될 것입니다 {b: 2}.

참고 : 상태는 즉시 설정되지 않으므로 this.setState({b: 1}); console.log(this.state)테스트 할 때 설정하지 마십시오 .

답변

예에 의한 정의 :

// let's say that this.state is {foo: 42}

this.setState({bar: 117})

// this.state is now {foo: 42, bar: 117}

this.setState({foo: 43})

// this.state is now {foo: 43, bar: 117}

this.replaceState({baz: "hello"})

// this.state. is now {baz: "hello"}

그러나 문서 에서 이것을 기록하십시오 .

setState ()는 this.state를 즉시 변경하지 않지만 보류 상태 전환을 만듭니다. 이 메서드를 호출 한 후 this.state에 액세스하면 잠재적으로 기존 값을 반환 할 수 있습니다.

같은 경우 replaceState()

답변

에 따르면 문서 , replaceState사용되지 않는 얻을 수 있습니다 :

이 메서드는 React.Component를 확장하는 ES6 클래스 구성 요소에서는 사용할 수 없습니다. 향후 React 버전에서는 완전히 제거 될 수 있습니다.

답변

때문에 replaceState지금은 사용되지 않으며, 여기 아주 간단한 해결 방법입니다. 아마도 당신이 이것을 필요로 할 것입니다 / 해야하는 것은 거의 없을 것입니다.

상태를 제거하려면 :

for (const old_key of Object.keys(this.state))
    this.setState({ [old_key]: undefined });

또는 여러 번 호출하지 않으려면 setState

const new_state = {};
for (const old_key of Object.keys(this.state))
    new_state[old_key] = undefined;
this.setState(new_state);

기본적으로 상태의 모든 이전 키는 이제를 반환 undefined하며, 이는 if명령문으로 매우 쉽게 필터링 할 수 있습니다 . 

if (this.state.some_old_key) {
    // work with key
} else {
    // key is undefined (has been removed)
}

if ( ! this.state.some_old_key) {
    // key is undefined (has been removed)
} else {
    // work with key
}

JSX에서 :

render() {
    return <div>
        { this.state.some_old_key ? "The state remains" : "The state is gone" }
    </div>
}

마지막으로 상태를 “대체”하려면 새 상태 객체를 이전 상태의 복사본과 결합하고 상태 undefined로 설정하면됩니다. 

const new_state = {new_key1: "value1", new_key2: "value2"};
const state = this.state;

for (const old_key of Object.keys(state))
    state[old_key] = undefined;

for (const new_key of Object.keys(new_state))
    state[new_key] = new_state[new_key];

this.setState(state);

답변