React从入门到项目--第二天（React三大属性state，props，ref）

﹏ヽ暗。殇╰゛Y 2023-06-06 13:28 37阅读 0赞

今天了解到了React的三大属性，分别是**state**，**props**还有**ref。**三大属性是必不可少的，而且这三大属性，和vue中的三个属性差不多，有很大的相似之处。

### state ###

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

**state初始化数据**

state在constructor中进行初始化声明，直接通过【this.state=对象】的方式添加初始化数据。

constructor(props){
        super(props);
        this.state = {
            StringData: 'name',
            NumberData: 10,
            ArrayData: [1,2,3,4,5]
        };		
    }

**state读取数据**

state数据的读取一般在render中使用，直接通过【 this.state.数据名称 】的方式获取想要的状态。

const todos = this.state.todos;
    
    const {todos} = this.state;

**state更新数据**

在React中，直接使用【this.state.数据名称】是不能够对状态进行更改的，需要调用实例对象的setState方法，setState需要传递一个对象，即更改的数据。而且更新数据一般在读数据之后。

()=>{
        const {number} = this.state;
        number++;
        this.setState({number})
    }

### props ###

每个组件对象都会有props属性，组件标签的所有属性都保存在props中，所有组件标签的属性的集合对象，它的作用是通过标签属性从组件外向组件内传递变化的数据，对props中的属性值进行类型限制和必要性限制，使用比较新的react版本，需要引入prop-types.js这个文件。在react典型的数据流中，props传递是父子组件交互的唯一方式；通过传递一个新的props值来实现父子组件通信。

**限制props的数据类型和必需性**

在接收数据的页面需要引入prop-types.js文件，而且从父组件传递过来的数据或者函数，在组件接收时，第一件要做的就是去限制所传递数据的数据类型，以及是否必须传递，不同的是Function要写成func。

Person.propTypes = {
        name: React.PropTypes.string,
        addUser: React.PropTypes.func.isRequired
    }

**读取数据**

在读取数据之前要通过constructor的super将数据给到组件实例对象，之后可直接通过【this.props】的方式进行数据的读取，传递过来的数据为只读的，不可以进行修改。

constructor(props){
        super(props);		
    }
    
    //读取数据
    this.props.addUser(user);

**传递数据**

父组件可以通过props向子组件传递想要的数据，即在子组件标签中写入自定义属性值加属性名

### ref ###

ref可以挂到任何组件上，可以挂到组件上也可以是dom元素上。挂到组件（这里组件指的是有状态组件）上的ref表示对组件实例的引用，挂载到dom元素上时表示具体的dom元素节点。ref是React提供的用来操纵React组件实例或者DOM元素的接口，通过ref获取组件内容特定标签对象, 进行读取其相关数据。有些场景需要获取某一个真实的DOM元素来交互，这时候就要用到React的refs属性。

简单使用方式：

<input type="text" ref="input" />
    
    this.refs.input.value

推荐使用方式：

<input type="text" ref={(input)=>this.input = input} />
    
    this.input.value