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. springCloud跨域访问

    转自:http://blog.csdn.net/wangkang80/article/details/72829390 什么是跨域? 假设你在http://xxx.com/test/下有一个js文件, ...

  2. JSON格式的服务接口

    电商接口 京东获取单个商品价格接口: http://p.3.cn/prices/mgets?skuIds=J_商品ID&type=1 用例 ps:商品ID这么获取:http://item.jd ...

  3. Android - Earthquake工程(地震监测) 的 对

    Earthquake工程(地震监测) 的 对 本文地址: http://blog.csdn.net/caroline_wendy/article/details/24465487 Earthquake ...

  4. cookie登录功能实现

    站点经常使用的记住我,或是一周内自己主动登录,这些功能一般都是是用cookie进行登录的!以下对此功能进行分析: package cookielogin; import java.io.IOExcep ...

  5. 分享 WebBrowser显示Html内容3点细节技巧,解决刷新后空白

    直接显示Html内容,不像直接导航网址容易处理: 问题:按微软的控件属性提示,可以用WebBrowser.DocumentText 属性赋值 ,但是这种赋值,只是首次有效,后续切换都没啥作用. 下面给 ...

  6. 解析Android的 消息传递机制Handler

    1. 什么是Handler: Handler 网络释义"机械手.经理"意思,在Android它用于管理多个线程UI操作: 2. 为什么会出现Handler: 在Android里面的 ...

  7. ASP.NET Core 基础教程总结 - ASP.NET Core 基础教程 - 简单教程，简单编程

    原文:ASP.NET Core 基础教程总结 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core 基础教程总结 ASP.NET Core 基础教程总算是有了个简单 ...

  8. Spring Boot 专题

    Spring is a very popular Java-based framework for building web and enterprise applications. Unlike m ...

  9. 最简单的IdentityServer实现——IdentityServer

    1.新建项目 新建ASP .Net Core项目IdentityServer.EasyDemo.IdentityServer,选择.net core 2.0   1   2 引用IdentitySer ...

  10. Linux C lock pages

      虚拟内存按页划分,我们可以明确告诉系统:某一个虚拟内存页需要和实际内存帧相关联.这样一来,该内存页就被换进来了,而且不会被系统换出去.这一行为叫做锁页(locking a page). 一般来讲页 ...