【第2章】2.2 组件三大核心属性1: state

组件三大核心属性1: state

1.理解

• state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)
• 组件被称为"状态机",通过更新组件的state来更新对应的页面显示(重新渲染组件)

2.我们用一个小案例来更好的理解state

1.需求: 定义一个展示天气信息的组件
默认展示天气炎热 或 凉爽 点击文字切换天气

2.分析：

我们可以定义一个标识isHot,如果isHot为true显示炎热，为false显示凉爽
我们看一下组件的实例对象，可以在state中加入isHot属性来判断天气为炎热还是凉爽

通过this.state={isHot:true},在实例里添加isHot属性，如下图

3.案例：

简化版

3. 强烈注意

1.组件中render方法中的this为组件实例对象
2.组件自定义的方法中this为undefined，如何解决？
a)强制绑定this: 通过函数对象的bind()
b)箭头函数
3.状态数据，不能直接修改或更新，用需用setState()

愿有所收获，喜欢的点赞关注 持续更新中…