React03 组件 & Props

组件 & Props

[React 组件](#React 组件)
- [函数（ Function ）组件](#函数（ Function ）组件)
- [类（ Class ）组件](#类（ Class ）组件)
Props
- [将 props 传递给子组件](#将 props 传递给子组件)
- [在子组件中读取 props](#在子组件中读取 props)
- [给 prop 指定一个默认值](#给 prop 指定一个默认值)
- [使用 JSX 展开语法传递 props](#使用 JSX 展开语法传递 props)

React 组件

组件本质上就是类和函数，但是与常规的类和函数不同的是，组件承载了渲染视图的 UI 和更新视图的 setState 、useState 等方法。React 在底层逻辑上会像正常实例化类和正常执行函数那样处理的组件。

因此，函数与类上的特性在 React 组件上同样具有，比如原型链，继承，静态属性等，所以不要把 React 组件和类与函数独立开来。

函数（ Function ）组件

接收唯一带有数据的 props 对象与并返回一个 React 元素

函数式组件定义时首字母必须大写

render渲染时必须使用标签

js 复制代码

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

const root = ReactDOM.createRoot(document.getElementById('root'));
const element = <Welcome name="Sara" />;
root.render(element);

类（ Class ）组件

类组件必须继承React.Component

必须写render函数

必须有返回值

js 复制代码

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

Props

React 组件使用 props 来互相通信。每个父组件都可以提供 props 给它的子组件，从而将一些信息传递给它。

将 props 传递给子组件

js 复制代码

export default function Profile() {
  return (
    <Avatar
      person={{ name: 'Lin Lanying', imageId: '1bX5QH6' }}
      size={100}
    />
  );
}

在子组件中读取 props

js 复制代码

function Avatar({ person, size }) {
  // 在这里 person 和 size 是可访问的
}

给 prop 指定一个默认值

js 复制代码

function Avatar({ person, size = 100 }) {
  // ...
}

使用 JSX 展开语法传递 props

有时候，传递 props 会变得非常重复：

js 复制代码

function Profile({ person, size, isSepia, thickBorder }) {
  return (
    <div className="card">
      <Avatar
        person={person}
        size={size}
        isSepia={isSepia}
        thickBorder={thickBorder}
      />
    </div>
  );
}

重复代码没有错（它可以更清晰）。但有时你可能会重视简洁。一些组件将它们所有的 props 转发给子组件，正如 Profile 转给 Avatar 那样。因为这些组件不直接使用他们本身的任何 props，所以使用更简洁的"展开"语法是有意义的：

js 复制代码

function Profile(props) {
  return (
    <div className="card">
      <Avatar {...props} />
    </div>
  );
}

这会将 Profile 的所有 props 转发到 Avatar，而不列出每个名字。