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. [WebGL入门]十一，着色器编译器和连接器

    注意:文章翻译http://wgld.org/,原作者杉本雅広(doxas).文章中假设有我的额外说明.我会加上［lufy:］.另外.鄙人webgl研究还不够深入.一些专业词语,假设翻译有误.欢迎大家 ...

  2. mongodb与SQL对应关系表

    1. select查询 mongodb使用find要么findOne要查询: find批量查询. findOne查询记录. find有两个参数: 查询条件. 第二个查询返回的字段. 以下是mongod ...

  3. SharePoint Iframe 一个错误此内容不能显示在一帧&lt;继续&gt;

    在之前的SharePoint网站iframe引用中,我们遇到过以下的问题,就是其他系统或者不通环境的SharePoint网站,引用SharePoint页面会报错"此内容不能显示在一个框架中& ...

  4. git建tag备忘

    1.git tag -a v1.1.8_20180613 -m '实时上传位置等功能提交测试' 2. git push origin v1.1.8_20180613

  5. [bug系列]Method not found: 'Void Microsoft.EntityFrameworkCore.Storage.Internal.RelationalCommandBuilderFactory

    bug由来 最近开始学习NetCore,想通过实战使用NetCore做一个集成数据库存储Redis缓存的WebApi项目,由于MSSQL的庞大体积,最终决定使用轻量级关系型数据库MySql. 所以最终 ...

  6. style原则问题

    就近原则 1.“行内”覆盖“嵌入”,“嵌入”覆盖“外部”Style.xml <Window.Resources> <Grid.Resources> ….中间层 <Butt ...

  7. MVC EF 导航属性

    @model IQueryable<EFExam.Models.CategoryProductViewModel>@{    Layout = null;}<!DOCTYPE htm ...

  8. 使用ServiceStack.Redis实现Redis数据读写

    原文:使用ServiceStack.Redis实现Redis数据读写 User.cs实体类 public class User { public string Name { get; set; } p ...

  9. Win10《芒果TV》商店版更新v3.2.5：新增会员频道，修复多处细节问题，小年快乐

    听因乐不凡,尽在芒果TV,湖南卫视大型音乐竞技节目<歌手>,每周六晚22:30在芒果TV与湖南卫视同步直播,1月20日周五晚七点半,2016-2017湖南卫视<小年夜春晚>会员 ...

  10. WPF生成二维码

    WPF可以通过ZXing.Net库来实现二维码的功能. 可以通过NuGet安装: Install-Package ZXing.Net 二维码的实现代码: #region 二维码的方法 /// < ...