持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第6天，点击查看活动详情

这是React系列第三期。

第一期（项目启动）：juejin.cn/post/710282…

第二期（JSX）：juejin.cn/post/710334…

1. 什么是组件

组件是能够独立使用函数完成react组件的创建和渲染的最小单元。我们基于React的前端开发，其实就是创建出一个个组件，之后像搭积木一样，将组件安装到一起，最后形成我们大的项目界面。

在我们的React中，有函数组件以及类组件两大类，我们将在本文针对这两种组件，展开聊聊。

2. 函数组件

函数组件就是我们调用函数后，直接返回一个标签组件的形式，函数组件可以像一个标签一样被直接使用。

// 定义函数组件
function HelloFn () {
  return <div>这是我的第一个函数组件!</div>
}

// 定义类组件
function App () {
  return (
    <div className="App">
      {/* 渲染函数组件 */}
      <HelloFn />
      <HelloFn></HelloFn>
    </div>
  )
}
export default App

1. 组件的名称必须首字母大写，react内部会根据这个来判断是组件还是普通的HTML标签
2. 函数组件必须有返回值，表示该组件的 UI 结构；如果不需要渲染任何内容，则返回 null
3. 组件就像 HTML 标签一样可以被渲染到页面中。组件表示的是一段结构内容，对于函数组件来说，渲染的内容是函数的返回值就是对应的内容
4. 使用函数名称作为组件标签名称，可以成对出现也可以自闭合

3.类组件

// 引入React
import React from 'react'

// 定义类组件
class HelloC extends React.Component {
  render () {
    return <div>这是我的第一个类组件!</div>
  }
}

function App () {
  return (
    <div className="App">
      {/* 渲染类组件 */}
      <HelloC />
      <HelloC></HelloC>
    </div>
  )
}
export default App

1. 类名称也必须以大写字母开头
2. 类组件应该继承 React.Component 父类，从而使用父类中提供的方法或属性
3. 类组件必须提供 render 方法render 方法必须有返回值，表示该组件的 UI 结构

4. 事件绑定

我们可以通过事件绑定的方式获得事件对象e或者进行传参

// 函数组件
function HelloFn () {
  // 定义事件回调函数
  const clickHandler = (e,msg) => {
    e.preventDefault()
    console.log('事件被触发了', msg)
  }
  return (
    // 绑定事件
    <a href="http://www.baidu.com/" onClick={(e) => clickHandler(e, msg)}>百度</a>
  )
}

5. this问题说明

推荐用箭头函数的方式实例方法