详解React中的setState执行机制

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  incrementCount() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.incrementCount()}>Increment</button>
      </div>
    );
  }
}

changeAge() {
  this.setState({
    age: 22
  })
  console.log(this.state.age); // 不会是22，是之前的一个值
}

changeText() {
  this.setState({
    age: 22
  }, () => {
    console.log(this.state.age); // 22
  });
}

componentDidMount() {
  const btn = document.getElementById("btn");
  btn.addEventListener('click', () => {
    this.setState({
      mes: "你好啊,白鲸"
    });
    console.log(this.state.mes); // 你好啊,白鲸
  })
}

this.setState({
  count: 1,
  title: 'setState',
  success: true
})

// 方法一：将state先赋值给另外的变量，然后使用concat创建新数组
var hobaies= this.state.hobaies; 
this.setState({
  hobaies: hobaies.concat(['篮球']);
})
// 方法二：使用preState、concat创建新数组
this.setState(preState => ({
  hobaies: preState.hobaies.concat(['篮球']);
}))
// 方法三：ES6数组扩展 
this.setState(preState => ({
  hobaies: [...preState.hobaies, '篮球'];
}))

// 方法一：使用Object.assign
let ages= this.state.ages;
this.setState({
  owner: Object.assign({}, ages, {age: 22});
})
// 方法二：使用preState、Object.assign创建新对象
this.setState(preState => ({
  owner: Object.assign({}, preState.ages, {age: 22});
}))