react 中状态 state 及 setState

最新推荐文章于 2025-01-15 16:23:22 发布

xiaodingmao

最新推荐文章于 2025-01-15 16:23:22 发布

阅读量305

点赞数 2

CC 4.0 BY-SA版权

分类专栏： react 文章标签： react.js javascript

本文链接：https://blog.youkuaiyun.com/xiaodingmao/article/details/120379955

react 专栏收录该内容

2 篇文章

订阅专栏

本文深入讲解React中的状态(state)概念，包括其初始化、修改方法及setState的同步异步特性，并对比了state与props的不同之处。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、state

理解：

状态(state)即数据，是组件内部的私有数据，只能在组件内部使用
state的值是对象，表示一个组件中有多少数据
this.state 获取状态，react没有做数据代理
this.setState来修改state的数据
state可以写在类的构造方法中，可以写在类的成员属性中

export default class extends React.Component  {
    constructor(props){
        super(props)
        // 第一种初始化方式
        this.state = {
            count : 0
        }
}
/*
    // 第二种初始化方式
    state = {
        count:1
}
*/
    render(){
        return (
            <div>计数器 :{this.state.count}</div>
        )
    }
}```	

```javascript

二、setState

this.setState 对 state 数据的修改，更新UI

语法1：
this.setState({ count: this.state.count + 1 })
语法2：
this.setState( state => {
	return { key: value }
})

setState的同步异步问题

demo

export default class App extends Component {
  state = {
    count: 100,
  };

render() {
    return (
      <div>
        <div>{this.state.count}</div>
        <button onClick={this.incr}>+++</button>
      </div>
    );
  }
}

1、第二参数接受异步数据

setState(参数一，参数二）
参数一：object | 回调函数 返回state => ({})
参数二：如果 setState 是异步，就可以在参数二中得到最新的state数据
incr = () => {
    this.setState({ count: this.state.count + 1 }, () => {
     // console.log(this.state.count + "异步");
    });
    // console.log(this.state.count);
  };

2、DOM挂载完毕，在componentDidMount的顶层，setState是异步的

  componentDidMount() {
    this.setState({ count: this.state.count + 1 });
   // console.log(this.state.count);
  }

3、DOM挂载完毕，在原生DOM事件中,setState是同步的

  componentDidMount() {
    window.addEventListener('click', () => {
      this.setState({count:this.state.count+1})
      // console.log(this.state.count);
    })
  }

4、定时器是宏任务队列，不在react机制中，setState是同步

incr = () => {
    setTimeout(() => {
      this.setState({count:this.state.count+1})
       // console.log(this.state.count);
    }, 800);
  }

总结：setState在事件中或生命周期的顶层，修改数据是异步的，因为渲染视图消耗性能比较大，所以是异步

三、state 和 props的区别

state中的数据，都是可读可写，只在类组件中

props中储存的数据，都是外界传递过来的，只读，在函数或类组件中都可用
（有关props 下文见^_）