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属性