react笔记_08类组件的三大属性+函数组件的props

在React中，类组件有三大特性：状态（state）、属性（props）和生命周期方法（lifecycle methods）。函数组件只有props。

以下是一个简单的类组件示例，展示了这三大特性：

import React, { Component } from 'react';
 
class MyComponent extends Component {
  // 构造函数中可以初始化状态
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
 
  // 生命周期方法：组件挂载后调用
  componentDidMount() {
    console.log('组件已挂载');
  }
 
  // 用于更新状态的方法
  incrementCount = () => {
    this.setState(prevState => ({ count: prevState.count + 1 }));
  };
 
  render() {
    // 使用props和state渲染UI
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.incrementCount}>Increment</button>
      </div>
    );
  }
}
 
export default MyComponent;

函数组件的例子：

import React from 'react';
 
function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}
 
export default Greeting;

在这个函数组件中，Greeting接收一个名为name的prop，并使用它来渲染问候语。注意，函数组件没有状态，所有的数据都通过props传入。