## 1.組件的創建方式：
### 1. 無狀態函數式組件創建
~~~
import React from 'react'
function Person(props) {
return <div>
這是一個組件 -- author：{props.name}
</div>
}
export default Person
~~~
### 2. 有狀態自定義式組件創建
~~~
import React, { Component } from 'react'
class Person extends Component {
render(){
return <div>
這是一個組件 -- author：{this.props.name}
</div>
}
}
export default Person
~~~
~~~
import React, { Component } from 'react';
import './App.css';
import Person from './components/Animal';
class App extends Component {
render() {
return (
<div>
<p>what are you want to say?</p>
<Person name="皮卡丘"></Person>
</div>
);
}
}
export default App;
~~~
### 3.兩種創建方式的對比
1、class關鍵字創建的組件，有自己的私有數據和生命周期；function創建的組件，沒有自己的私有數據和生命周期
2、關鍵區別： 有無state屬性和有無生命周期函數
~~~
import React, { Component } from 'react'
class Person extends Component {
constructor() {
super();
// 只有調用了super()之后，才能使用this關鍵字
this.state = { // 這個this.state = {} 相當于Vue中的data() { return {} }
msg: '你好啊'
}
}
render() {
this.state.msg = '我不好'
return <div>
這是一個{this.state.msg}組件 -- author：{this.props.name}
</div>
}
}
export default Person
~~~
## 2.React組件屬性
~~~
const user = {
name: "皮卡丘",
age: 21
}
<Study name={user.name}/>
~~~
組件參數傳遞：在React中Class關鍵字組件的屬性會通過組件類的`this.props`對象獲取
~~~
import React, { Component } from 'react';
class Study extends Component {
render() {
return <p>hello {this.props.name}</p>
}
}
export default Study
~~~
