组件实例三大属性之state_state用于哪种组件-CSDN博客

本文链接：https://blog.csdn.net/qq_38721353/article/details/112602477

1、作用：控制组件的状态
2、存储形式：{key：value}
3、初始化state的方式：

在构造函数里面初始化
在类中但不在任何函数里面初始化
4、更新组件state: this.setState()函数，以合并的方式更新

在构造函数里初始化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>
    <script type="text/javascript" src="../../js/react.development.js"></script>
    <script type="text/javascript" src="../../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../../js/babel.min.js"></script>
    
</head>
<body>
    <div id = "root">
    </div>

    <script type="text/babel">
        class Weather extends React.Component{
            //在构造器里初始化状态
            constructor(props){
            super(props)
            this.state={isHot:false}
            this.changeWeather=this.changeWeather.bind(this)
            }
            //render调用几次：1+n次，1是初始化的那次，n是状态更新的次数
            render(){
                console.log(this);
                return <h1 onClick={this.changeWeather}>今天天气很{this.state.isHot? '炎热':'凉爽'}</h1>
         }
            changeWeather(){
                //changeWeather放在哪里？ --Weather的原型对象上，供实例使用
                //由于changeWeather是作为onClick的回调，所以不是通过实例调用，是直接调用
                //类中的方法默认开启了局部的严格模式，所以changeWeather中的this为undefined
                const isHot=this.state.isHot
                //严格注意：状态必须通过setState进行更新，且更新是一种合并，不是替换
                this.setState({isHot:!isHot})
            
            }
        }
        function Demo(){
            console.log('我被点击了')
        }
        ReactDOM.render(<Weather/>,document.getElementById('root'))
    </script>
    
</body>
</html>

在类中但不再任何函数里面初始化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../../js/react.development.js"></script>
    <script type="text/javascript" src="../../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../../js/babel.min.js"></script>
    
</head>
<body>
    <div id = "root">
    </div>

    <script type="text/babel">
        class Weather extends React.Component{
            state={isHot:false}
            render(){
                console.log(this);
                return <h1 onClick={this.changeWeather}>今天天气很{this.state.isHot? '炎热':'凉爽'}</h1>
         }
            changeWeather=() => {
                const isHot=this.state.isHot
                this.setState({isHot:!isHot})
            }
        }

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