为什么要使用组件

将页面组件化页面结构更清晰，增加复用也更便于管理。

编写组件

• 组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。
• 组件有两种书写方式，函数组件和class组件。

注意： 组件名称必须以大写字母开头。
React 会将以小写字母开头的组件视为原生 DOM 标签。例如，<div /> 代表 HTML 的 div 标签，而 <Welcome /> 则代表一个组件，并且需在作用域内使用 Welcome。

#函数组件
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
#类组件
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

渲染组件

React元素可以是dom标签，也可以是React组件。

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

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

组合组件

将多个组件组合成一个组件，即把组件的不同功能点进行分离。按钮，表单，对话框，甚至整个屏幕的内容：在 React 应用程序中，这些通常都会以组件的形式表示。

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

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

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Props 的只读性

组件无论是使用函数声明还是class 声明都绝对不能修改自身的 props。
所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。

纯函数：同样的输入，都返回同样的结果。