React学习——三大属性之一 state

目录

1.初识state

2.初始化state0

        2.1 设置state 

        2.2 使用state

3.state的事件绑定

      3.1 事件名称重写:

      3.2 回调函数的使用

4.事件绑定的this的指向问题以及解决方法

        4.1 函数写在哪?  

        4.2 调用方法

        4.3 this的指向问题

4.4 解决this指向

5.setState 方法 修改state的值

6.state 以及 自定义函数的简写

        6.1 state的简化

        6.2 自定义函数的简化


1.初识state

state 指状态,而状态即是驱动页面进行渲染是数据。

在类式组件内,输出实例对象的this。可以看到state默认值为null

2.初始化state0

        以天气是否炎热为例。我们理由 isHot 属性来判断,那么isHot就是状态之一。

        2.1 设置state 

        在类内,构造器方法内,首先设置props ,关于props后续再聊。只用知道props的接受要使用super

        然后设置state,使用this.state 来进行赋值,由于状态不止一种,所以赋值对象。在这里可以类比vue内的data

// 要传入状态,参数,可能会使用到props,而props 必须使用super来调用
        constructor(props){
            super(props)
            // state则不需要使用super来设置调用,未设置式 state为null,可以设置成对象,因为state内可能不止一个数据
            this.state = {isHot:false}
        }

        2.2 使用state

        state存放在实例对象上。渲染组件时,是调用的render()方法,所以在render内,this指代组件实例,所以this.state 可以获取到state的值。

        为了方便使用,选择解构赋值,将要使用的属性简化。

 		render(){
            // 要理解,这里的this,是指渲染时,调用了render()的组件实例
            console.log(this);
            const {isHot} = this.state  // 解构赋值 
            return <h1>今天天气很{isHot?'炎热':'凉爽'}</h1>
        }

在 标签内的使用,类似与vue的插值语法,只是这里只使用一个花括号。在花括号内进行使用即可。

<h1>今天天气很 {isHot?'炎热':'凉爽'} </h1>

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
回答: React中的三大属性是props、state和refs。\[1\] props是组件的属性,可以通过this.props来访问。它可以用来传递数据给组件,并且可以对属性值进行类型限制和必要性限制。可以使用PropTypes来进行属性类型的限制,也可以设置默认属性值。\[1\] state是组件的状态,可以通过this.state来访问。它用于存储组件内部的数据,并且可以通过setState方法来更新状态。状态的改变会触发组件的重新渲染。\[2\] refs是用来标识组件内部标签的引用。它可以通过字符串形式或者React.createRef()来定义。通过refs可以获取到标签的真实DOM节点或者组件实例。\[3\] 这三大属性React中非常重要,可以帮助我们管理组件的数据和交互。 #### 引用[.reference_title] - *1* [react三大属性](https://blog.csdn.net/weixin_30617797/article/details/102410491)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [React —— React中组件的三大属性state,props,ref)](https://blog.csdn.net/Bonsoir777/article/details/127568414)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值