阅读以上文章后，整理了有关组件的内容。

关于React要素，请查看这里。

函数组件和类组件

函数组件

用JavaScript编写一个函数是定义组件的最简单方法。(函数组件)

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

接受以包含数据的props对象作为参数，并返回有效的React元素，这是一个有效的React组件。

类组件

可以使用ES6类。

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

组件的渲染

在React中，要素不仅可以表示DOM的标签，还可以表示用户定义的组件。

const element = <div />

const element = <Welcome name="Sara" />;

道具

当React在找到用户定义的组件时，将JSX中指定的属性和子元素作为一个单独的对象传递给该组件。这个对象被称为props。

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

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

在以上的代码中发生的事情。

1. 以这个参数作为root.render()的参数调用。

1. React会调用Welcome组件，并在此时传递{name: ‘Sara’}作为props。

1. Welcome组件会返回一个输出为

Hello, Sara

的元素。
React DOM会高效地更新DOM，使之与

Hello, Sara匹配。

组合零部件

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

function App() {
    return (
        <div>
            <Welcome name="Sara" />
            <Welcome name="Brown" />
            <Welcome name="Edy" />
        </div>
    )
}

提取组件

提取组件的时机

• UIの一部が複数回使われている場合

UI自体が複雑である場合

组件的提取起初可能会很麻烦，但如果拥有可重复使用的组件作为调色板，随着应用程序的发展，将带来与努力相称的利益。

Props只能进行读取操作。

以下的函数被称为纯粹的（pure），因为它不尝试修改输入，对相同的输入返回相同的结果。

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

与此相反，下面的函数并不是纯函数，因为它会修改输入的内容。

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