React中的函数式组件和类组件

0.背景

React中有两种创建组件的方式

• 使用函数创建组件
• 使用类创建组件

1.函数式组件

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

1.1 说明

• 函数名称必须以大写开头(据此区分是组件还是普通的标签元素)

• 函数组件必须有返回值,表示该组件的结构.

  不渲染任何内容时,请返回null.

• 使用函数名称作为组件名

1.2 示例

// 函数式组件
function Hello(){
    return (
    	<div>这是函数式组件</div>
    )
}
// 或者 箭头函数
// const Hello = () => <div>这是函数式组件</div>

// 挂载渲染区域
ReactDOM.render(<Hello />, document.getElementsById('root'))

2.类组件

使用ES6的class创建组件

2.1 说明

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

2.2 示例

// 类组件
class Hello extends React.Component{
    render() {
        // 不渲染内容时,同样返回null即可.
        return <div>这是类组件</div>
    }
}
// 挂载渲染区域
ReactDOM.render(<Hello />, document.getElementsById('root'))

3. 将组件独立为js文件

3.1 类组件导出

创建Hello.js

import React from 'react'

// 创建组件
class Hello extends React.Component{
    render() {
        // 不渲染内容时,同样返回null即可.
        return <div>这是类组件</div>
    }
}

// 导出组件
export default Hello

导入

// 指定路径
import Hello from './Hello'

// 挂载渲染区域
ReactDOM.render(<Hello />, document.getElementsById('root'))

3.2 函数组件导出

创建Demo.js

function Demo() {
  return (
     return <div>这是函数组件</div>
  )
}

export {Demo}

导入

import {Demo} from './Demo'

// 挂载渲染区域
ReactDOM.render(<Demo />, document.getElementsById('root'))