React初学之创建组件

在React中，通常有三种方式创建组件：函数式组件、类组件和使用React Hooks的函数式组件。

1、函数组件：纯粹的JavaScript函数来定义。虽然使用function创建的组件中有this关键字，但在React中，函数组件通常不依赖this来进行状态管理。这种方式创建的组件接收props作为参数，返回一个JSX元素。

（*1）使用function创建函数组件

function Hello(props) {
  return <div>Hello {props.name}</div>;
}

（*2）使用箭头函数创建函数组件

const MyComponent=(props) => {
    return(
        <button>点击按钮{props.name}</button>
    )
}

两种方式创建函数组建的区别：

1. 语法形式不同：使用function关键字定义的函数组件需要使用function关键字，并在函数体内返回JSX元素。而使用箭头函数定义的函数组件可以直接返回JSX元素，不需要使用大括号。

2. this指向不同：在函数组件中使用function关键字定义时，this指向的是函数组件本身。而在箭头函数定义的函数组件中，this指向的是包含该组件的父组件。

3. arguments对象不同：在函数组件中使用function关键字定义时，可以使用arguments对象获取传入的参数。而在箭头函数定义的函数组件中，没有自己的arguments对象，但可以使用剩余参数语法（...args）来获取传入的参数。

4. 构造函数不同：在函数组件中使用function关键字定义时，不能作为构造函数使用，即不能使用new关键字生成实例。而在箭头函数定义的函数组件中，可以作为构造函数使用。

2、类组件：通过ES6的class关键字来定义的。需要继承自React.Component并实现render方法。这种方式也可以接收props和state作为参数，但需要在constructor方法中初始化它们。同样，render方法需要返回一个JSX元素。

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: 'World' };
  }

  render() {
    return <div>Hello {this.state.name}</div>;
  }
}

3、React Hooks的函数式组件：这是一种在函数式组件中使用React的状态和其他特性的新方式。从React 16.8开始，你可以使用useState、useEffect等Hooks。这种方式不需要class或extends关键字，但需要在函数外部声明依赖项数组。

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}