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. DDD实战4 实现产品仓储

    a.要实现仓储,首先要定义仓储接口.在领域层定义仓储接口,IProductRepository.cs. public interface IProductRepository { void Creat ...

  2. StreamDM：基于Spark Streaming、支持在线学习的流式分析算法引擎

    StreamDM:基于Spark Streaming.支持在线学习的流式分析算法引擎 streamDM:Data Mining for Spark Streaming,华为诺亚方舟实验室开源了业界第一 ...

  3. wpf实现两头渐窄的线条效果

    原文:wpf实现两头渐窄的线条效果 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/huangli321456/article/details/800 ...

  4. “TNS-03505：无法解析名称”问题解决一例

    1.  问题情境 开发人员,在windows新环境ORACLEclient.配置"tnsnames.ora"后,准备连接Linux环境的ORACLE数据库,使用tnsping报TN ...

  5. WPF 4 动态覆盖图标（Dynamic Overlay Icon）

    原文:WPF 4 动态覆盖图标(Dynamic Overlay Icon)      在<WPF 4 开发Windows 7 任务栏>一文中我们学习了任务栏的相关开发内容,同时也对覆盖图标 ...

  6. CheckBox IsHitTestVisible

    <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"></Colu ...

  7. DB First EF中的存储过程、函数、视图

    视图约等于表(属性)存储过程变为方法,方法中调用存储过程 EF可以调用存储过程,DB First的流程是刷新模型,获取存储过程,调用参考:http://blog.csdn.net/sudazf/art ...

  8. Marker

    # 样例 <?xml version="1.0" encoding="UTF-8"?> <Configuration status=" ...

  9. Expression Blend学习二UI布局

    什么是布局? · Panels控件(其实就是容器控件) · 对内部的子控件提供了自动布局功能 · 可以在容器控件内继续添加容器控件(一个复杂的界面往往是多种容器控件嵌套而组成的) · 一些界面器控件也 ...

  10. Redis进阶实践之十八 使用管道模式提高Redis查询的速度

    原文:Redis进阶实践之十八 使用管道模式提高Redis查询的速度 一.引言             学习redis 也有一段时间了,该接触的也差不多了.后来有一天,以为同事问我,如何向redis中 ...