react 组件的三大属性----state、props、refs

一、state

state的介绍

state是组件对象最重要的属性, 值是对象(可以包含多个数据)，组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)

 

state的使用

初始化指定

constructor() {
    super()
    this.state = {
        stateName1 : stateValue1,
        stateName2 : stateValue2
    }
}

读取显示

this.state.stateName1

更新状态-->更新界面(自动更新)

this.setState({stateName1 : newValue})

state使用实例

自定义组件, 功能：显示h2标题, 初始文本为: 你喜欢我，点击标题更新为: 我喜欢你

 

二、props

Props的介绍

每个组件对象都会有props(properties的简写)属性，组件标签的所有属性都保存在props中，所有组件标签的属性的集合对象

作用：通过标签属性从组件外向组件内传递变化的数据 ，注意: 组件内部不要修改props数据

首先来看一下一个简单的实例

类型限制和必要性限制

对props中的属性值进行类型限制和必要性限制，使用比较新的react版本，需要引入prop-types.js这个文件

props的数据类型具体查看官方文档：https://react.docschina.org/docs/typechecking-with-proptypes.html

// 对props中的属性值进行类型限制和必要性限制
Person.propTypes = {
    name: PropTypes.string.isRequired, // name属性的值必须是字符串并且必须要传，如果有默认值就不会报错
    age: PropTypes.number.isRequired
}

扩展属性: 将对象的所有属性通过props传递

// ...的作用：一种是打包（就是将一组数据打包到一起），一种是解包（）
ReactDOM.render(, document.getElementById('example1'))

默认属性值

如果某个props的值设置了默认值，并且设置了必要性限制，那么即使没有传递这个props也不会报错

// 指定属性的默认值
Person.defaultProps = {
  age: 18,
  sex: '男'
}

组件的构造函数

function Person(props) {
    return (
      

        
姓名：{props.name}
        
年龄：{props.age}
        
性别：{props.sex}
      
    )
  }

 

Props的使用场景（父子组件之间通信）

Props的使用场景—父组件向子组件传递数据

需求: 自定义用来显示一个人员信息的组件

如果性别没有指定, 默认为男
如果年龄没有指定, 默认为18

上面组件没有状态（state），可以直接使用工厂函数的方式创建组件

 

Props的使用场景—子组件向父组件传递数据（实际传递的是一个自定义事件）

需求将子组件中的size状态值传递给父组件，是由子组件触发传递的

 

面试题：请区别一下组件的props和state属性

1. state: 组件自身内部可变化的数据
2. props: 从组件外部向组件内部传递数据, 组件内部只读不修改

 

三、refs

ref 简介

React提供的这个ref属性，表示为对组件真正实例的引用，其实就是ReactDOM.render()返回的组件实例；需要区分一下，ReactDOM.render()渲染组件时返回的是组件实例；而渲染dom元素时，返回是具体的dom节点。

ref可以挂到任何组件上，可以挂到组件上也可以是dom元素上；二者不同：挂到组件（这里组件指的是有状态组件）上的ref表示对组件实例的引用，而挂载到dom元素上时表示具体的dom元素节点。

ref是React提供的用来操纵React组件实例或者DOM元素的接口，通过ref获取组件内容特定标签对象, 进行读取其相关数据。有些场景需要获取某一个真实的DOM元素来交互，这时候就要用到React的refs属性

ref挂载到DOM元素上
挂载到dom元素上时表示具体的dom元素节点

 // 绑定ref
 const input = this.refs.content  // 获取ref

ref在input元素中的使用
上面这个写法官方不建议这么写，可以使用下面这种，回调函数在组件初始化渲染完或卸载时自动调用，在组件中可以通过this.msgInput来得到对应的真实DOM元素

 this.msgInput = input}/> // 绑定ref

alert(this.msgInput.value) // 获取ref

下面是ref在input元素上使用的实例

ref在其他元素中的使用

目前还没有遇到有必要使用ref的情况

ref挂载到组件上
ref属性可以设置为一个回调函数，这也是官方强烈推荐的用法；这个函数执行的时机为：

• 组件被挂载后，回调函数被立即执行，回调函数的参数为该组件的具体实例。
• 组件被卸载或者原有的ref属性本身发生变化时，回调也会被立即执行，此时回调函数参数为null，以确保内存泄露。

这种方式主要用于获取子元素中的state，实例如下