05 组件从设计者的角度理解 React 组件慕课专栏1
需积分: 0 123 浏览量
2022-08-03
11:25:02
上传
评论
收藏 150KB PDF 举报
更新时间：2020-08-20 09:52:43
05 组件：从设计者的角度理解 React 组件
什么是组件？什么是组件？
React 官方文档 - 组件 & Props 给出了组件的描述：组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片
段进行独立构思。组件，从概念上类似于 JavaScript 函数，它接受任意的入参（即 props ），并返回用于描述页
面展示内容的 React 元素。那么，一个 React 组件的构成可以简单描述成下面的形式。
使用函数定义组件使用函数定义组件
对于开发者来说，定义组件最简单的方式就是编写 JavaScript 函数，如代码示例 2.2.1。
代码示例 2.2.1 函数组件的定义方式
该函数是一个有效的 React 组件，它接收唯一带有数据的 props 对象与并返回 React 元素元素。这类组件被称为 函数函数
组件组件，因为它本质上就是 JavaScript 函数。
使用使用 class 定义组件定义组件
也可以使用 ES6 的 class 来定义组件，如代码示例 2.2.2。
世上无难事,只要肯登攀。——毛泽东
React组件 = UI + 逻辑（处理 props，state以及事件等）
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
评论0