一、Class组件

ES6的加入让JavaScript直接支持使用class来定义一个类，react创建组件的方式就是使用的类的继承，ES6 class是目前官方推荐的使用方式，它使用了ES6标准语法来构建。

import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component {
    render () {
        return (
            <h1>欢迎进入React的世界</h1>
        )
    }
}

二、函数式组件

import React from 'react'
import ReactDOM from 'react-dom'

const App = (props) => <h1>欢迎进入React的世界</h1>

ReactDOM.render(
    // React组件的调用方式
    <App />,
    document.getElementById('root')
)

注意！注意！注意！组件名必须大写，否则报错。

三、组件的数据挂载方式

1、状态（state）

定义state

简单理解为组件内的要用的数据，React不允许直接修改state更改时必须使用setState()更改

定义state

第一种方式

class App extends React.Component {
   state ={
       name='admin'
   }
 render() {
   return (
     <div>{this.state.name}</div>
   );
 }
}

第二种方式
- 添加一个class 构造函数然后在该函数中为 this.state 赋初值：

class App extends React.Component {

constructor(props) {
   super(props);
   this.state ={
       name='admin'
   }
}

 render() {
   return (
     <div>{this.state.name}</div>
   );
 }
}

setState()

setState() 会对一个组件的 state 对象安排一次更新。当 state 改变了，该组件就会重新渲染。

class App extends React.Component {
   state ={
       name='admin'
   }
 render() {
   return (
     <div>
     <button onclick={()=>{
         this.setstate({
             name='xiao ming'
         })
     } >
          {this.state.name}
     </button>

     </div>
   );
 }
}

2、属性(props)

props是正常是外部传入的，组件内部也可以通过一些方式来初始化的设置，属性不能被组件自己更改，但是你可以通过父组件主动重新渲染的方式来传入新的props。

组件中通过this.props获取属性。

四、state VS props

相同点：

props和state都是普通的JS 对象
props和state的变化 都会触发渲染更新
props和state都是确定性的。如果您的组件为相同的道具和状态组合生成不同的输出，那么您做错了。

不同点：

属性能从父组件获取，状态不能
属性可以由父组件修改，状态不能
属性能在内部设置默认值，状态也可以，设置方式不一样
属性不在组件内部修改，状态要在组件内部修改
属性能设置子组件初始值，状态不可以
属性可以修改子组件的值，状态不可以

state的主要作用是用于组件保存、控制、修改自己的可变状态。

props的主要作用是让使用该组件的父组件可以传入参数来配置该组件。

三、组件和组件中的数据挂载