React三大属性（props，state，refs）

有关React基础知识及组件相关知识，请移步React框架简介（JSX语法、组件、虚拟DOM渲染）

React三大属性

Props

既然React组件可以通过JavaScript函数方式实现， 那么React组件就可以接受参数的传入。React框架定义了一个Props的概念， 专门用来实现React函数组件接受参数的输入。

1、每个组件都有props属性；

2、组件的属性值都保存在props中；

3、通过props可以在组件外部向组件内部传递参数；

4、在组件内部不能修改props属性的值（因为它是从外部传进去的，如果要修改就从传的地方进行修改）——props属性的只读属性

5、在组件内部读取某个属性的值：this.props.属性名

6、类组件的构造函数：

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

7、设置props的默认值：

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

8、属性值的类型和必要性限制：

（1）在组件外部定义时：

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

（2）在组件内部定义时：

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

例：

函数组件：

<div id="fn"></div>
<script type="text/babel">
    function FnProps(props){
        if(props){
            return <h2>你好，{props.name}</h2>
        }
    }
    FnProps.defaultProps={
        name:'皮皮虾'
    }
    // ReactDOM.render(<FnProps name="小张"/>,document.getElementById('fn'))         //你好，小张
    ReactDOM.render(<FnProps/>,document.getElementById('fn'))  //没有给props传值，渲染的是默认值，你好，皮皮虾
</script>

类组件：

class ClaProps extends React.Component{
    constructor(props){
        super(props)
        console.log(props)
    }
   // static propTypes={     //在组件内部 设置属性的数据类型和必要性
       // name:PropTypes.string.isRequired,   //设置name为字符串类型
   // }
    render(){
        return (
            <h2>
                你好，{this.props.name}    
            </h2>
        )
    }
}
ClaProps.propTypes={   //在组件外部定义设置属性的数据类型和必要性
	name:PropTypes.string.isRequired
}
ClaProps.defaultProps={
     name:'大蚊子'
 }
 // ReactDOM.render(<ClaProps name="小文"/>,document.getElementById('class'))    //你好，小文
ReactDOM.render(<ClaProps/>,document.getElementById('class'))    //你好，大蚊子


//const props={name:"小文"}    //定义一个props对象(当有多个参数需要传递时)
       //使用扩展运算符...传入整个props对象
//ReactDOM.render(<ClaProps {...props}/>,document.getElementById('class'))

state

1、是组件的状态机，通过更新组件的state属性来刷新组件（对组件进行重新渲染）；

2、每个组件都有state，它的值是对象类型；

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

4、状态值的读取：this.state.statePropertName

5、状态值的更新：

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

6、根据组件有无state属性可以将组件分为：有状态组件和无状态组件。

有state属性的组件叫做有状态组件，没有state的组件是无状态组件

<div id="state"></div>
<script type="text/babel">
    class StateDemo extends React.Component{
        constructor(props){
            super(props)
            this.state={
                name:'小张'
            }
            //this.handleClick=this.handleClick.bind(this)
        }
        //handleClick(){
            //this.setState({
                //name:'文子'
            //})
       // }
        handleClick=()=>{    //自定义 箭头函数，不用绑定this
            this.setState({
                name:'文子'
            })
        }
        render(){
            return (
                <h2 onClick={this.handleClick}>我是{this.state.name}</h2>
            )
        }
    }
    ReactDOM.render(<StateDemo/>,document.getElementById('state'))
</script>

props和state的区别

（1）state：状态机，组件自身的可以变化的数据

（2）props：从组件外部向组件传递的数据，在组件内部对props只能读不能修改。在组件外部传值时修改。

refs

1、refs是弹性文件系统。在React中可以通过该特性获取DOM或react元素

2、如何使用：

（1）通过createRef()方法创建

可以直接获取html元素：将html元素与ref进行绑定（给标签添加ref属性，ref属性值就是createRef方法创建的对象）

获取组件类的实例：可以直接和组件类的实例进行绑定

（2）回调refs（3）通过绑定字符串(String类型的refs)（4）使用useRef

例1：获取虚拟DOM标签的值：有三种方式

class RefComponent extends React.Component{
	constructor(props){
		super(props)
	   // this.showInput=this.showInput.bind(this)   //绑定this的第一种方法
	}
	showInput(){
		const inputVal=this.refs.content.value//获取到文本框输入的值，这里的this需要绑定才能起作用
		alert(inputVal)   //----------第一种

		//alert(this.input.value)    //----------第二种
	}
	handleBlur(event){  //event是事件发生的对象
		alert(event.target.value)     //----------第三种 显示的是失去焦点时输入框里面的值
	}
	render(){
		return (
			<div>
				<input type="text" ref="content"/>  //第一种
				//<input type="text" ref={(info)=>this.input=info}/>  //第二种 info代表控件里面输入的值
			//	<button οnclick={this.showInput}>显示</button>
			    <button onclick={this.showInput.bind(this)}></button>      //绑定this的第二种方法

				<input type="text" placeholder="失去焦点测试" onBlur={this.handleBlur}/>      //第三种  
			</div>
		)
	}	
}
ReactDOM.render(<RefComponent/>,document.getElementById('test'))

在这个例子里，我们学到了三种获取DOM元素值的方法以及两种函数绑定this的方法。

例2：使用createRef()创建Ref

class RefComponent extends React.Component{
	constructor(props){
		super(props)
		this.myRef=React.createRef()   //使用react创建一个refs
		console.log(this.myRef)
	}
	componentDidMount(){
		this.myRef.current.innerHtml="西柚"
	}
	render(){
		return (
			<div>
					<div ref={this.myRef}></div>
			</div>
		)
	}
}
ReactDOM.render(<RefComponent/>,document.getElementById('app'))

this.myRef：

this.myRef.current: