元素与组件

元素

元素是构成 React 应用的最小砖块。元素描述了你在屏幕上想看到的内容。

const element = <h1>Hello, world</h1>;

组件

组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思
组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。

• 函数组件与 class 组件

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

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

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

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