10-setState的使用

一 为什么用setState

 

/*
 * @Description: 
 * @Version: 2.0
 * @Autor: sun
 * @Date: 2022-10-16 23:26:53
 * @LastEditTime: 2022-10-16 23:34:59
 */
import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0
    }
  }
  render() {
    return (
      <div>
        <h2>当前计数: { this.state.counter }</h2>
        <button onClick={ e => this.increment()}>+1</button>
      </div>
    );
  }

  increment() {
    //挂载在component的原型上面
    //Component.prototype.setState= function(partialState, callback, 'setState)
    this.setState({
      counter: this.state.counter + 1
    })
  }
}

export default App;

二 setState是异步更新

 

/*
 * @Description: 
 * @Version: 2.0
 * @Autor: sun
 * @Date: 2022-10-16 23:26:53
 * @LastEditTime: 2022-10-16 23:51:24
 */
import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0
    }
  }
  render() {
    return (
      <div>
        <h2>当前计数: { this.state.counter }</h2>
        <button onClick={ e => this.increment()}>+1</button>
      </div>
    );
  }

  increment() {
    //setState是异步更新
    //setState设计为异步可以显著的提升性能
    //如果每次调用setState都进行一次更新，那么意味着render函数会被频繁的调用，界面重新渲染
    //最好的办法就是应该获取到多个更新，之后进行批量更新

    //如果同步更新了state，但是render函数还没执行，那么state与props不能保持同步
    //state和props不能保持一致性，会在开发中产生很多问题
    this.setState({
      counter: this.state.counter + 1
    })
    //点击一次触发结果  0, 'log'
    console.log(this.state.counter, 'log')//还是上一次结果 异步更新

    //方式一  获取异步更新后的数据
    //Component.prototype.setState= function(partialState, callback, 'setState)
    this.setState(
      {
        counter: this.state.counter + 1
      },() => {
        console.log(this.state.counter, '方式更新一')
      }
    )
  }

  //方式二   生命周期中更新
  componentDidUpdate() {
    console.log(this.state.counter, '方式更新二')
  }
}

export default App;

三 setState是同步更新

 

/*
 * @Description: 
 * @Version: 2.0
 * @Autor: sun
 * @Date: 2022-10-16 23:26:53
 * @LastEditTime: 2022-10-17 00:14:14
 */
import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0,
    }
  }
  render() {
    return (
      <div>
        <h2>当前计数: { this.state.counter }</h2>
        <button onClick={ e => this.increment()}>+1</button>
        <button id='btn'>改变文本</button>
      </div>
    );
  }

  componentDidMount() {
    document.getElementById('btn').addEventListener("click", (e) => {
      this.setState({
        counter: this.state.counter + 1
      })
      console.log(this.state.counter, '同步数据')
    }, true)
  }
  increment() {
    //我使用setTimeout定时器   没有成功同步更新
    setTimeout(() => {
      this.setState({
        counter: this.state.counter + 1
      })
      console.log(this.state.counter, '同步数据')
    }, 0)
  }
}

export default App;

四 setState数据合并

 五  setState本身合并

/*
 * @Description: 
 * @Version: 2.0
 * @Autor: sun
 * @Date: 2022-10-16 23:26:53
 * @LastEditTime: 2022-10-17 00:39:34
 */
import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0
    }
  }
  render() {
    return (
      <div>
        <h2>当前计数: { this.state.counter }</h2>
        <button onClick={ e => this.increment()}>+1</button>
      </div>
    );
  }

  increment() {
    this.setState({
      counter: this.state.counter + 1
    })
    this.setState({
      counter: this.state.counter + 1
    })
    this.setState({
      counter: this.state.counter + 1
    })
    //结果是1  多次更新只执行一次会进行合并操作

    //合并时进行累加
    this.setState((prevState) => {
      return {
        counter: prevState.counter + 1
      }
    })

    this.setState((prevState) => {
      return {
        counter: prevState.counter + 1
      }
    })
  }
}

export default App;

 六 优化添加key

/*
 * @Description: 
 * @Version: 2.0
 * @Autor: sun
 * @Date: 2022-10-16 23:26:53
 * @LastEditTime: 2022-10-17 01:01:58
 */
import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      movies: ['测试一', '测试二',]
    }
  }
  render() {
    const { movies } = this.state
    return (
      <div>
        <ul>
          {
            movies.map((item) => {
              return <li key={item} >{ item }</li>
            })
          }
        </ul>
        <button onClick={ e=> this.insertMovie() }>添加</button>
      </div>
    );
  }

  insertMovie() {
    this.setState({
      movies:['测试xx', ...this.state.movies]
    })
  }
}

export default App;