## 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
~~~
