React組件的props屬性、state屬性、refs屬性詳解

React組件屬性

1、props屬性

react中說的單向數據流值說的就是props，根據這一特點它還有一個作用：組件之間的通信。props本身是不可變的，但是有一種情形它貌似可變，即是將父組件的state作為子組件的props，當父組件的state改變，子組件的props也跟着改變，其實它仍舊遵循了這一定律：props是不可更改的。

props屬性的特點：

1.每個組件對象都會有props（properties的簡寫）屬性

2.組件標簽的所有屬性都保存在props中

3.內部讀取某個屬性值：this.props.propertyName

4.作用：通過標簽屬性從組件外 向組件內傳遞數據（只讀 read only）

5.對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'));