state属性

react 把组件看成是一个状态机。通过界面与用户行为之间的交互，实现不同状态调整，然后重新渲染 UI，让用户界面和数据保持一致。

react 里，只需更新组件的 state，然后根据新的信息 state 重新渲染用户界面（不要直接操作 DOM元素）。修改State使用this.setState方法，直接使用this.state.num虽然会修改属性，但是无法更新组件。setState并不一定是同步更新的，例如react封装的onClick、onChange等事件是异步提交更新的，而js原生事件是同步更新的。开发中大部分用到的是react封装事件。

要解决state同步更新问题，需要让setState接收一个函数而不是一个对象。this.setState((state,props)=>{num:state.num+1})

 import React from "react";
class TestComponment extends React.Component {
    constructor(props) {
        super(props);
        this.state={
            num:0
        }
    }
    render() {
        const add =() => {
            this.setState({
                num: this.state.num +1
            })
        }
        const sub = () => {
            this.setState({
                num: this.state.num - 1
            })
        }
        return(
            <div>
                <h1>{this.state.num}</h1>
                <button onClick={add}>加一</button>
                <button onClick={sub}>减一</button>
            </div>
        )
    }
}

export default TestComponment

props属性

props是不可变的，在react单项数据流是通过props实现的。每个组件都含有自己的props属性，父组件向子组件传递消息通过props传输。props中的属性可以指定数据类型。获取props属性通过this.props.xxxx。

const Componment = (props) => {
    console.log(props)
    return(
        <div>
            hello {props.user.name}
        </div>
    )
}

refs属性

refs提供给我们访问DOM节点，或者是react组件的实例的一种方式。一般情况是用不到refs这个属性，因为react不建议我们直接操作底层DOM元素，而是在render函数里去编写我们的页面结构，由React来组织DOM元素的更新。但凡事总有例外，总会有时候需要我们直接去操作页面的真实DOM，这就要求我们有直接访问真实DOM的能力，而refs就是为我们提供了这样的能力。

<input ref="myInput" />
let input = this.refs.myInput;
let inputValue = input.value;
let inputRect = input.getBoundingClientRect();

总结

state属性是可变的，通过改变state状态更新组件；props是不可变的，父子组件中通过props属性从上向下传递数据，保证数据单一流向；refs提供直接操作DOM元素的方法，一般情况下不建议使用，尽可能的使用声明式编程。