组件和传参

组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。

定义组件

函数组件

定义组件最简单的方式就是编写 JavaScript 函数：

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

类组件

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

渲染组件

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

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

让我们来回顾一下这个例子中发生了什么：

• 我们调用 root.render() 函数，并传入 <Welcome name="Sara" /> 作为参数。
• React 调用 Welcome 组件，并将 {name: 'Sara'} 作为 props 传入。
• Welcome 组件将 <h1>Hello, Sara</h1> 元素作为返回值。
• React DOM 将 DOM 高效地更新为 <h1>Hello, Sara</h1>。

WARNING

注意： 组件名称必须以大写字母开头。

React 会将以小写字母开头的组件视为原生 DOM 标签。

例如，<div /> 代表 HTML 的 div 标签，而 <Welcome /> 则代表一个组件，并且需在作用域内使用 Welcome。

组件嵌套

组件可以在其输出中引用其他组件。这就可以让我们用同一组件来抽象出任意层次的细节。

import Welcome from "./components/Welcom";
const root = ReactDOM.createRoot(document.getElementById('root'));

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}
root.render(App());

Props 的只读性

组件无论是使用函数声明还是通过 class 声明，都绝不能修改自身的 props。来看下这个 sum 函数：

function sum(a, b) {
  return a + b;
}

这样的函数被称为“纯函数”，因为该函数不会尝试更改入参，且多次调用下相同的入参始终返回相同的结果。

相反，下面这个函数则不是纯函数，因为它更改了自己的入参：

function withdraw(account, amount) {
  account.total -= amount;
}