[JavaScript知识库]React组件的三大属性

props属性

(1) 每个组件都有props属性

(2) 组件的属性值都保存在props中

(3) 通过props可以在组件外部向组件内部传递值

(4) 在组件内部不能修改props属性的值

(5) 在组件内部读取某个属性的值：

 this.props.属性名

(6) 类组件的构造函数

constructor(props){
      super(props)
      console.log(props) //输出组件的所有属性
    }

(7) 设置Props的默认值

  组件名.defaultProps = {
			
			   属性名: 值,
			   属性名: 值
			}

(8) 属性值的类型和必要性限制

??????A、在组件外部定义

组件名.propTypes = {
			  
			      属性名: React.PropTypes.数据类型.必要性(isRequired)
			  }

??????B、在组件内部定义

  static propTypes = {
  
    属性名: PropTypes.数据类型.必要性(isRequired)
   
}

state属性

(1) 是组件的状态机，通过更新组件的state属性来刷新组件(对组件进行重新渲染)。

(2) 每个组件都有state,它的值是对象类型

(3) 组件state属性的初始化放在构造方法中

(4) 状态值的读取：

   this.state.statePropertName

(5) 状态值的更新

this.setState({
		 
		    statePropertName1: 值,
			
			statePropertName2：值
			
		 })

示例：

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'));

props和state属性的区别

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

refs属性

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

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

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'));