React 框架中组件 和 Props 介绍
组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。本指南旨在介绍组件的相关理念。
组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。
一、函数组件与 class 组件
1.1、函数组件
定义组件最简单的方式就是编写 JavaScript 函数：
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}该函数是一个有效的 React 组件，因为它接收唯一带有数据的 “props”（代表属性）对象与并返回一个 React 元素。这类组件被称为“函数组件”，因为它本质上就是 JavaScript 函数。
- 如果你想写的组件只包含一个 render 方法，并且不包含 state，那么使用函数组件就会更简单。
- 我们不需要定义一个继承于 React.Component 的类，我们可以定义一个函数，这个函数接收 props 作为参数，然后返回需要渲染的元素。
- 函数组件写起来并不像 class 组件那么繁琐，很多组件都可以使用函数组件来写。
1.2、Class 类组件
你同时还可以使用 ES6 的 class 来定义组件：
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}上述两个组件在 React 里是等效的。
二、渲染组件
之前，我们遇到的 React 元素都只是 DOM 标签：
const element = <div />;不过，React 元素也可以是用户自定义的组件：
const element = <Welcome name="Sara" />;当 React 元素为用户自定义组件时，它会将 JSX 所接收的属性（attributes）以及子组件（children）转换为单个对象传递给组件，这个对象被称之为 “props”。
例如，这段代码会在页面上渲染 “Hello, Sara”：
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />;
ReactDOM.render(
element,
document.getElementById('root')
);让我们来回顾一下这个例子中发生了什么：
- 我们调用 ReactDOM.render() 函数，并传入 <Welcome name=”Sara” /> 作为参数。
- React 调用 Welcome 组件，并将 {name: ‘Sara’} 作为 props 传入。
- Welcome 组件将 <h1>Hello, Sara</h1> 元素作为返回值。
- React DOM 将 DOM 高效地更新为 <h1>Hello, Sara</h1>。
三、组合组件 & 提取组件
3.1、组件的组合使用
组件可以在其输出中引用其他组件。这就可以让我们用同一组件来抽象出任意层次的细节。按钮，表单，对话框，甚至整个屏幕的内容：在 React 应用程序中，这些通常都会以组件的形式表示。
3.2、提取组件过程指导
我们建议从组件自身的角度命名 props，而不是依赖于调用组件的上下文命名。
四、Props 的只读性
组件无论是使用函数声明（函数组件）还是通过 class 声明，都决不能修改自身的 props。来看下这个 sum 函数：
function sum(a, b) {
return a + b;
}这样的函数被称为“纯函数”，因为该函数不会尝试更改入参，且多次调用下相同的入参始终返回相同的结果。
相反，下面这个函数则不是纯函数，因为它更改了自己的入参：
function withdraw(account, amount) {
account.total -= amount;
}React 非常灵活，但它也有一个严格的规则：所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。
当然，应用程序的 UI 是动态的，并会伴随着时间的推移而变化。在不违反上述规则的情况下，state 允许 React 组件随用户操作、网络响应或者其他变化而动态更改输出内容。