React组件的创建

在react中，组件分为两种，类组件 和 函数式组件

1. 简单功能 使用 函数式组件
2. 复杂功能 使用 类组件
3. 组件名都必须大写

1. 类组件

使用es6创建class的方式来实现一个组件类

• 首字母要大写
• 要继承 React中的Component类
• 必须实现render函数，函数内返回标签
• 组件有自己的state和生命周期

import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import "./index.css";


 class App extends Component {
  render() {
    return (
      <div>
        hello
      </div>
    )
  }
}
ReactDOM.render(<App />, document.getElementById('root'))

2. 函数式组件

也叫做无状态组件

简单功能的组件可以使用函数式组件，性能更高。

函数式组件其实就是一个函数，只不过函数内部需要返回对应的标签

• 首字母要大写
• 函数内要返回标签

import React from 'react';
import ReactDOM from 'react-dom';
import "./index.css";


// 这个就是函数式组件
const App = () => {
  return (
    <div>这个就是一个简单的函数式组件</div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

小结:

• 函数式组件性能更高，因为没有生命周期
• 函数式组件更方便进行测试
• 能不用类组件就不用类组件
• 当要使用 state 时，就要使用类组件