React-组件三大核心属性: state、props、refs

1、state
state是组件对象最重要的属性, 值是对象.React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。
例子：

	//1.创建组件
		class Weather extends React.Component{
			//初始化状态
			state = {isHot:false,wind:'微风'}
			render(){
				const {isHot,wind} = this.state
				return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}，{wind}</h1>
			}
			//自定义方法————要用赋值语句的形式+箭头函数
			changeWeather = ()=>{
				const isHot = this.state.isHot
				this.setState({isHot:!isHot})
			}
		}
		//2.渲染组件到页面
		ReactDOM.render(<Weather/>,document.getElementById('test'))

状态数据，不能直接使用this.state修改状态， 用setState（）

2.props
每个组件对象都会有props(properties的简写)属性，组件标签的所有属性都保存在props中。props可以通过标签属性从组件外向组件内传递变化的数据，但是组件内部不要修改props数据。可以通过propTypes对标签属性进行类型、必要性的限制。
例子：

//创建组件
	class Person extends React.Component{
		constructor(props){
			//构造器是否接收props，是否传递给super，取决于：是否希望在构造器中通过this访问props
			// console.log(props);
			super(props)
			console.log('constructor',this.props);
		}
		//对标签属性进行类型、必要性的限制
		static propTypes = {
			name:PropTypes.string.isRequired, //限制name必传，且为字符串
			sex:PropTypes.string,//限制sex为字符串
			age:PropTypes.number,//限制age为数值
		}
		//指定默认标签属性值
		static defaultProps = {
			sex:'男',//sex默认值为男
			age:18 //age默认值为18
		}
		render(){
			// console.log(this);
			const {name,age,sex} = this.props
			//props是只读的
			//this.props.name = 'jack' //此行代码会报错，因为props是只读的
			return (
				<ul>
					<li>姓名：{name}</li>
					<li>性别：{sex}</li>
					<li>年龄：{age+1}</li>
				</ul>
			)
		}
	}
	//渲染组件到页面
	ReactDOM.render(<Person name="jerry"/>,document.getElementById('test1'))

props中的数据都是外界传递过来的；state中的数据都是组件私有的；props中的数据都是只读的，不能重新赋值；state中的数据，都是可读可写的；子组件只能通过props传递数据；

3. refs与事件处理
组件内的标签可以定义ref属性来标识自己，也就是说ref具有相对于身份证的作用。通过ref获取某一个真实的DOM元素来交互。ref有三种形式，一种是字符串形式，一种是回调形式，还有createRef创建ref容器。虽然字符串形式简单好用，但是使用过多的ref效率不高，所以一般使用回调形式。
例子：

//1.字符串形式的ref
<input ref="input1"/>
//2.回调形式的ref
<input ref={(c)=>{this.input1 = c}}/>
3.createRef创建ref容器
myRef = React.createRef() 
<input ref={this.myRef}/>

事件处理：
1.通过onXxx属性指定事件处理函数(注意大小写)
（1）React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 – 为了更好的兼容性
（2）React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) --为了的高效
2.通过event.target得到发生事件的DOM元素对象–不要过度使用ref

例子：
//创建组件
class Demo extends React.Component{
//创建ref容器
myRef = React.createRef()
myRef2 = React.createRef()
//展示左侧输入框的数据
showData = (event)=>{
console.log(event.target);
alert(this.myRef.current.value);
}
//展示右侧输入框的数据
showData2 = (event)=>{
alert(event.target.value);
}
render(){
return(

 
点我提示左侧的数据 
 

)
}
}
//渲染组件到页面
ReactDOM.render(,document.getElementById(‘test’))