React中函数组件与类组件的两种使用

React 创建组件的两种方式

函数组件:使用js函数创建的组件
约定1:函数名称必须以大写字母开头
约定2:函数组件必须要有返回值.
如果返回值为null.表示不渲染任何内容。
return null [什么都不会渲染了]
如果没有return会报错的哈

怎么使用函数组件呢？
直接使用函数名作为组件的标签名。
标签名是双标签也可以是单标签。

为什么React的函数组件必须以大写字母开头呢？
因为:React以此来区分是组件还是普通的React元素

函数组件的使用

//src下的index.js文件【入口文件】

import React from 'react'; //这个是react这个包，我们是需要的
import ReactDOM from 'react-dom'; //这个是react的虚拟dom
//函数组件名以大写字母开头
function Hello() {
  return (
    <div>我是一个函数组件</div>
  )
}
ReactDOM.render(<Hello/>, document.getElementById('root'))

类组件

使用ES6的class创建的组件.
约定1:类名必须以大写字母开头。
约定2：类组件必须去继承Raect.Component的父类，
从而可以使用父类中提供的属性或者方法。
约定3：类组件必须提供render方法
约定4: render方法必须要有返回值，表示该组件的结构。
如果你想什么都不返回的话，可以返回null
return null [什么都不会渲染了]

类组件的简单使用

import React from 'react'; //这个是react这个包，我们是需要的
import ReactDOM from 'react-dom'; //这个是react的虚拟dom
// 类名必须以大写字母开头。
class Hello extends React.Component{
  // 类组件必须提供render方法
  render() {
    // render方法必须要有返回值。
    // 返回的使用使用()包裹，推荐。
    return (
      <div>我是一个类组件</div>
    )
  }
}
ReactDOM.render(<Hello/>, document.getElementById('root'))

页面组件很多怎么处理

当我们的页面有很多组件的时候。
我们应该将组件处理出去。
将每个组件放在一个单独的JS文件中。

因为组件是一个独立的个体，
一般我们会放在一个单独的JS文件中去。
如果所有的组件放在同一个文件中。
以后这个文件会越来越大，不利于后期的维护。

抽离组件的步骤

1.创建Hello.js文件
2.引入react.
3.创建组件(函数组件或者类组件)
4.通过 export default 暴露出去
5.在使用的页面中引入
6.使用组件(渲染组件)

抽离组件的简单使用

<!-- 创建Hello.js文件 -->

import React from "react";
class Hello extends React.Component{
    render() {
        return <div>我是类组件</div>
    }
}
export default Hello

在使用的页面 [在使用的页面中引入]
import Hello  from './Hello';

ReactDOM.render(<Hello/>, document.getElementById('root'))