【React】react学习笔记02-面向组件编程
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-面向组件编程的更多相关文章
- Spring学习笔记：面向切面编程AOP（Aspect Oriented Programming）
一.面向切面编程AOP 目标:让我们可以“专心做事”,避免繁杂重复的功能编码 原理:将复杂的需求分解出不同方面,将公共功能集中解决 *****所谓面向切面编程,是一种通过预编译方式和运行期动态代理实现 ...
- 学习笔记: AOP面向切面编程和C#多种实现
AOP:面向切面编程 编程思想 OOP:一切皆对象,对象交互组成功能,功能叠加组成模块,模块叠加组成系统 类--砖头 系统--房子 类--细胞 系统--人 ...
- AMQ学习笔记 - 02. JMS客户端编程模型
概述 客户端编程模型,是讲如何使用JMS API实现Java应用程序和JMS Provider的通信. 消息传送模式 消息传送模式又称为消息传送域,JMS API定义了两种模式:PTP和Pub/Sub ...
- ASP.NET MVC 学习笔记之面向切面编程与过滤器
AOP(面向切面)是一种架构思想,用于把公共的逻辑放到一个单独的地方,这样就不用每个地方都写重复的代码了.比如程序中发生异常,不用每个地方都try…catch 只要在Golbal的Applicatio ...
- The Road to learn React书籍学习笔记(第二章)
The Road to learn React书籍学习笔记(第二章) 组件的内部状态 组件的内部状态也称为局部状态,允许保存.修改和删除在组件内部的属性,使用ES6类组件可以在构造函数中初始化组件的状 ...
- 【React】学习笔记（一）——React入门、面向组件编程、函数柯里化
课程原视频:https://www.bilibili.com/video/BV1wy4y1D7JT?p=2&spm_id_from=pageDriver 目录 一.React 概述 1.1.R ...
- React 入门学习笔记整理目录
React 入门学习笔记整理(一)--搭建环境 React 入门学习笔记整理(二)-- JSX简介与语法 React 入门学习笔记整理(三)-- 组件 React 入门学习笔记整理(四)-- 事件 R ...
- The Road to learn React书籍学习笔记(第三章)
The Road to learn React书籍学习笔记(第三章) 代码详情 声明周期方法 通过之前的学习,可以了解到ES6 类组件中的生命周期方法 constructor() 和 render() ...
- React Native 学习笔记--进阶（二）--动画
React Native 进阶(二)–动画 动画 流畅.有意义的动画对于移动应用用户体验来说是非常必要的.我们可以联合使用两个互补的系统:用于全局的布局动画LayoutAnimation,和用于创建更 ...
随机推荐
- Method of Seamless Integration and Independent Evolution of Information-Centric Networking via Software Defined Networking
A method of transferring data between a software defined network (SDN) and an information-centric ne ...
- 逻辑回归原理介绍及Matlab实现
原文:逻辑回归原理介绍及Matlab实现 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/laobai1015/article/details/781 ...
- Fedora15下搭建QT开发环境及编译QT（提前一键安装完，qt编译所有必需库 yum install gcc-c++ libXtst-devel freetype freetype-devel fontconfig-devel libXrender-devel ）
看了不少linux上编译qt的文章,实际上直接通过yum 安装qt是最方便的,请参考<yum安装qt> 不过初步接触fedora,为了了解一下如何在linux上编译.安装开源代码,所以必须 ...
- jquery layer插件弹出弹层 结构紧凑，功能强大
/* 去官方网站下载最新的js http://sentsin.com/jquery/layer/ ①引用jquery ②引用layer.min.js */ 事件触发炸弹层可以自由绑定,例如: $('# ...
- .NET Core 3.0 Preview 5 亮点之一：发布单文件可执行程序
在阅读 Announcing .NET Core 3.0 Preview 5 时发现了 .NET Core 3.0 Preview 5 的一个新特性 —— Publishing Single EXEs ...
- WPF编游戏系列 之一 布局设计
原文:WPF编游戏系列 之一 布局设计 本系列主要使用WPF和C#编写一个简单的小游戏(暂命名XMarket),意在通过该实例进一步学习和体验WPF,也欢迎广大同仁拍砖交流.言归正传,在 ...
- StaticResource和DynamicResource
Resource 资源(Resource)是保存在可执行文件中的一种不可执行数据,用来保存一些可以被重复利用的样式,对象定义以及一些传统的资源如二进制数据,图片等等我们可以在任何元素上定义资源 Sta ...
- qt5.9模块
QAxContainer Module is a Windows-only extension for accessing ActiveX controls and COM objects 模块仅适用 ...
- [原译]WPF绘制圆角多边形
原文:[原译]WPF绘制圆角多边形 介绍 最近,我发现我需要个圆角多边形.而且是需要在运行时从用户界面来绘制.WPF有多边形.但是不支持圆角.我搜索了一下.也没找到可行的现成例子.于是就自己做吧.本文 ...
- wcf中的消息模式
1请求响应模式 a.wcf中的消息模式默认是请求响应模式 b.返回值是void默认也是请求响应模式,可返回服务端的错误信息 c.客户端在请求后,当前线程停止真到接受收服务器的响应 [Opereatio ...