React组件的props属性、state属性、refs属性详解

最新推荐文章于 2025-10-14 10:50:30 发布

原创最新推荐文章于 2025-10-14 10:50:30 发布 · 941 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#react #html #html5

vue 专栏收录该内容

23 篇文章

订阅专栏

本文详细介绍了React组件中的props、state和refs属性。props用于组件间单向数据流动，不可变且用于从外部传递数据。state是组件的状态机，允许组件根据状态变化重渲染。props和state的主要区别在于props是只读的，由外部设定，而state是组件私有，可读可写。此外，refs提供了一种方式来获取或操作实际DOM元素，如实现聚焦或强制动画。

React组件属性

1、props属性

react中说的单向数据流值说的就是props，根据这一特点它还有一个作用：组件之间的通信。props本身是不可变的，但是有一种情形它貌似可变，即是将父组件的state作为子组件的props，当父组件的state改变，子组件的props也跟着改变，其实它仍旧遵循了这一定律：props是不可更改的。

props属性的特点：

每个组件对象都会有props(properties的简写)属性
组件标签的所有属性都保存在props中
内部读取某个属性值：this.props.propertyName
作用：通过标签属性从组件外向组件内传递数据（只读read only）
对props中的属性值进行类型限制和必要性限制

代码示范

使用函数组件：

import React from 'react';
import ReactDOM from 'react-dom';

//使用函数组件
function User(props){
    //在组件中获取props属性值
	return <div>{props.name}，{props.age}</div>
}

//定义数据
const person ={
    name:'张三',
    age:20,
    sex:'男'
}

ReactDOM.render(
    <User {...person}></User>
, document.getElementById('root'));

使用类组件：

import React from 'react';
import ReactDOM from 'react-dom';

//使用class组件
class User extends React.Component{
    render(){
        return (
    <div>{this.props.name}--{this.props.age}</div>
        );
    }
}

//数据
const person ={
    name:'张三',
    age:20,
    sex:'男'
}

ReactDOM.render(
    <User {...person}></User>
, document.getElementById('root'));

2、state属性
React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。

React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

代码示范：

import React from 'react';
import ReactDOM from 'react-dom';

class Person extends React.Component{
	//构造方法
    constructor(){
        super();
        this.state = {
            name: 'tom'
        }
    }

    render(){
        //state属性是可修改的
        this.state.name = 'jack';
        return (
        <h1>{this.state.name}</h1>
        );
    }
}

ReactDOM.render(<Person />, document.getElementById('root'));

设置状态：setState
setState(object nextState[, function callback])

不能在组件内部通过this.state修改状态，因为该状态会在调用setState()后被替换。

setState()并不会立即改变this.state，而是创建一个即将处理的state。setState()并不一定是同步的，为了提升性能React会批量执行state和DOM渲染。

setState()总是会触发一次组件重绘，除非在shouldComponentUpdate()中实现了一些条件渲染逻辑

3、props和state属性的区别

props中的数据都是外界传递过来的；
state中的数据都是组件私有的；（通过Ajax获取回来的数据，一般都是私有数据）
props中的数据都是只读的，不能重新赋值；
state中的数据，都是可读可写的；
子组件只能通过props传递数据；

4、refs 属性

在 React 数据流中，父子组件唯一的交流方式是通过 props 属性；如果要修改子组件，通过修改父组件的属性，更新达到子组件props属性的值，重新渲染组件以达到视图的更新。但是，有些场景需要获取某一个真实的DOM元素来交互，比如文本框的聚焦、触发强制动画等

给DOM元素添加ref属性
给类组件添加ref属性

代码示例：

import React from 'react';
import ReactDOM from 'react-dom';

class Person extends React.Component{

    constructor(){
        super();
        this.handleClick = this.handleClick.bind(this);
    }

    //点击事件
    handleClick(){
        // 使用原生的 DOM API 获取焦点
        this.refs.myInput.focus();
    }

    render(){
        return (
            <div>
                <input type="text" ref="myInput" />
                <input
                    type="button"
                    value="点我输入框获取焦点"
                    onClick={this.handleClick}/>
            </div>
        );    
    }
}

ReactDOM.render(<Person />, document.getElementById('root'));