理解React.js组件：函数式、类、状态、属性和钩子
推荐超级课程：
@TOC
- 函数式组件：
函数式组件是最简单的React组件类型。它们被定义为返回JSX（JavaScript XML）以描述UI的JavaScript函数。函数式组件默认是无状态的，这意味着它们不管理自己的状态。它们通过属性接收数据，主要用于渲染UI元素。
函数式组件的示例：
import React from 'react';
const FunctionalComponent = (props) => {
return <div>{props.text}</div>;
};
export default FunctionalComponent;
- 类组件：
类组件是定义React组件的较老方式。它们是扩展React.Component类的JavaScript类。类组件可以有自己的状态和生命周期方法，适用于更复杂的交互和逻辑。
类组件的示例：
import React, { Component } from 'react';
class ClassComponent extends Component {
render() {
return <div>{this.props.text}</div>;
}
}
export default ClassComponent;
- 状态和属性：
属性（props）用于将数据从父组件传递给子组件。属性是只读的，帮助组件相互通信。另一方面，状态用于管理组件的内部数据，并且可以随时间变化，触发重新渲染。
使用属性的示例：
import React from 'react';
const Greeting = (props) => {
return <div>Hello, {props.name}!</div>;
};
使用状态的示例：
import React, { Component } from 'react';
class Counter extends Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Increment
</button>
</div>
);
}
}
- 生命周期方法：
类组件有一个生命周期，包括挂载、更新和卸载等阶段。这些阶段由生命周期方法控制，允许您在组件生命周期的特定时间执行操作。
类组件中生命周期方法（componentDidMount）的示例：
import React, { Component } from 'react';
class MyComponent extends Component {
componentDidMount() {
// 组件挂载（添加到DOM）后，此代码运行。
console.log('Component mounted');
}
render() {
return <div>My Component</div>;
}
}
- 钩子（函数式组件增强）：
钩子是在React 16.8中引入的，用于在函数式组件中使用状态和其他React特性，而不使用类组件。像useState、useEffect和useContext这样的钩子使您能够在函数式组件中直接管理状态和副作用。
使用useState钩子的示例：
import React, { useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
};
这些只是React组件的核心概念和类型的一小部分。React提供了一个丰富的组件和库生态系统，适用于不同的用例和场景。掌握这些概念后，您将能够使用React.js构建复杂且高效的用户界面。