React组件定义

whatever who cares2024-07-24 12:35

一、定义

组件是是构建用户界面（UI）的基础，它可以是一个输入框、按钮、也可以是一整个页面。组件可以分为以下2种类型：

1、函数组件（Functional Components）

顾名思义就是用来函数定义的组件，是一种简单灵活的组件形式，又叫无状态组件。函数组件接收一个props对象作为参数，返回一个React元素作为输出。

2、类组件（Class Components）

是一种更加复杂的组件形式，通过继承React.Component类来定义组件。类组件有自己的状态和生命周期方法，提供了更多的功能和控制权。

二、创建React组件

1、函数组件

function handleClick()  {
  console.log('登录了');
};
export default function Login (props){
  return (
    <div>
      <button className="btn" style={{'background':'red'}} onClick={handleClick}>登录{props}</button>
    </div>
  );
}

或者使用箭头函数

const handleClick = () => {
  console.log('登录了');
};
const Login = (props) => {
const {name} = props;
  return (
    <div>
    <span>{name}</span>
      <button className="btn" style={{'background':'red'}} onClick={handleClick}>登录{props}</button>
    </div>
  )
};
export default Login;

2、类组件

import  { Component } from 'react';

class Settings extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: props.name,,
      msg:'生死看淡，不服就干'
    };
  }

  handleClick = () => {
    this.setState({ name: '你好啊, React!' });
  }
  render() {
    return (
      <div>
        <h1 className="title" style={{color:'green'}}>{this.state.name}</h1>
        <h6>{this.state.msg}</h6>
        <button onClick={this.handleClick}> 点击 </button>
      </div>
    );
  }
}

export default Settings;

三、引入使用React组件

import { useState } from 'react'
import Login from './views/login/index.jsx';
import Settings from './views/settings/index.jsx';
function App() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <Login name="LoginPage"/>
      <Settings name="SettingsPage"/>
    </div>
  )
}

export default App;