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

今天了解到了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向子组件传递想要的数据，即在子组件标签中写入自定义属性值加属性名

<Add count={todos.length} addTodo={this.addTodo} />

<List todos={todos}/>

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