所谓组件,即封装起来的具有独立功能的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. JAVA全套资料含视频源码(持续更新~)

    本文旨在免费分享我所搜集到的Java学习资源,所有资源都是通过正规渠道获取,不存在侵权.现在整理分享给有所需要的人. 希望对你们有所帮助!有新增资源我会更新的~大家有好的资源也希望分享,大家互帮互助共 ...

  2. CF1230E Kamil and Making a Stream

    题目大意是求 \(\sum_{v,fa,lca(v,fa)=fa}gcd(v \to fa)\) 容易发现 \(\gcd\) 只会变小,所以根据这玩意是从上到下的,每次暴力一下就可以了,\(\gcd\ ...

  3. 用sort实现对struct的排序

    用sort 排序 struct +++ //method 1 struct node{ int k,s; }p[5005]; bool cmp1(node x,node y){ return x.s& ...

  4. Lucene使用IKAnalyzer分词

    1.分析器    所有分析器最终继承的类都是Analyzer        1.1 默认标准分析器:StandardAnalyzer            在我们创建索引的时候,我们使用到了Index ...

  5. win下的终端使用指南

    win下的终端使用指南 win 下的命令行工具是真的难用 . 具体的难用就不形容了 . 有了 PowerShell 也没觉得好用 . 还是喜欢Linux的终端,及Bash命令. 替换方案 比较好的替换 ...

  6. P5163 WD与地图 [整体二分,强连通分量,线段树合并]

    首先不用说,倒着操作.整体二分来做强连通分量,然后线段树合并,这题就做完了. // powered by c++11 // by Isaunoya #include <bits/stdc++.h ...

  7. python常见函数积累

    shape() 返回数组或者数据框有多少行或者多少列 import numpy as np x = np.array([[1,2,5],[2,3,5],[3,4,5],[2,3,6]]) #输出数组的 ...

  8. 查看whl包名是否满足系统的条件的命令,以此解决whl包出现“is not a supported wheel on this platform”错误提示的问题

    在Ubuntu系统中,使用pip安装whl包时,常常会报如下错误: tensorflow_gpu-1.11.0-cp35-cp35m-manylinux1_x86_64.whl is not a su ...

  9. 最简单的githut操作命令

    创建SSH Key: 参考:https://blog.csdn.net/weixin_30345055/article/details/95139358 在用户目录下,看看有没有.ssh文件夹,如果有 ...

  10. css使用padding-bottom百分比进行提前占位,防止抖动

    页面加载抖动问题 在web开发中,经常会遇到这样一个问题,比如一个宽度百分百,高度自适应的图片,在网速慢的情况下加载过程中会出现抖动的问题(未加载图片前容器的高度为0,图片加载完成后下面的内容会被挤下 ...