react组件实列三大属性-State

最新推荐文章于 2024-07-23 15:31:11 发布

余生tt

最新推荐文章于 2024-07-23 15:31:11 发布

阅读量29

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/m0_63135041/article/details/129668435

版权

一.什么是State

state是React中组件的一个对象.React把用户界面当做是状态机,想象它有不同的状态然后渲染这些状态,可以轻松让用户界面与数据保持一致.

二.State的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1_state</title>
</head>
<body>
    <!-- 准备一个容器 -->
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script src="../js/react.development.js"></script>
    <!-- 引入react-dom 用于操作dom -->
    <script src="../js/react-dom.development.js"></script>
    <!-- 引入babel 用于将jsx转为js -->
    <script src="../js/babel.min.js"></script>

    <script type="text/babel">
        //1.创建类式组件
       class State_test extends React.Component{
        //构造函数
        constructor(props){
            super(props)
            //初始化状态
            this.state={isHot:true}
            //解决demo中this指向问题
            this.demo=this.demo.bind(this)
        }

        render(){
            //读取状态
            const {isHot}=this.state
            return <h1 onClick={this.demo}>今天天气真{isHot?'好':'坏'}</h1>
        }

        //点击事件
        demo(){
            //类中的方法默认开启了局部的严格模式，所以下面输出为 undefined
            console.log(this)    //undefined

            //更改isHot的值
            const isHot=this.state.isHot;

            //react中不能直接更改状态
            //this.state.isHot=!isHot;

            //使用react的内置api更改状态
            this.setState({isHot:!isHot})

            
       }

       }

       //2.渲染组件到页面
       ReactDOM.render(<State_test/>,document.getElementById('test'))

       
    </script>
</body>
</html>

三.2_state的简写方式

 <script type="text/babel">
        //1.创建类式组件
       class State_test extends React.Component{

        //初始化状态
        state={isHot:true}

        render(){
            //读取状态
            const {isHot}=this.state
            return <h1 onClick={this.demo}>今天天气真{isHot?'好':'坏'}</h1>
        }

        //自定义方法用——赋值语句的形式+箭头函数的方法
        demo=()=>{
            const isHot=this.state.isHot;
            this.setState({isHot:!isHot})
       }

       }

       //2.渲染组件到页面
       ReactDOM.render(<State_test/>,document.getElementById('test'))

       
    </script>