本篇文章我们来讲一下 React 中的组件. 组件就是页面上的一部分, 大大小小的各种组件拼在一起就变成了一个完整的页面, 就像我们玩的拼图, 需要一块一块的拼接在一起才能变成一副完整的拼图.
什么是组件?
组件就是页面上的一部分. 如下图, 左边是一个网页. 右边是对应的一个组件图.
我们可以把一个大的网页拆分成很多小的部分. 比如标题部分, 对应一个组件, 就是标题组件. 搜索部分, 对应的组件就是搜索组件.
而这个搜索组件我们可以进一步的拆分, 是由 input 框和 button 组成的. 所以还可以继续把搜索组件拆分成小的组件. 一个是 input 组件, 一个是 button 组件.
页面上很多区域也可以拆分成组件, 所以页面就被拆分成了很多个组件. 一个页面很复杂, 有时候很难编写, 但当我们把他拆分成组件的时候, 再来维护这些小组件的时候就比较简单了. 这就是我们前端组件化的概念.
React 组件
组件指的就是同时包含了 html,CSS,JS,image 元素的聚合体.
使用 react 开发的核心就是将页面拆分成若干个组件, 并且 react 一个组件中同时耦合了 CSS,JS,image, 这种模式整个颠覆了过去的传统的方式.
React 组件基本上由组件的构建方式, 组件内的属性状态与生命周期方法组成.
组件的演变过程
a. 传统的组件都要几个明显的特点: 1, 简单封装;2, 简单的生命周期呈现;3, 明显的数据流动. 但是当一个项目的逻辑交互较为复杂时, 传统的组件化根本不能很好的将结构样式和行为结合, 让项目难以维护.
b. React 组件基本分为 3 部分: 属性 (props), 状态 (state), 生命周期.
Ract 组件可以传入 props, 也有自己的 state, 当传入的属性或自身状态发生改变时, 就会执行相应的生命周期方法重新渲染页面.
React 组件即遵循了传统的组件的职责, 又做出来新的改变和优化 -- 将 HTML 完全引入 JS 中.
组件的构建方式
组件的构建方式有三种:
a,React.createClass
b,ES6 classes 创建类
c, 无状态函数 (只传入 props 和 context)
更多前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/react/14201.html