这是学习 React 框架时我的一份笔记，组件的三大核心属性是前端面向组件开发中一个十分重要的部分。

state 链接到标题

  1. state 是组件对象最重要的属性，值是对象；
  2. 通过更新 state 就可以更新组件对应的页面显示（即重新渲染组件，因此组件又被称为“状态机”；
  3. 更新 state 必须使用组件对象的 this.setState 方法；
  4. 每次调用 this.setState 方法都会调用一次 render 方法。

样例 链接到标题

一个较为繁琐的样例

class Weather extends React.Component{  
  
	//构造器调用几次？ ———— 1次  
	constructor(props){  
		console.log('constructor');  
		super(props)  
		//初始化状态  
		this.state = {isHot:false,wind:'微风'}  
		//解决changeWeather中this指向问题  
		this.changeWeather = this.changeWeather.bind(this)  
	}  
	  
	//render调用几次？ ———— 1+n次 1是初始化的那次 n是状态更新的次数  
	render(){  
		console.log('render');  
		//读取状态  
		const {isHot,wind} = this.state  
		return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}，{wind}</h1>  
	}  
	  
	//changeWeather调用几次？ ———— 点几次调几次  
	changeWeather(){  
		//changeWeather放在哪里？ ———— Weather的原型对象上，供实例使用  
		//由于changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接调用  
		//类中的方法默认开启了局部的严格模式，所以changeWeather中的this为undefined  
		  
		console.log('changeWeather');  
		//获取原来的isHot值  
		const isHot = this.state.isHot  
		//严重注意：状态必须通过setState进行更新,且更新是一种合并，不是替换。  
		this.setState({isHot:!isHot})  
		console.log(this);  
		  
		//严重注意：状态(state)不可直接更改，下面这行就是直接更改！！！  
		//this.state.isHot = !isHot //这是错误的写法  
	}  
}

简化后可以如下

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})  
	}  
}

props 链接到标题

  1. 组件标签的所有属性都会被保存到 props 中；
  2. 非自闭合组件组件体中的数据会被保存到 this.props.children 的 value 中；
  3. 通过标签属性可以在组件外向组件内传递变化的数据；
  4. 可以对 props 中的属性值进行类别和必要性限制。

样例 链接到标题

基本使用

//创建组件  
class Person extends React.Component{  
	render(){  
		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>  
		)  
	}  
}  
//对标签属性进行类型、必要性的限制  
Person.propTypes = {  
	name:PropTypes.string.isRequired, //限制name必传，且为字符串  
	sex:PropTypes.string,//限制sex为字符串  
	age:PropTypes.number,//限制age为数值  
	speak:PropTypes.func,//限制speak为函数  
}  
//指定默认标签属性值  
Person.defaultProps = {  
	sex:'男',//sex默认值为男  
	age:18 //age默认值为18  
}  
//渲染组件到页面  
ReactDOM.render(<Person name={100} speak={speak}/>,document.getElementById('test1'))  
ReactDOM.render(<Person name="tom" age={18} sex="女"/>,document.getElementById('test2'))  
  
const p = {name:'老刘',age:18,sex:'女'}  
// ReactDOM.render(<Person name={p.name} age={p.age} sex={p.sex}/>,document.getElementById('test3'))  
ReactDOM.render(<Person {...p}/>,document.getElementById('test3'))  
  
function speak(){  
	console.log('我说话了');  
}

简化后可以如下

//创建组件  
class Person extends React.Component{  
  
	constructor(props){  
		//构造器是否接收props，是否传递给super，取决于：是否希望在构造器中通过this访问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(){  
		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'))

ref 与事件处理 链接到标题

  1. 组件内的标签可以定义 ref 属性来标识自己；
  2. 有字符串、回调、createRef 创建 ref 容器这三种设置形式；
  3. 通过 onXxx 属性指定事件处理函数（注意大小写）；
  4. 通过 event.target 得到发生事件的 DOM 元素对象。

样例 链接到标题

这里只介绍业务场景中出现频率最高的回调形式

//创建组件  
class Demo extends React.Component{  
	//展示左侧输入框的数据  
	showData = ()=>{  
		const {input1} = this  
		alert(input1.value)  
	}  
	//展示右侧输入框的数据  
	showData2 = ()=>{  
		const {input2} = this  
		alert(input2.value)  
	}  
	render(){  
		return(  
			<div>  
			<input ref={c => this.input1 = c } type="text" placeholder="点击按钮提示数据"/>&nbsp;  
			<button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;  
			<input onBlur={this.showData2} ref={c => this.input2 = c } type="text" placeholder="失去焦点提示数据"/>&nbsp;  
			</div>  
		)  
	}  
}  
//渲染组件到页面  
ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))