学习React (2) - React 基础 02 组件

当你开始学习React时，函数组件和类组件、props和state是非常重要的概念。让我逐一为你介绍它们的区别和用法。

函数组件 vs 类组件

函数组件

函数组件是一种定义为JavaScript函数的React组件。它接收props作为参数，并返回一个React元素来描述组件的外观。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

类组件

类组件是使用ES6 class语法定义的React组件。它通过继承React.Component类来实现组件，并且可以拥有自己的内部状态（state）。

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Props的传递和使用

传递Props

无论是函数组件还是类组件，都可以通过props来接收父组件传递的数据。

// 父组件
<Welcome name="John" />

使用Props

在组件内部，可以通过props对象来访问传递进来的数据，然后在UI中使用这些数据。

// 函数组件中使用props
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// 类组件中使用props
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

State的定义和管理

定义State

在类组件中，可以通过定义state属性来管理组件的内部状态。在构造函数中对this.state进行初始化。

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

修改State

通过调用this.setState()方法来更新组件的状态，React会重新渲染组件，并且在UI中反映出最新的状态。

// 在事件处理程序中更新state
handleClick() {
  this.setState({ count: this.state.count + 1 });
}

总结

• 函数组件和类组件分别是以函数和类的形式定义的React组件，用于描述UI的外观和行为。
• Props被用于从父组件向子组件传递数据，组件内部通过props对象来访问这些数据。
• State用于管理组件的内部状态，在类组件中通过this.state进行定义和管理。

希望以上解释能够帮助你更好地理解函数组件、类组件、props和state的基本概念和用法。如有其他问题，欢迎继续提问！