react函数组件和类组件的创建和渲染

一、函数组建的创建与渲染

// 创建
function Hello(){
  return <div>函数组件</div>
}
// 渲染 自闭合标签格式<Hello/>或者成对出现<Hello></Hello>

function App() {
  return (
    <div className="App">
      {/* 渲染Hello组件 */}
      <Hello></Hello>
      <Hello/>
    </div>
  );
}

export default App;

注意事项：

1. 组件的名称必须首字母大写，react内部会根据这个来判断是组件还是普通的HTML标签
2. 函数组件必须有返回值，表示该组件的 UI 结构；如果不需要渲染任何内容，则返回 null
3. 组件就像 HTML 标签一样可以被渲染到页面中。组件表示的是一段结构内容，对于函数组件来说，渲染的内容是函数的返回值就是对应的内容
4. 使用函数名称作为组件标签名称，可以成对出现也可以自闭合

二、类组件的创建和渲染

import React from "react";

// 创建
class HelloComponent extends React.Component{
  render() {
    return <div>类组件</div>
  }
}
// 渲染 自闭合标签格式<HelloComponent/>或者成对出现<HelloComponent></HelloComponent>

function App() {
  return (
    <div className="App">
      {/* 渲染HelloComponent组件 */}
      <HelloComponent></HelloComponent>
      <HelloComponent/>
    </div>
  );
}

export default App;

注意事项：

1. 类名称也必须以大写字母开头
2. 类组件应该继承 React.Component 父类，从而使用父类中提供的方法或属性
3. 类组件必须提供 render 方法render 方法必须有返回值，表示该组件的 UI 结构