집 >웹 프론트엔드 >JS 튜토리얼 >React에서 setState 사용에 대한 자세한 설명

React에서 setState 사용에 대한 자세한 설명

php中世界最好的语言원래의: 2018-05-24 14:19:008702검색

이번에는 React에서 setState를 사용하는 방법에 대해 자세히 설명하겠습니다. React에서 setState를 사용할 때 주의사항은 무엇인가요?

질문하기

class Example extends Component {
  contructor () {
    super()
    this.state = {
      value: 0,
      index: 0
    }
  }
  componentDidMount () {
    this.setState({value: this.state.value + 1})
    console.log(this.state.value) // 第一次输出
    this.setState({value: this.state.value + 1})
    console.log(this.state.value) // 第二次输出
    setTimeout(() => {
      this.setState({value: this.state.value + 1})
      console.log(this.state.value) // 第三次输出
      this.setState({value: this.state.value + 1})
      console.log(this.state.value) // 第四次输出
    }, 0)；
        this.refs.button.addEventListener('click', this.click)
  }
  click = () => {
    this.setState({value: this.state.index + 1})
    this.setState({value: this.state.index + 1})
  }
  render () {
    return (
      <p><span>value: {this.state.value}index: {this.props.index}</span>
        <button ref="button" onClick={this.click}>点击</button>
      </p>
    )
  }
}

상식에 따르면 이 네 가지 출력은 1, 2, 3, 4입니다. 그러나 실제 출력은 0, 0, 2, 3입니다.

setState에 대한 참고 사항

setState는 React 구성 요소의 상태 값을 즉시 변경하지 않습니다(즉, setState는 비동기 업데이트입니다)

setState 통과 대기열 메커니즘은 상태 업데이트를 구현합니다.
setState가 실행되면 업데이트해야 하는 상태가 즉시 업데이트되는 대신 병합되어 상태 대기열에 저장됩니다.
이를 통해 상태에서 직접 수정한 값은 상태 큐에 추가되지 않습니다. 다음에 setState를 호출하고 상태 큐를 병합하면 이전에 직접 수정된 상태가 무시됩니다.

setState는 Redraw 구성 요소의 업데이트 프로세스를 트리거하여 트리거됩니다. 호출 시 false가 반환되면 라이프 사이클은 중단됩니다. 후속 함수가 호출되지 않더라도 상태는 계속 업데이트됩니다. this.state는 호출될 때 업데이트됩니다)

comComponentDidUpdate

여러 인접 상태 수정 사항이 함께 병합되어 한 번에 실행될 수 있습니다.

 this.setState({name: 'Pororo'})
 this.setState({age: 20})

 this.setState({name: 'Pororo'，age: 20})

과 동일합니다.
효과 위의 두 코드 블록은 동일합니다. 각 호출이 수명 주기 업데이트를 트리거하면 성능이 매우 높아집니다. 따라서 React는 여러 this.setState에 의해 생성된 수정 사항을 대기열에 넣고 거의 동일하면 수명 주기 업데이트를 트리거합니다.
문제 분석

처음 두 setState의 경우:

this.setState({value: this.state.val + 1});
console.log(this.state.value); // 第一次输出
this.setState({value: this.state.val + 1});
console.log(this.state.value); // 第二次输出

setState는 React 구성 요소의 상태 값을 즉시 변경하지 않으므로 setState의 this.state.value는 같은 값이 0이므로 두 출력 모두 0입니다. 따라서 값은 1씩만 증가합니다.

이 경우 this.state를 직접 운영할 수 있나요? 예:

이것은 실제로 this.state.value의 상태를 수정할 수 있지만 반복 렌더링을 유발할 수는 없습니다.

그래서 React에서 설정한 setState 함수를 통해 this.state를 변경해야 재렌더링이 발생합니다. settimeout의 두 세트 스테이트 :

setTimeout(() => {
  this.setState({value: this.state.value + 1})
  console.log(this.state.value) // 第三次输出
  this.setState({value: this.state.value + 1})
  console.log(this.state.value) // 第四次输出
}, 0)；

값은 동시에 업데이트됩니다. (예: onClick에 의해 트리거된 이벤트 처리) setState를 호출하면 this.state가 비동기적으로 업데이트됩니다.

비동기 업데이트:
this.state.value=this.state.value+1;
this.setState 업데이트 메커니즘 다이어그램:
isBatchingUpdates의 기본값은 false입니다. 이는 setState가 this.state를 동기식으로 업데이트한다는 의미입니다.
但是，当React在调用事件处理函数之前就会调用batchedUpdates，这个函数会把isBatchingUpdates修改为true，造成的后果就是由React控制的事件处理过程setState不会同步更新this.state。

同步更新（函数式setState）

如果this.setState的参数不是一个对象而是一个函数时，这个函数会接收到两个参数，第一个是当前的state值，第二个是当前的props，这个函数应该返回一个对象，这个对象代表想要对this.state的更改；
换句话说，之前你想给this.setState传递什么对象参数，在这种函数里就返回什么对象。不过，计算这个对象的方法有些改变，不再依赖于this.state，而是依赖于输入参数state。

function increment(state, props) {
  return {count: state.count + 1};
}
function incrementMultiple() {
  this.setState(increment);
  this.setState(increment);
  this.setState(increment);
}

假如当前this.state.count的值是0，第一次调用this.setState(increment)，传给increment的state参数是0，第二调用时，state参数是1，第三次调用是，参数是2，最终incrementMultiple让this.state.count变成了3。
对于多次调用函数式setState的情况，React会保证调用每次increment时，state都已经合并了之前的状态修改结果。

要注意的是，在increment函数被调用时，this.state并没有被改变，依然，要等到render函数被重新执行时（或者shouldComponentUpdate函数返回false之后）才被改变。

同步异步setState的用法混合

function incrementMultiple() {
  this.setState(increment);
  this.setState(increment);
  this.setState({count: this.state.count + 1});
  this.setState(increment);
}

在几个函数式setState调用中插入一个传统式setState调用，最后得到的结果是让this.state.count增加了2，而不是增加4。
这是因为React会依次合并所有setState产生的效果，虽然前两个函数式setState调用产生的效果是count加2，但是中间出现一个传统式setState调用，一下子强行把积攒的效果清空，用count加1取代。
所以，传统式setState与函数式setState一定不要混用。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！