React03——组件实例三大属性之state属性

最新推荐文章于 2024-04-17 09:00:00 发布

I have a lemon

最新推荐文章于 2024-04-17 09:00:00 发布

阅读量157

点赞数

分类专栏：前端文章标签： react

本文链接：https://blog.csdn.net/m0_37483148/article/details/114706698

版权

前端专栏收录该内容

88 篇文章 1 订阅

订阅专栏

state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)

组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)

强烈注意

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
         	<!-- 准备好一个“容器” -->
	<div id="test"></div>

	<!-- 引入react核心库 -->
	<script type="text/javascript" src="js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="js/babel.min.js"></script>
    <script type="text/babel">
    	//1.创建组件
        class Weather extends React.Component{
            constructor(props){
                super(props)
                //初始化状态
                this.state={isHot:false,wind:'微风'};
                //解决changeWeather中this指向问题
                this.changeWeather=this.change.bind(this);//bind会生成新的函数 得去调用这个函数
            }
           //
            render(){
                //读取状态
                const {isHot,wind}=this.state;
                return <h2 onClick={this.changeWeather}>今天天气很 {isHot?'炎热':'凉爽'},{wind}</h2>
            }
            change(){
                const isHot=this.state.isHot;
                this.setState({isHot:!isHot})

            }
        }
        //2.渲染组件到页面
        ReactDOM.render(<Weather/>,document.getElementById('test'))
      
    </script>
</body>
</html>

state的简写方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
         	<!-- 准备好一个“容器” -->
	<div id="test"></div>

	<!-- 引入react核心库 -->
	<script type="text/javascript" src="js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="js/babel.min.js"></script>
    <script type="text/babel">
    
        class Weather extends React.Component{
            //初始化状态
            state={isHot:false,wind:'微风'}
            render(){
                const {isHot,wind}=this.state;
                return <h2 onClick={this.change}>今天天气很 {isHot?'炎热':'凉爽'},{wind}</h2>
            }
            //自定义方法————要用赋值语句的形式+箭头函数
            change=()=>{
                const isHot=this.state.isHot;
                this.setState({isHot:!isHot})
            }
        }

        ReactDOM.render(<Weather/>,document.getElementById('test'))
      
    </script>
</body>
</html>

I have a lemon

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React03——组件实例三大属性之state属性

state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)强烈注意组件中render方法中的this为组件实例对象组件自定义的方法中this为undefined，如何解决？1）强制绑定this: 通过函数对象的bind() 2）箭头函数状态数据，不能直接修改或更新<!DOCTYPE html><html lang="en"><head&g..
复制链接

扫一扫