React组件的创建方式

使用函数创建组件

函数组件: 使用JS的函数(或箭头函数)创建的组件

• 函数名称必须以大写字母开头
• 函数组件必须有返回值,表示该组件的结构
• 如果返回值为null,表示不渲染任何内容

定义函数组件

通过function定义函数组件

function Hello() {
  return (
    <div>function函数组件</div>
  )
}


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

通过箭头函数定义函数组件

const Arrow = () => <div>箭头函数组件</div>

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

 

使用类创建组件

类组件: 使用ES6的class创建的组件

• 类名称必须以大写字母开头
• 类徐建应该继承React.Component父类,从而可以使用父类中提供的方法或属性
• 类组件必须提供render()方法
• render()方法必须有返回值,表示给组件的结构

class Hello extends React.Component {
  render() {
    return <div>Hello Class Component</div>
  }
}

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

将组件抽离为独立JS文件

1. 创建组件的js文件
2. 在js文件中导入React
3. 创建组件
4. 在组件的js文件中导出该组件

示例

在Hello.js中定义组件

import React from "react";

// 创建组件
class Hello extends React.Component {
  render() {
    return(
      <div>独立JS文件的React组件</div>
    )
  }
}

// 导出组件
export default Hello

在index.js中导入并渲染组件

// 导入 react
import React from 'react'
import ReactDOM from 'react-dom'

// 引入css
import './css/index.css'

// 导入Hello组件
import Hello from './component/Hello'

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