React 基础篇（四）—— 组件与Props

组件

组件是 React 的核心概念，是 React 应用程序的基石。组件将应用的 UI 拆分为独立的、可复用的模块，React 应用程序正是由一个一个组件搭建而成的。

在 React 中，定义组件的方式有两种，一种是通过函数定义，另一种通过关键字 class 来定义。

• 通过函数定义组件

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

• 通过关键字 class 定义

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

其中，通过 class 关键字定义的组件必须满足两个条件：

1. 这个类必须继承 React.Component
2. 类内部必须定义一个 render 方法，该方法必须返回一个 React 元素

Props

在上面的例子中，无论是函数方式创建的组件还是 class 定义的组件，我们都发现里面有一个 props 这个家伙，这个东西其实就是组件之间通信的桥梁。

当 React 元素为用户自定义组件时，它会将 JSX 所接收的属性转换为单个对象传递给组件，这个对象被称为 props。

所有 React 组件都必须像纯函数一样保护他们的 props 不被改变，我们也不可以在组件中修改 props。

在组件实例中，我们可以通过 this.props 来访问 props 对象。