03.React组件基础

Posted foreverluckystar

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了03.React组件基础相关的知识,希望对你有一定的参考价值。

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文件

以上是关于03.React组件基础的主要内容,如果未能解决你的问题,请参考以下文章

03react 之创建component

如何使用导航架构组件查找子片段

[vscode]--HTML代码片段(基础版,reactvuejquery)

初入AngularJS基础门

微信小程序代码片段

快速上手React: