react学习笔记2之正确使用状态

weixin_30763455

于 2017-11-16 16:57:00 发布

阅读量55

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/toward-the-sun/p/7845197.html

本文详细介绍了React中状态管理的基本原则和最佳实践，包括如何正确使用setState方法更新组件状态，以及如何在依赖状态或props变化时使用回调函数来确保状态更新的同步性和准确性。

//状态不要直接修改，比如:

// 错的，这样写不会重新渲染组件
this.state.comment = 'Hello';

//修改状态正确的方式
this.setState({comment:'Hello'});

setState方法的参数可以接受一个对象，也可以接受一个回调函数，状态的修改可能是异步的，所以当你修改的状态需要依赖状态本身或者props的值的时候，不要用上面的方式，而是传递一个方法，比如:

//假如组件有这样一个状态 this.state = {count:0};
this.setState((prevState,props) =>({count:prevState.count + props.num}))

//当setState的参数是回调函数的时候，它接受两个参数，第一个是组件的上一个状态对象，第二个是组件的props对象

//组件可以将状态作为属性传递给子组件
<Demo message={this.state.comment} />

//状态只能定义在construtor构造函数里面