侧边栏壁纸
博主头像
woku博主等级

成功的路上并不拥挤

  • 累计撰写 50 篇文章
  • 累计创建 13 个标签
  • 累计收到 3 条评论

React-setState

woku
2022-08-15 / 0 评论 / 0 点赞 / 49 阅读 / 1,629 字

setState方法用来更新数据

异步更新

setState方法是异步更新数据,在调用完更新数据方法后,立即获取不会同步到最新的值。


const { Component } = require("react");
class App extends Component {
  state = {
    name: 'wyg'
  }
  render() {
    return (
      <div>我是app组件
        <button onClick={this.handleClick}>改变数据</button>
      </div>
    )
  }
  handleClick = () => {
    this.setState({
      name: 'woku'
    })
    console.log(this.state.name) // 此时state里面的name还是之前的'wyg'
  }
}

export default App

setState第二个参数

setState第二个参数是callback,在状态更新(页面完成重新渲染)后立即执行某个操作
setState(updater[, callback])


const { Component } = require("react");
class App extends Component {
  state = {
    name: 'wyg'
  }
  render() {
    return (
      <div>我是app组件
        <button onClick={this.handleClick}>改变数据</button>
      </div>
    )
  }
  handleClick = () => {
    this.setState({
      name: 'woku'
    }, () => {
      console.log(this.state.name)
    })
  }
}

export default App

多次调用setState

  • 注意:使用该语法时,后面的 setState() 不要依赖于前面的 setState()

1.当你多次调用setState时,react不会马上更新
2.而是把这个对象放到一个更新队列里面
3. 稍后才会从队列当中把新的状态提取出来合并到 state 当中,然后再触发组件更新。

  • 可以多次调用 setState() ,只会触发一次重新渲染

const { Component } = require("react");
class App extends Component {
  state = {
    name: 'wyg'
  }
  render() {
    return (
      <div>我是app组件
        { this.state.name }
        <button onClick={this.handleClick}>改变数据</button>
      </div>
    )
  }
  handleClick = () => {
    this.setState({
      name: 'woku'
    })
    this.setState({
      name: 'woku1'
    })
    this.setState({
      name: 'woku2'
    })
  }
}

export default App

合并state ,state中的后面的name数据覆盖掉前面的name数据。最后name数据的值为'woku2'
推荐语法

  • 推荐:使用 setState((preState) => {}) 语法
  • 参数preState: React.js 会把上一个 setState 的结果传入这个函数
this.setState((preState) => {
    return {
    	count: preState.count + 1
    }
})
console.log(this.state.count) // 1

这种语法依旧是异步的,但是state可以获取到最新的状态,适用于需要调用多次setState

组件更新机制

  • setState() 的两个作用: 1. 修改state 2. 更新组件(UI)
  • 过程:父组件重新渲染时,也会重新渲染子组件。但只会渲染当前组件子树(当前组件及其所有子组件)
0

评论区