什么是组件?

官方定义:将一些简短、独立的代码片段组合成复杂的 UI 界面,这些代码片段被称作“组件”。

解读:我们可以理解为能够组成一个UI界面的每一个独立的代码片段,例如表单的代码集合,轮播图的代码集合,讲这些能够构成特定功能的代码集合我们称之为组件。

React.component子类

我们以下面这段代码为例,进行详细的分析:

class ShoppingList extends React.Component {render() {return (<div className="shopping-list"><h1>Shopping List for {this.props.name}</h1><ul><li>Instagram</li><li>WhatsApp</li><li>Oculus</li></ul></div>);}
}

官方描述:ShoppingList是React的一个组件类。一个组件接收一些参数,我们把这些参数叫做 props(“props” 是 “properties” 简写),然后通过 render 方法返回需要展示在屏幕上的视图的层次结构。render 方法的返回值描述了你希望在屏幕上看到的内容。React 根据描述,然后把结果展示出来。更具体地来说,render 返回了一个 React 元素,这是一种对渲染内容的轻量级描述。大多数的 React 开发者使用了一种名为 “JSX” 的特殊语法,JSX 可以让你更轻松地书写这些结构。

  1. 组件接收的参数叫做props.
  2. render方法返回的结果就是渲染到屏幕上我们看到的结果。
  3. render函数中包含的是JSX语法,这个和JS语法不同。

react学习(38)----react是什么相关推荐

  1. React学习(六)-React中组件的数据-state

    虽互不曾谋面,但希望能和你成为笔尖下的朋友 以读书,技术,生活为主,偶尔撒点鸡汤 不作,不敷衍,意在真诚吐露,用心分享 点击左上方,可关注本刊 撰文 | 川川 ID:suibichuanji 点击下方 ...

  2. React学习(十)-React中编写样式CSS(styled-components)

    虽互不曾谋面,但希望能和你成为笔尖下的朋友 以读书,技术,生活为主,偶尔撒点鸡汤 不作,不敷衍,意在真诚吐露,用心分享 点击左上方,可关注本刊 撰文 | 川川 VX-ID:suibichuanji 点 ...

  3. React学习(九)-React中发送Ajax请求以及Mock数据

    虽互不曾谋面,但希望能和你成为笔尖下的朋友 以读书,技术,生活为主,偶尔撒点鸡汤 不作,不敷衍,意在真诚吐露,用心分享 点击左上方,可关注本刊 撰文 | 川川 VX-ID:suibichuanji 点 ...

  4. React学习手册 React学习手册中文版 React学习手册pdf React学习手册中文版pdf

    React学习手册,React学习手册PDF React学习手册中文版,React学习手册中文版PDF React学习手册,React学习手册pdf,React学习手册-14393339,React学 ...

  5. 【React学习】React更新渲染原理

    当我们调用 setState 之后发生了什么?react经历了怎样的过程将新的 state 渲染到页面上? 一次react更新,核心就是对虚拟dom进行diff,找出最少的需要变化的dom节点,然后对 ...

  6. React学习笔记---React脚手架

    React脚手架 一.使用create-react-app创建react应用 1.react脚手架 2.创建项目并启动 3.react脚手架项目结构 4.功能界面的组件化编码流程(通用) 5.用脚手架 ...

  7. React学习(6)-React中组件的数据-state

    前言 组件中的state具体是什么?怎么更改state的数据? setState函数分别接收对象以及函数有什么区别? 如何划分组件的状态数据,进行自我的灵魂拷问,以及props与state的灵魂对比 ...

  8. react学习(46)----react渲染组件

    const element = <div />; 不过,React 元素也可以是用户自定义的组件: const element = <Welcome name="Sara& ...

  9. react学习(45)----react组件

    定义组件最简单的方式就是编写 JavaScript 函数: function Welcome(props) {return <h1>Hello, {props.name}</h1&g ...

最新文章

  1. 用OpenCV4实现图像的超分别率
  2. 容器服务kubernetes弹性伸缩高级用法
  3. Struts2的简单介绍
  4. 新电脑怎么分盘_电脑如何分盘及删除与合并04
  5. MATLAB图像处理之图像边缘提取
  6. python单例设计模式(待补充)
  7. 金融文本信息情感分析(负面及主体判定)
  8. PyTorch:卷积/padding/pooling api
  9. 网络 错误_微软承认Windows 10新BUG:错误显示没有网络连接
  10. SpringDataJPA调用存储过程实例
  11. 如何自动生成PDF书签
  12. python 实现粒子滤波
  13. 服务器系统事件6013,来源为EventLog 事件 ID:6013类型为信息的系统启动时间为XXXX秒的事件解析...
  14. java 某字段重复的数据库,excel表格两个字段去重复的数据库【用JAVA程序向SQL数据库导入Excel表,判断出SQL表中已存在的重复数据,并跳过重复的继续导入其他记录.】...
  15. 使用eclipse编写并运行你的第一个Android程序
  16. 20200418京东算法暑期实习笔试 Python3
  17. 抖音C#版,自己抓第三方抖音网站
  18. 中国大学MOOC课程《程序设计入门——C语言》 第8周编程练习
  19. 机器学习十大算法之贝叶斯算法
  20. rails parameter permit

热门文章

  1. 盐噪声和胡椒噪声的区别_为什么加一点盐对您的密码很有用(但不包括胡椒粉!)
  2. form子句语法错误_用示例语法解释SQL的子句
  3. 先知模型 facebook_Facebook先知
  4. 《JAVA程序设计》_第七周学习总结
  5. for 循环 和 Array 数组对象
  6. Redis服务器启动之后3个警告信息的解决方案
  7. 2017.9.15 postgresql批量插入造成冲突后执行更新
  8. 汇编Ring 3下实现 HOOK API
  9. [短彩信]C#短彩信模块开发设计(2)——配置
  10. 教学思路SQL之入门习题《学生成绩》 二、基础单表查询