react创建组件的两种方式

1. 使用构造函数来创建组件

如果需要传参，在函数中加一个props参数来接受，并且必须向外return一个合法的jsx创建的虚拟DOM。

//1. 组件名首字母为大写 2. 必须return 合法的jsx
// 这里就可以相当于子组件
function Hellow (props){
	//props为父组件传过来的数据
	//如果打印props的话，只要子组件用的到东西都会打印出来,在这里没有用到父组件中的a数据，因此只会打印出前三个来。
	return <div>
		姓名: {props.name}, 性别: {props.sex}, 年龄: {props.age}
	</div>
}
// 这里就想当于父组件
const person = {
	name: 'zs',
	sex: 'gener',
	age: 12,
	a: 2
}
//将组件渲染到页面上来
// 有两个参数分别为,1.填写组件，2. 将组件渲染到指定的位置，也就是指定的DOM元素上。
ReactDOM.render(<div>
//1. 使用ES6的展开运算符
<Hellow {...person}/>
//2. 直接赋值
<Hellow name='zs' sex='gener' age={12}/>
//3. 使用`.`的形式，父组件
<Hellow name={person.name} sex={person.sex} age={person.age}/>
</div>,document.getElementById('app'))

2. 使用class关键字来创建组件

这种方法也是最常用的一种方式

• 最基本的创建组件结构

class World extends React.Component{
	render(){
		return<div>这是一个组件</div>
	}
}

例如：

// 父组件
// 创建组件和虚拟DOM
import React from 'react'
//实现虚拟DOM操作并且渲染到页面指定的容器中
import ReactDOM from 'react-dom'
//1. 创建参数，给子组件使用
const person = {
	name: 'zs',
	sex: 'gener',
	age: 23
}
//2. 导入子组件
import World from './Component/World'
//3. 渲染到页面上
ReactDOM.render(
<div><World {...person}/></div>, document.getElementById('app')
)

//子组件
export default class World extends ReactDOM.Component{
	constructor(props){
		// 父类构造函数的引用
		super(props)
		// this.state是当前class组件私有数据
		this.state= {
			msg: 'zs',
			info: 'hellow'
		}
	}
	//render是一个生命周期中的函数
	render(){
		return <div>
			{this.state.msg},
			{this.props.name}
		</div>
	}
}

3. 两种组件的区别

1. 用构造函数创建的组件没有状态
2. 用class创建的组件有状态
3. 两种组件的本质的区别为state属性