React 模块与组件

几个重要概念理解
1). 模块与组件
　　1. 模块:
　　　　理解: 向外提供特定功能的js程序, 一般就是一个js文件
　　　　为什么: js代码更多更复杂
　　　　作用: 复用js, 简化js的编写, 提高js运行效率
　　2. 组件:
　　　　理解: 用来实现特定功能效果的代码集合(html/css/js)
　　　　为什么: 一个界面的功能太复杂了
　　　　作用: 复用编码, 简化项目界面编码, 提高运行效率
2). 模块化与组件化
　　1. 模块化:
　　　　当应用的js都以模块来编写的, 这个应用就是一个模块化的应用
　　2. 组件化:
　　　　当应用是以多组件的方式实现功能, 这上应用就是一个组件化的应用

react组件化开发

基本理解和使用

　　1). 自定义的标签: 组件类(函数)/标签

　　2). 创建组件类

   //方式1: 无状态函数(简单组件, 推荐使用)

　　function MyComponent1(props) {

　　return <h1>自定义组件标题11111</h1>

　　}

　　//方式2: ES6类语法(复杂组件, 推荐使用)

　　class MyComponent3 extends React.Component {

　　　　render () {

　　　　　　return <h1>自定义组件标题33333</h1>

　　　　　　}

　　}

　　3). 渲染组件标签

ReactDOM.render(<MyComp />, cotainerEle)

　　4). ReactDOM.render()渲染组件标签的基本流程
　　React内部会创建组件实例对象/调用组件函数, 得到虚拟DOM对象将虚拟DOM并解析为真实DOM插入到指定的页面元素内部

例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="../js/react.development.js"></script>

    <script src="../js/react-dom.development.js"></script>

    <script src="../js/babel.min.js"></script>

</head>

<body>

<div id="test1"></div>

<div id="test2"></div>

<script type="text/babel">

    //1、定义组件

    /*方式1: 工厂函数组件(简单组件)*/

    function MyComponent(){

        return <h2>工厂函数组件(简单组件)</h2>

    }

    /*方式2:  ES6类组件(复杂组件)*/

    class MyComponent2 extends React.Component {

        render() {

            console.log(this) // MyComponent2的实例对象

            return <h2>ES6类组件(复杂组件)</h2>

        }

    }

    //2、渲染组件标签

    ReactDOM.render(<MyComponent/>,document.getElementById('test1'))

    ReactDOM.render(<MyComponent2/>,document.getElementById('test2'))

</script>

</body>

</html>

React 模块与组件的更多相关文章

  1. React Native 之 组件化开发

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

  2. React jQuery公用组件开发模式及实现

    目前较为流行的react确实有很多优点,例如虚拟dom,单向数据流状态机的思想.还有可复用组件化的思想等等.加上搭配jsx语法和es6,适应之后开发确实快捷很多,值得大家去一试.其实组件化的思想一直在 ...

  3. React笔记：组件（3）

    1. 组件定义 组件是React的核心概念,组件将应用的UI拆分成独立的.可复用的模块. 定义组件的两种方式: (1)类组件:使用ES6 class (2)函数组件:使用函数 使用class定义组件的 ...

  4. React入门实例:组件化+react-redux实现网上商城(1)

    项目运行 1.git clone https://github.com/soybeanxiaobi/React_demo_onlineShop 2.cd React_demo_onlineShop(文 ...

  5. React笔记02——React中的组件

    一个网页可以被拆分成若干小部分,每个部分都可以称为组件,即组件是网页中的一部分.组件中还可以有多个组件. 上一节中的App.js就是一个组件(继承了React.Component类的类). 一个组件的 ...

  6. 如何实现 React 模块动态导入

    如何实现 React 模块动态导入 React 模块动态导入 代码分割 webpack & code splitting https://reactjs.org/docs/code-split ...

  7. React Native的组件ListView

    React Native的组件ListView类似于iOS中的UITableView和UICollectionView,也就是说React Native的组件ListView既可以实现UITableV ...

  8. React Native交互组件之Touchable

    React Native交互组件之Touchable:只要在组件外面包一个Touchable组件就可以实现点击交互. TouchableHighlight:高亮触摸 当点击时,组件的透明度会改变,可以 ...

  9. React中父组件与子组件之间的数据传递和标准化的思考

    React中父组件与子组件之间的数据传递的的实现大家都可以轻易做到,但对比很多人的实现方法,总是会有或多或少的差异.在一个团队中,这种实现的差异体现了每个人各自的理解的不同,但是反过来思考,一个团队用 ...

随机推荐

  1. Ryzen 4000'Vermeer' CPU和Radeon RX'Big Navi'图形卡

    Ryzen 4000'Vermeer' CPU和Radeon RX'Big Navi'图形卡 来自中国媒体的多篇报道表明,AMD都准备在2020年第四季度初推出其下一代Ryzen 4000'Zen 3 ...

  2. python应用_读取Excel数据列表输出【一】

    python能使用xlrd模块实现对Excel数据的读取,且按照想要的输出形式. 1.准备Excel数据如下: 2.下面主要是对Excel数据读取后以双列表(每一行是一个用例为一个列表,再一个个案例组 ...

  3. 保姆级尚硅谷SpringCloud学习笔记（更新中）

    目录 前言 正文内容 001_课程说明 002_零基础微服务架构理论入门 微服务优缺点[^1] SpringCloud与微服务的关系 SpringCloud技术栈 003_第二季Boot和Cloud版 ...

  4. SpringCloud01：微服务概述

    一.什么是微服务 微服务是一种架构风格,是一种架构设计方式,一个大型复杂软件应用由一个或多个微服务组成.系统中的各个微服务可被独立部署,各个微服务之间是松耦合的.每个微服务仅关注于完成一件任务并很好地 ...

  5. 「题解」HDU-4015 Mario and Mushrooms

    本文将同步发布于: 洛谷博客: csdn: 博客园: 简书: 题目 题目链接:HDU-4015 Mario and Mushrooms.Vjudge HDU-4015. 题意简述 马里奥初始只有 \( ...

  6. Django基础之模型层（01）

    内容概要 查询关键字 MySQL select    from    where    group by    having    order by    distinct    limit    r ...

  7. 09：jQuery（02）

    内容概要 jQuery操作标签 jQuery绑定事件 jQuery补充知识点 jQuery动画效果(了解) 零散补充 内容详细 jQuery练习题 $('#i1') r.fn.init [div#i1 ...

  8. 合宙Luat | Cat.1 Socket数据收不到？学会两招不掉线

    1 服务器收不到Socket数据的原因 Socket是大家使用Cat.1模块常用的功能之一,但Cat.1模块不是直接跟服务器连接,而是通过NAT(即网络地址转换)与服务器连接. 一个会话建立后会在NA ...

  9. 一次性讲清楚spring中bean的生命周期之一：getSingleton方法

    要想讲清楚spring中bean的生命周期,真的是不容易,以AnnotationConfigApplicationContext上下文为基础来讲解bean的生命周期,AnnotationConfigA ...

  10. Pun(PhotonUnityNetwork)

    介绍 Photon Unity Networking(首字母缩写 PUN)是一个 Unity 多人游戏插件包.它提供了身份验证选项.匹配,以及快速.可靠的通过我们的 Photon 后端实现的游戏内通信 ...