所谓组件,即封装起来的具有独立功能的UI部件。React推荐以组件的方式去重新思考UI构成,将UI上每一个功能相对独立的模块定义成组件,然后将小的组件通过组合或者嵌套的方式构成大的组件,最终完成整体UI的构建。

相当于我们的函数封装,把具有某一特定功能的代码块单独拎出来,封装成独立函数,需要使用时就去调用这个函数。这里的React组件是针对UI界面进行封装。同一个Nav可以在多个界面、多类网站使用,各自UI小分块组成整个UI页面。在团队合作中,代码功能更易解读与维护。

React下的组件特征:

1).可组合,即一个组件可以和其他组件一同使用,可并列、可嵌套;

2).可复用,即同一个组件可以在一个页面多次使用,也可在多个页面同时使用;

3).易维护,由于各个组件只完成自己的功能,不需要涉及其他的逻辑业务,代码更易读懂和维护更简单。

React的组件化的更多相关文章

  1. 移动web端的react.js组件化方案

     背景: 随着互联网世界的兴起,web前端开发的方式越来越多,出现了很多种场景开发的前端架构体系,也对前端的要求日益增高,早已经不是靠一个JQuery.js来做前端页面的时代了,而今移动端变化最大,近 ...

  2. React 面向组件化编程 - 封装了webpack - npm run build 产生的包的 /static 引用路径问题

    React 面向组件化编程 面向对象 ----> 面向模块 ----> 面向组件 套路: 注意: 组件名必须大写开头: 只能有一个根标签: <input />虚拟DOM 元素必 ...

  3. React: 研究React的组件化

    一.简介大概 在以往的Web开发中,会把web页面所有的复杂控件作为一个单一的整体进行开发,由于控件之间需要进行通信,因此不同的组件之间的耦合度会很多,由于开发一个控件的时候要考虑到控件与控件之间的联 ...

  4. react项目组件化思考

    三个原则 single store render from top immutable data single store,便于组件之间通信. render from top,因为store就一个,每 ...

  5. React Native 之 组件化开发

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  6. 组件化和 React

    一,对组件化的理解 1,组件的封装 -视图 -数据 -变化逻辑(数据驱动视图变化) 例: import React, { Component } from 'react'; import List f ...

  7. atitit.React   优缺点 相比angular react是最靠谱的web ui组件化方案了

    atitit.React   优缺点 相比angular react是最靠谱的web ui组件化方案了 1. React的组件化才是web ui部件的正确方向1 1.1. 组件化集成html ,css ...

  8. 【前端知识体系-JS相关】组件化和React

    1. 说一下使用jQuery和使用框架的区别? 数据和视图的分离,(jQuery数据和视图混在一起,代码耦合)-------开放封闭原则 以数据驱动视图(只关注数据变化,DOM操作被封装) 2.说一下 ...

  9. React的组件

    React的组件化思想尤为明显,一切皆组件,觉着比Vue的组件化思想更加凸显. const PacketBG = (props) =>( <div className="pack ...

随机推荐

  1. Spring中@Value用法

    Spring中可以通过@Value注解,将properties配置文件中的属性值注入到java成员变量,配置和使用方法如下(大部分转自csdn,也有自己实验部分): 一.配置 首先,@value需要参 ...

  2. Spring中 @Autowired注解与J2EE@Resource注解的区别

    在开发中经常使用到@Autowired和@Resource进行装配. 不禁好奇这两个注解的差异在何处??? 相同点: @Resource的作用相当于@Autowired,均可标注在字段或属性的sett ...

  3. PHP版常用算法

    PHP版常用算法最近准备面试的资料,顺便整理一下以前的基本算法,写个DEMO记录一下 //冒泡//逐行对比,满足条件则交换function bubbleSort($arrData,$sort = 'd ...

  4. Windows下Anaconda安装、换源与更新

    Anaconda指的是一个开源的Python发行版本,其包含了conda.Python等180多个科学包及其依赖项.当你尝试pip install xxx时出现各种意外和依赖问题,那么conda就是一 ...

  5. Android日期时间控件DatePickerDialog和TimePickerDialog

    1.DatePickerDialog 在一些万年历.日程表等APP上我们经常可以看到日期选择控件,由于很少有用户会老老实实的手工输入日期,所以该控件的作用就是为了控制用户的输入格式,在Android中 ...

  6. P1462 通往奥格瑞玛的道路【二分+Dij】

    P1462 通往奥格瑞玛的道路 提交 29.89k 通过 6.88k 时间限制 1.00s 内存限制 125.00MB 题目提供者gconeice 难度提高+/省选- 历史分数100 提交记录 查看题 ...

  7. 题解【洛谷P3456】[POI2007]GRZ-Ridges and Valleys

    题面 考虑 \(\text{Flood Fill}\). 每次在 \(\text{BFS}\) 扩展的过程中增加几个判断条件,记录山峰和山谷的个数即可. #include <bits/stdc+ ...

  8. Wannafly Camp 2020 Day 2D 卡拉巴什的字符串 - 后缀自动机

    动态维护任意两个后缀的lcp集合的mex,支持在串末尾追加字符. Solution 考虑在 SAM 上求两个后缀的 LCP 的过程,无非就是找它们在 fail 树上的 LCA,那么 LCP 长度就是这 ...

  9. [POI2010] GIL-Guilds - 二分图染色,DFS

    给一张无向图,要求你用黑白灰给点染色,且满足对于任意一个黑点,至少有一个白点和他相邻:对于任意一个白点,至少有一个黑点与他相邻,对于任意一个灰点,至少同时有一个黑点和白点和灰点与他相邻,问能否成功 S ...

  10. PAT - A1073

    1073 Scientific Notation (20point(s)) 小数点移动的边界条件 小数点左移 超过数据左边界 小数点右移 未超过数据右边界 超过数据右边界 +0.1E+2 --> ...