React组件基本定义和使用以及三大属性

一、React组件基本定义和使用：

注：
  1、本文对所需要引入的js、HTML标签省略。
  2、本文涉及到ES6语法
1、定义组件
  方式一：工厂函数组件（简单组件,没有状态的组件）

function  MyComponent() {
	return <h2>工厂函数组件（简单组件）</h2>
}

  方式二：ES6类组件（复杂组件）

class MyComponent2 extends React.Component{
	render() {
		console.log(this);
		return  <h2>ES6类组件（复杂组件）</h2>
	}
}

2、渲染组件标签

ReactDOM.render(<MyComponent />,document.getElementById('example1'))

ReactDOM.render(<MyComponent2 />,document.getElementById('example2'))

二、组件三大属性

在一中我们看下组件类MyComponent2中的this打印出的值是什么？

MyComponent2
context: {}
props: {}
refs: {}
state: null
updater: {isMounted: ƒ, enqueueSetState: ƒ, enqueueReplaceState: ƒ, enqueueForceUpdate: ƒ}
_reactInternalFiber: FiberNode {tag: 2, key: null, type: ƒ, stateNode: MyComponent2, return: FiberNode, …}
_reactInternalInstance: {_processChildContext: ƒ}
isMounted: (...)
replaceState: (...)
__proto__: Component

组件三大属性1：state
需求：自定义组件，功能说明如下
1、显示h2标题，初始文本为：hey
2、点击标题更新为：o

//1、定义组件
class Like extends React.Component{
	//接收的参数是固定的
	constructor(props) {
		super(props) //调用父类型的构造函数将props将给它
		//初始化状态
		this.state = {
			isLike: false;
		}
		//将新增方法中的this强制绑定为组件对象 先得到这个方法
		this.handleClick = this.handleClick.bind(this);
	}
	//handleClick()新添加的方法：内部的this默认不是组件对象而是undefined
	handleClick() {
		console.log('handleClick()',this);//this不是组件对象所以会报错
		//得到状态并取反
		const isLike = !this.state.isLike
		//更新状态
		this.setState({isLike})
	}	
	//render()方法重写组件类的方法本来就有的
	render() {
	//读取状态 ES6的解构赋值
		const {isLike} = this.state 
		//this指的是组件对象
		return <h2 onClick={this.handleClick}>{isLike?'hey':'o'}</h2 >
	}
}
//2、渲染组件
ReactDOM.render(<Like />,document.getElementById('example'))

重点总结:
1、状态的基本操作：初始化状态、读取状态、更新状态：

//初始化状态
constructor(props) {
	super(props)
	this.state = {
		stateProp1:value1,
		stateProp2:value2
	}
}
//读取某个状态值
this.state.statePropertyName
//更新状态--->组件界面更新
this.setState({
	stateProp1:value1
	stateProp2:value2
})

2、如何将新增的方法强制绑定为组件对象：

this.handleClick = this.handleClick.bind(this);

组件三大属性2：props
需求：自定义用来显示一个人员信息的组件
1、姓名必须指定
2、如果性别没有指定，默认为男
3、如果年龄没有指定，默认为18

//1、定义组件
//方法一：
function Person(props){
	return (
		<ul>
			<li>姓名:{props.name}</li>
			<li>年龄:{props.age}</li>
			<li>性别:{props.sex}</li>
		</ul>
	)
}
//方法二：
class Person extends React.Component{
	render() {
		return (){
			<ul>
			//	this代表组件对象
				<li>姓名:{this.props.name}</li>
				<li>年龄:{this.props.age}</li>
				<li>性别:{this.props.sex}</li>
			</ul>
		}
	}
}


//指定属性默认值
Person.defaultProps = {
	sex:'男'，
	age:'18'
}
//指定属性值的类型和必要性
Person.propTypes = {
	name:PropTypes.string.isRequired,
	age:PropTypes.number
}
//2、渲染组件标签
const p1 = {
	name:'Tom',
	age:'23',
	sex:'女'
}
//...的作用 
//1、打包
//function fn(...){}  fn(1,2,3)
//2 、解包
//const arr1  = [1,2,3]   const arr2 = [6,...arr1,9]  拆数组

ReactDOM.render(<Person  {...p1} />,document.getElementById('example1'))  //拆对象{...p1}
const p2 = {
	name:'JACK';
}
ReactDOM.render(<Person name={p2.name} age={18} />,document.getElementById('example2'))

组件三大属性3：refs
需求：自定义组件，功能说明如下：
1、点击按钮，提示第一个输入框的值
2、当第二个输入框失去焦点时，提示这个输入框的值

//1、定义组件
class MyComponent  extends React.Component{
	//初始化状态
	constructor(props) {
		super(props)
		this.showInput = this.showInput.bind(this);
		this.handleBlur= this.handleBlur.bind(this);
	}

	showInput() {
		const input = this.refs.content
		alert(this.input.value);
	}
	handleBlur(event){
		alert(event.target.value);
	}
	render(){
		return(
			<div>
				<input  type="text" ref={input => this.input = input }/>//this表示组件对象
				<button onClick={this.showInput}>提示输入</button>
				<input  type="text" placeholder="失去焦点提示内容" onBlur = {this.handleBlur} />
			</div>
		)
	}
}
//2、渲染组件标签
ReactDOM.render(<MyComponent />,document.getElementById('example'))

重点总结:
1、refs
2、事件处理