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