>  기사  >  웹 프론트엔드  >  React에서 setState 사용에 대한 자세한 설명

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

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

이번에는 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에 대한 참고 사항

  1. 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가 비동기적으로 업데이트됩니다.
      • 비동기 업데이트:
      • 또한 setState 호출은 this.setState를 동기적으로 실행합니다. "추가로"는 addEventListener를 통해 React에서 직접 추가한 이벤트 처리 기능과 setTimeout/setInterval에 의해 생성된 비동기 호출을 우회하는 것을 의미합니다.
      • this.state.value=this.state.value+1;

        this.setState 업데이트 메커니즘 다이어그램:
      • setState가 새로운 상태를 생성할 때마다 차례로 대기열에 저장되고 isBathingUpdates 변수에 따라 여부가 판단됩니다. this.state를 직접 업데이트하거나 나중에 dirtyComponent에 대해 이야기하겠습니다.
      • isBatchingUpdates의 기본값은 false입니다. 이는 setState가 this.state를 동기식으로 업데이트한다는 의미입니다.

      • 但是,当React在调用事件处理函数之前就会调用batchedUpdates,这个函数会把isBatchingUpdates修改为true,造成的后果就是由React控制的事件处理过程setState不会同步更新this.state。

      同步更新(函数式setState)

      1. 如果this.setState的参数不是一个对象而是一个函数时,这个函数会接收到两个参数,第一个是当前的state值,第二个是当前的props,这个函数应该返回一个对象,这个对象代表想要对this.state的更改;

      2. 换句话说,之前你想给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中文网其它相关文章!

      推荐阅读:

      JS中使用接口步骤详解

      EasyCanvas绘图库在Pixeler项目开发中使用实战总结

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

      성명:
      본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.