react学习笔记之创建组件

函数组件

react中创建组件最简单的方式就是编写一个javascript函数

// MyComponent 首字母需要大写
function MyComponent(props) {
	console.log(this);  // 此处的this是undefined，因为babel编译后开启了严格模式
	return (
		<div>hello {props.name}</div>
	)
}
ReactDOM.render(
// 此处需要写标签的格式并且标签需要闭合
// 这里传的name属性会在组件的props中接受
	<MyComponent name="word" />,
	document.getElementById("root")
)

执行了ReactDOM.render(<MyComponent />,…)之后, react解析组件标签，找到MyComponent组件。发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转换为真实DOM，然后呈现到页面中。

class组件

class MyComponent extends React.Component {
	render() {
	// render 放在了MyComponent 的原型对象上，供实例使用。
	// render 中的this是MyComponent的实例对象 <=> MyComponent组件实例对象
		return (
			<div>hello {this.props.name}</div>
		)
	}
}
ReactDOM.render(
	<MyComponent name="word" />,
	document.getElementById("root")
)

执行了ReactDOM.render(<MyComponent />,…)之后，React解析组件标签，找到了MyComponent组件。发现组件是用类定义的，随后new出来该类的实例，并通过该实例调用原型上的render方法。然后将render返回的虚拟dom转为真实dom并呈现到页面中。