React —— React中组件的三大属性（state,props,ref)

文章目录

• 前言
• 一、 State(状态)
  • 1.1  State的书写形式
  • 1.2  绑定事件方法
  • 1.3  修改state值
  • 1.4 小案例
• 二、props
  • 2.1 基础用法
  • 2.2 批量传递参数
• 三、ref的使用
  • 3.1 字符串形式的ref
  • 3.2 回调函数下ref
  • 3.3 createRef 创建ref容器
• 总结

---

前言

前面我们已经介绍了React中组件的相关知识，这里就以类式组件为例，讲解组件中的三大属性。

一、 State(状态)

概念：state是组件对象最重要的属性,值是对象(可以包含多个key:value的组合)，组件被称为`状态机`,通过更新组件的state来更新对应的页面显示(重新渲染组件)，有state称为复杂组件。

1.1  State的书写形式

State 的使用对象形式(key,value)；

例如：
 

state ={

a: 10

}

1.2  绑定事件方法

 

 已关注

说明：

• ·onclick 变为 onClick。
• ·{函数名}返回值给click，加()就会直接调用。

1.3  修改state值

必须要使用  setState 方法修改state中的值

demo( ){

    this.setState({isflag:!this.state.isflag})

}

 }

 ReactDOM.render(,document.getElementById('hello'));

说明：

• ·bind会生成一个新的方法 并传对象 改变this的指向
• ·必须使用setState 修改才有效，修改内容为合并。有值得修改没有的不动

1.4 小案例

打铁需趁热，下面通过一个小案例和大家讲述state的具体用法以及上述小知识点的应用吧！

---

二、props

2.1 基础用法

• 每个组件对象都会有props(properties的简写)属性。
• 组件标签的所有属性都保存在props中。
• props 是不可变的，只能通过 props 来传递数据。

具体使用方式如下：

2.2 批量传递参数

let p1 = {name:'张三',age:29};

ReactDOM.render(,document.getElementById('hello'));

---

三、ref的使用

定义：组件内的标签可以定义ref来标识自己。

3.1 字符串形式的ref

3.2 回调函数下ref

3.3 createRef 创建ref容器

---

总结

以上就是今日的分享，有vue基础的同学在学react会发现有很多相同之处但react和vue的语法习惯还说不尽相同，所以对于和我一样的初学者还说要多写多练多思考，千万不要眼高手低哦！

最后依旧诚挚祝福屏幕前的你健康快乐，平安幸福！