03.React组件基础

Posted 2020-11-25 foreverluckystar

React组件介绍

1.组件是React 的一等公民。使用React就是在用组件

2.组件表示页面中的部分功能

3.组合多个组件实现完整的页面功能

4.特点：可复用，独立，可组合

React组件的两种创建方式

1.使用函数创建组件

//函数组件：使用JS 的函数(或箭头函数)创建的组件
//约定1:函数名称必须以 大写字母开头
//约定2:函数组件 必须有返回值，表示该组件的结构
//如果返回值为null,表示不渲染任何内容
function Hello(){
    return(
        <div>这是我的一个函数组件！</div>
    )
}
//渲染函数组件： 用函数名作为组件标签名
//组件标签可以是单标签也可以是双标签
ReactDOM.render(<hello />,root)

2.使用类创建组件

//类组件：使用ES6 的class 创建的组件
//约定1:类名称也必须以 大写字母开头
//约定2:类名称应该继承 React.Component 父类，从而可以使用父类中提供的方法或属性
//约定3:类组件必须提供render()方法
//约定4:render()方法 必须有返回值，表示该组件的结构

//创建类组件
class Hello extends React.Component{
    render(){
        return(
            <div>这是我的第一个类组件</div>
        )
    }
}

//渲染组件
ReactDOM.render(<Hello />,document.getElementById('root'))

把创建好的组件 抽离为独立JS文件