元素
元素是构成 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 不被更改。
网友评论