react.js에서의 setState와 replaceState의 비교

react.js에서의 setState와 replaceState의 비교

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.

에 이어 console.log를 해보니state지금은 둘 다 가지고 있다data그리고.test.

그런 다음 console.log를 실행해 보니state다시 둘 다 가지고 있다data그리고.test.

그렇다면, 이 둘의 차이는 정확히 무엇일까요?

와 함께setState현재 상태와 이전 상태가 병합됩니다.와 함께replaceState현재 상태를 삭제하고 사용자가 지정한 상태로만 대체합니다.보통setState는 어떤 이유로 키를 삭제할 필요가 없는 한 사용됩니다.단, 보통 키를 false/filse로 설정하는 것이 보다 명확한 방법입니다.

변경은 가능하지만 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는 권장되지 않을 수 있습니다.

이 메서드는 Resact를 확장하는 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 " statement트트 statement statement statement:

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 상태: 상태: 상태: state)로 합니다.

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);

언급URL : https://stackoverflow.com/questions/23293626/setstate-vs-replacestate-in-react-js