react系列之函数组件和类组件

目录

函数组件

概念

组件定义与渲染

注意事项

类组件

组件定义与渲染

注意事项

---

函数组件

说明：能够独立使用函数完成react组件的创建和渲染

概念

使用 JS 的函数（或箭头函数）创建的组件，就叫做函数组件

组件定义与渲染

// 定义函数组件
function DemoFn () {
  return 这是一个函数组件!
}

// 定义类组件
function App () {
  return (
    
    {/* 渲染函数组件 */}
      
      
    
)
}
export default App

注意事项

组件的名称必须首字母大写，react内部会根据这个来判断是组件还是普通的HTML标签

函数组件必须有返回值，表示该组件的 UI 结构；如果不需要渲染任何内容，则返回 null

组件就像 HTML 标签一样可以被渲染到页面中。组件表示的是一段结构内容，对于函数组件来说，渲染的内容是函数的返回值就是对应的内容

使用函数名称作为组件标签名称，可以成对出现也可以自闭合

类组件

说明: 能够独立完成类组件的创建和渲染

使用 ES6 的 class 创建的组件，叫做类（class）组件

组件定义与渲染

// 引入React
import React from 'react'

// 定义类组件
class DemoFn extends React.Component {
  render () {
    return 这是一个类组件!
  }
}

function App () {
  return (
    
      {/* 渲染类组件 */}
      
      
    
  )
}
export default App

注意事项

类名称也必须以大写字母开头

类组件应该继承 React.Component 父类，从而使用父类中提供的方法或属性

类组件必须提供 render 方法render 方法必须有返回值，表示该组件的 UI 结构

感谢各位点赞、收藏、评论、关注支持一下呗