React 组件的两种创建方式

Posted 2021-12-18 冰雪奇缘lb

使用函数创建组件

• 函数组件∶使用 JS 的函数（或箭头函数)创建的组件
• 函数组件必须有返回值，表示该组件的结构，如果返回值为 null，表示不渲染任何内容
• 组件名称必须以大写字母开头，React 据此区分组件和普通的 React 元素
• 使用 函数名 作为组件标签名

function Hello() 
  return (
    <div>这是我的第一个函数组件</div>
  )


// 使用箭头函数创建组件
// const Hello = () => <div>这是我的第一个函数组件</div>

// 渲染组件

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

---

使用类创建组件

• 类组件：使用 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 文件

1. 创建 Hello.js
2. 在 Hello.js 中导入React
3. 创建组件（函数或类)
4. 在 Hello.js 中导出该组件
5. 在 index.js 中导入 Hello 组件
6. 渲染组件

// Hello.js
import React from "react";

class Hello extends React.Component 
    render() 
        return (
            <div>这是我的第一个抽离到js文件的组件</div>
        )
    


// 导出组件
export default Hello

// index.js
import React from "react";
import ReactDOM from "react-dom";

// 导入
import Hello from './Hello';

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