React组件

1、React 组件介绍

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

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

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

  特点:可复用、独立、可组合

2、React 组件的两种创建方式

  2.1 、使用函数创建组件

    函数组件:使用JS的函数(或箭头函数)创建的组件。

    约定1:函数名称必须以大写字母开头

    约定2:函数组件必须有返回值,表示该组件的结构

    如果返回值为null,表示不渲染任何内容

    function Hello() {

      return (

        <div>这是我的第一个函数组件</div>

      )

    }

    渲染函数组件:用函数名作为标签名

    ReactDOM.render(<Hello />, 挂载点)

    组件标签可以是单标签也可以是双标签

  2.2、使用类创建组件

    类组件:使用ES6的class创建的组件

    约定1:类名称必须以大写字母开头

    约定2:类组件应该继承 React.Component 父类,从而可以使用父类中提供的方法或属性

    约定3:类组件必须提供 render() 方法,表示该组件的结构

    约定4:render() 方法必须有返回值,表示该组件的结构

      class Hello extends React.Component  {

        render () {

          return (

            <div>Hello class Component !</div>

          )

        }

      }

   2.3、抽离为独立 JS 文件

    1、创建Hello.js

    2、在Hello.js 中导入 react

    3、创建组件(函数或类)

    4、在 Hello.js 中导出该组件

    5、在 index.js 中导入 Hello 组件

    6、渲染组件

上一篇:MySQL常见的三种存储引擎(InnoDB、MyISAM、MEMORY)的区别


下一篇:如何登陆Linux显示系统指标system-info.sh