【逆战班】初识react组件

组件：组件是React的核心、精髓，组件的名字首字母要大写
1. 状态组件（类组件）

class One extends React.Component{
	render(){
		return ( 
			<div>我是一个状态组件</div>
		 )
	}
}
export default One;

注意：
* 状态组件是通过class来定义的，需要继承 React.Component 类
* render 方法返回的内容即是该组件的内容
* 类的名字即是组件的名字
* 属性是不允许被修改的，状态是可以修改的
* 状态：只有在状态组件当中才存在，它是允许被修改的，状态是从父级继承过来的

2. 无状态组件（函数组件）

function One() {
	return ( 
		<div>One</div>
	 )
}
export default One;

注意：
* 函数的名字即是组件的名字，函数的返回值即是组件的内容
* 返回的内容有且只能有一个根元素。
* 必须要有return

3. 受控组件

注意：
* 下拉列表，文本框，单选，多选。如果该元素当中使用 value 属性，那么需要在该元素上增加 onChange 事件。
* 该组件会受到state的控制，如果要想改变文本的框的内容，需要通过 onChange 事件来改变 state
* defaultValue 初始值

class MyForm extends  React.Component{
	constructor(){
		super();
		this.state = {
			userName:"",
			passWord:""
		}
	}
	changeHandler(e){
		this.setState({
			[e.target.name]:e.target.value
		})
	}
	render(){
		return (
			<div>
				<input type="text" name="userName" onChange={this.changeHandler.bind(this)} value={this.state.userName}/>
				<input type="text" name="passWord" onChange={this.changeHandler.bind(this)} value={this.state.passWord}/>
				<input type="button" value="提交"/>
			</div>
		)
	}
}
ReactDOM.render((<MyForm></MyForm>),document.querySelector("#root"))

4. 非受控组件

class My extends React.Component{
	constructor(){
		super();
		this.state = { userName:"" }
	}
	render(){
		return (
			<div>
				<div ref="myDiv">我会变成红色</div>
				<input type="text" defaultValue={this.state.userName} ref="userName"/>
				<input type="button" value="提交" onClick={()=>{
					this.refs.myDiv.style.color="red";
				}}/>
			</div>
		)
	}
}
ReactDOM.render((<My/>),document.querySelector("#root"))