React总结-01

**React 总结 -01**

**前言**

React 是一个用于构建用户界面的 JavaScript 库，它允许你将 UI 组件分解成小的、独立的块，称为组件。这些组件可以被重复使用，从而使得代码更易维护和管理。

在本文中，我们将对 React 的基本概念进行总结，包括组件、状态、生命周期方法、事件处理等方面。

**组件**

React 中的组件是最小的 UI 单元，它们可以被独立地创建、复用和组合起来。组件可以分为两种类型：函数组件和类组件。

### 函数组件函数组件是最简单的组件类型，它是一个纯函数，接收 props 作为参数，并返回 JSX 元素。

jsxfunction Hello(props) {
 return <div>Hello, {props.name}!</div>;
}

jsxclass Counter extends React.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 })}>
 +
 </button>
 </div>
 );
 }
}

jsxclass Counter extends React.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 })}>
 +
 </button>
 </div>
 );
 }
}

jsxclass Counter extends React.Component {
 constructor(props) {
 super(props);
 this.state = { count:0 };
 }

 componentDidMount() {
 console.log('Component mounted');
 }

 componentDidUpdate(prevProps, prevState) {
 console.log('Component updated');
 }

 componentWillUnmount() {
 console.log('Component unmounted');
 }
}

jsxfunction Hello(props) {
 return (
 <div>
 <button onClick={() => alert('Hello!')}>Click me!</button>
 </div>
 );
}