react学习笔记02-面向组件编程

　　面向组件编程，直白来说，就是定义组件，使用组件。

以下内容则简单介绍下组建的声明与使用，直接复制demo观测结果即可。

步骤：

1、定义组件

　　　　  a、轻量组件-函数组件（局限性：只能用在没有state、prop属性的场景，后面会解释）

// 方式一：（轻量组件）函数组件

function ComponentA(){

    return <div>轻量组件A</div>

}

　　　　　b、复杂组件-类组件（ES6）

// 方式二：（复杂组件）类组件【ES6】

class ComponentB extends React.Component{

    render(){

        return    <div>类组件B</div>;

    }

}

      2、使用组件

<!DOCTYPE html><html>

<head>

    <meta charset="utf-8" />

    <title>React Tutorial</title>

</head>

<body>

    <!--react基础库-->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script>

    <!--bable转换库，ES语法以及Jax语法的转换-->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

    <div id="content"></div>

    <div id="app1"></div>

    <div id="app2"></div>

    <div id="app3"></div>

    <script type="text/babel">

        //定义组件

        // 方式一：（轻量组件）函数组件

        function ComponentA(){

            return <div>轻量组件A</div>

        }

        //渲染组件标签

        ReactDOM.render(<ComponentA />,document.getElementById("app1"))

        // 方式二：（复杂组件）类组件【ES6】

        class ComponentB extends React.Component{

              render(){

                  return    <div>类组件B</div>;

              }

        }

        ReactDOM.render(<ComponentB />,document.getElementById("app2"))

    </script>

</body>

</html>　

　

页面显示结果：

【React】react学习笔记02-面向组件编程的更多相关文章

  1. Spring学习笔记：面向切面编程AOP（Aspect Oriented Programming）

    一.面向切面编程AOP 目标:让我们可以“专心做事”,避免繁杂重复的功能编码 原理:将复杂的需求分解出不同方面,将公共功能集中解决 *****所谓面向切面编程,是一种通过预编译方式和运行期动态代理实现 ...

  2. 学习笔记: AOP面向切面编程和C#多种实现

    AOP:面向切面编程   编程思想 OOP:一切皆对象,对象交互组成功能,功能叠加组成模块,模块叠加组成系统      类--砖头     系统--房子      类--细胞     系统--人    ...

  3. AMQ学习笔记 - 02. JMS客户端编程模型

    概述 客户端编程模型,是讲如何使用JMS API实现Java应用程序和JMS Provider的通信. 消息传送模式 消息传送模式又称为消息传送域,JMS API定义了两种模式:PTP和Pub/Sub ...

  4. ASP.NET MVC 学习笔记之面向切面编程与过滤器

    AOP(面向切面)是一种架构思想,用于把公共的逻辑放到一个单独的地方,这样就不用每个地方都写重复的代码了.比如程序中发生异常,不用每个地方都try…catch 只要在Golbal的Applicatio ...

  5. The Road to learn React书籍学习笔记(第二章)

    The Road to learn React书籍学习笔记(第二章) 组件的内部状态 组件的内部状态也称为局部状态,允许保存.修改和删除在组件内部的属性,使用ES6类组件可以在构造函数中初始化组件的状 ...

  6. 【React】学习笔记（一）——React入门、面向组件编程、函数柯里化

    课程原视频:https://www.bilibili.com/video/BV1wy4y1D7JT?p=2&spm_id_from=pageDriver 目录 一.React 概述 1.1.R ...

  7. React 入门学习笔记整理目录

    React 入门学习笔记整理(一)--搭建环境 React 入门学习笔记整理(二)-- JSX简介与语法 React 入门学习笔记整理(三)-- 组件 React 入门学习笔记整理(四)-- 事件 R ...

  8. The Road to learn React书籍学习笔记(第三章)

    The Road to learn React书籍学习笔记(第三章) 代码详情 声明周期方法 通过之前的学习,可以了解到ES6 类组件中的生命周期方法 constructor() 和 render() ...

  9. React Native 学习笔记--进阶（二）--动画

    React Native 进阶(二)–动画 动画 流畅.有意义的动画对于移动应用用户体验来说是非常必要的.我们可以联合使用两个互补的系统:用于全局的布局动画LayoutAnimation,和用于创建更 ...

随机推荐

  1. 使用带ParserContext参数的Xaml.Load方法

    原文:使用带ParserContext参数的Xaml.Load方法 如果一段XAML中存在一个标记需要从外部命名空间中解析, 就需要用到ParserContext类,  具体用法如下: Normal ...

  2. wpf无边框窗体移动和大小调整

    原文:wpf无边框窗体移动和大小调整   using System; using System.Windows; using System.Windows.Interop; namespace Wpf ...

  3. ImageNet 数据集

    1. top-5 error rate ImageNet 图像通常有 1000 个可能的类别,对每幅图像你可以猜 5 次结果(即同时预测5个类别标签),当其中有任何一次预测对了,结果都算对(事实上一个 ...

  4. SAAS是否能实现人在家工作的梦想？

    在过去的十年,在人们的工作环境的巨大变化已经发生,越来越多的人选择在家工作. 高租金的办公室,络,快速宽带的广泛应用.这些因素都使得远程办公成为了人们工作中密不可分的一种方式.使用普通手机和办公操作系 ...

  5. Nginx http filter异常排查

    问题: 访问异常 root@cloud:/usr/local/nginx# curl -i http://localhost/test.html curl: (52) Empty reply from ...

  6. EF ModelFirst 步骤

    1 新建实体数据模型 ,选择空模型 2 建各个实体,并指定各字段属性,字符串需要指定长度 3 添加关系,选择关系类型,勾选添加外键 4 新建空的数据库,然后在edmx文件的空白处点右键,选择从模型生成 ...

  7. UNITY VR 视频/图片 开发心得（二）

    上回说到了普通的全景图片,这回讲真正的VR. 由于这种图片分为两部分,所以我们需要两个Camera对象以及两个球体.首先新建一个Camera对象,并将其命名为RightEye(其它名字也无妨,只要你自 ...

  8. win10 uwp 如何判断一个对象被移除

    原文:win10 uwp 如何判断一个对象被移除 有时候需要知道某个元素是否已经被移除,在优化内存的时候,有时候无法判断一个元素是否在某个地方被引用,就需要判断对象设置空时是否被回收. 本文告诉大家一 ...

  9. android中优雅实现recyclerview

    在慕课网上看了Abner_泥阿布老师不一样的RecyclerView优雅实现复杂列表布局这个视频课程,本人在Ubuntu16.04LTS下使用android studio2.2.3按照老师讲解写的代码 ...

  10. 让bootstrap表格自动出现水平滚动条

    <div class="table-responsive"><!--表格自动出现水平滚动条-> <table id="tb_departme ...