React组件基础及组件状态

组件分类

函数组件

• 使用函数创建的组件叫做 函数组件
• 函数名称首字母必须以大写字母开头
• 函数组件必须有返回值，而且是 JSX 结构； 返回值可以为 null， 意思是不渲染任何内容
• 使用函数名作为组件标签名

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

function App(){
  return (
    <div>函数组件</div>
  )
}
ReactDOM.render(<App />, document.querySelector('#app'))

类组件

• 使用 class 创建的组件叫做 类组件
• 类名需要大写，必须继承 React.Component 父类
• 继承父类就意味着能够调用父类中提供的属性和方法
• 类组件必须要有 render 方法，返回 JSX

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

class App extends React.Component{
  render(){
    return (
      <div>类组件</div>
    )
  }
}
ReactDOM.render(<App />, document.querySelector('#app'))

组件抽离