6. React组件三大核心属性之state

最新推荐文章于 2023-03-22 10:25:05 发布

神奇洋葱头

最新推荐文章于 2023-03-22 10:25:05 发布

阅读量258

点赞数

分类专栏： React 文章标签： react

本文链接：https://blog.csdn.net/qq28129019/article/details/115301045

版权

本文详细介绍了React组件中的state属性，包括state的作用、实例分析、如何通过setState方法实现数据变化并响应到页面，以及setState的两种用法：对象式和函数式。通过实例展示了如何在组件中创建和更新state，以及setState的异步特性及其应用场景。

摘要由CSDN通过智能技术生成

1. state作用

存储数据，对象形式存储。
state: {}
在这里插入图片描述

2. state实例

2.1 实例要求

实例：页面生成一个h2标题，并点击标题，切换内容显示
如：今天天气很炎热，点击标题，让天气在炎热和凉爽之间切换

2.2 先写出静态页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
<!--1.准备好容器-->
<div id="root"></div>
<!--2.引入js文件-->
<script type="application/javascript" src="../js/react.development.js"></script>
<script type="application/javascript" src="../js/react-dom.development.js"></script>
<script type="application/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
    //3.1 创建组件
    class Weather extends React.Component{
    
        //构造方法
        constructor(props) {
    
            super(props);
            //初始化 state
            this.state = {
    isHot:false,wind:"大风"};
            console.log("1.  constructor:  this=",this );
        }
        //render方法
        render(){
    
            console.log("2.  render()方法中  this=",this);
            return <h2 onClick={
    this.changeWeather}>今天天气很{
    this.state.isHot ? "炎热" : "凉爽"}</h2>
        }
		//自定义方法changeWeather
        changeWeather(){
    
            console.log("onClick  自定义方法changeWeather: this=",this); //此处this的值为 undefined
        }

    }
    //3.2 渲染组件到页面
    ReactDOM.render(<Weather/>, document.getElementById("root"))
</script>
</body>
</html>

输出结果：
在这里插入图片描述

3.实现切换功能

3.1 改变state里面的值

希望能通过点击切换“凉爽”和“炎热”
在构造方法中添加一行代码

this.changeWeather = this.changeWeather.bind(this);

分析这行代码：
在这里插入图片描述

这是一个赋值语句；
① this.changeWeather
- 首先this指的是Weather类的实例对象
- this.changeWeather指的是实例对象的方法；

最低0.47元/天解锁文章

神奇洋葱头

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
6. React组件三大核心属性之state

文章目录1. state作用2. state实例2.1 实例要求2.2 先写出静态页面3.实现切换功能4. 完整代码1. state作用存储数据2. state实例2.1 实例要求实例：页面生成一个h2标题，并点击标题，切换内容显示如：今天天气很炎热，点击标题，让天气在炎热和凉爽之间切换2.2 先写出静态页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&g
复制链接

扫一扫