近来在学习react源码, 最初是直接从入口一行一行的看, 结果跟着调用的函数跳转来跳去头都晕了. 后来决定带着一个目的去看源码, 每次看只研究一个东西. 一开始最想了解的就是充满魔性的setState. 本文是我对setState的一些理解, 不当之处欢迎留言指正.

setState的魔性

看一下下边几个例子的输出情况.

例1 合成事件中的setState

import React from 'react';  export default class SetState extends React.Component {     constructor(props) {         super(props);     }      state = {         count: 0     }      click = () => {         this.setState({             count: this.state.count + 1,         })         console.log('count1', this.state.count);         this.setState({             count: this.state.count + 1,         });         console.log('count2', this.state.count);     }      render() {         return (             <div onClick={this.click}>                 count的值{this.state.count}             </div>         )     } } // 打印: // count1 0 // count2 0

例2 生命周期函数中的setState

import React from 'react';  export default class SetState extends React.Component {     constructor(props) {         super(props);     }      state = {         count: 0     }          componentDidMount () {         this.setState({             count: this.state.count + 1,         })         console.log('count1', this.state.count);         this.setState({             count: this.state.count + 1,         });         console.log('count2', this.state.count);     }      render() {         return (             <div>                 count的值{this.state.count}             </div>         )     } } // 打印: // count1 0 // count2 0

例3 setTimeout中的setState

import React from 'react';  export default class SetState extends React.Component {     constructor(props) {         super(props);     }      state = {         count: 0     }      componentDidMount () {         setTimeout(() => {             this.setState({                 count: this.state.count + 1,             })             con