React第二弹——什么是React组件

React第二弹——什么是React组件

提示：本人是自学前端的一枚小小程序媛，以下内容是自己总结的笔记，如有错误，欢迎大家批评指正！！！！

---

说到组件，想必大家并不会陌生，随着组件化开发思想的诞生，前端在开发时才会变得如次方便。所谓组件化开发，就是把一个个功能抽离出去成为单独的模块，需要的时候直接引入就可以，这样极大的提高了代码的复用性和灵活性。在React中，有两种组件，一个是函数组件，一个是类组件，我们先聊聊函数组件。

函数组件，顾名思义就是用函数创建的组件。举个栗子

import React from 'react'
import ReactDOM from 'react-dom'
function  Hello(){
return (<div>这是函数组件</div>)
}
ReactDOM.render(<Hello/>,document.getElementById(‘root’))

• 使用JS中的函数(箭头函数)创建的组件叫做函数组件。
• 函数组件必须有返回值，返回值就是组件的内容，即使组件没有内容，也要写return null。
• 还有组件的名称必须用大写字母开头，React据此来区分组件和普通的React元素。
• 最后直接使用函数名作为标签名，React会把他解析成一个组件。
• 另外还需要注意函数组件是无状态组件

注意：有状态组件和无状态组件下期讲解

类组件是通过JS中的类创建的组件，举个例子

import React from 'react'
import ReactDOM from 'react-dom'
class Hello extends React.Component{
    render(){
        return (
            <div>这是类组件</div>
        )
    }
}
ReactDOM.render(<Hello/>,document.getElementById('root'))

• 类组件是使用ES6的class关键字创建的组件
• 而且类名必须大写字母开头
• 类组件继承React.Component父类，从而可以使用父类中提供的方法或者属性
• 类组件必须提供render()方法
• render方法必须有返回值，来表示该组件的结构，即使组件没有内容，也要写return null
• 类组件是有状态组件

这两种组件在实际开发中都是十分的重要。以上是React组件的分享，下期讲一讲有状态组件和无状态组件。