【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,和用于创建更 ...
随机推荐
- WPF 同一窗口内的多线程/多进程 UI（使用 SetParent 嵌入另一个窗口）
原文 WPF 同一窗口内的多线程/多进程 UI(使用 SetParent 嵌入另一个窗口) WPF 的 UI 逻辑只在同一个线程中,这是学习 WPF 开发中大家几乎都会学习到的经验.如果希望做不同线程 ...
- Silverlight自定义数据绑定控件应该如何处理IEditableObject和IEditableCollectionView对象
原文:Silverlight自定义数据绑定控件应该如何处理IEditableObject和IEditableCollectionView对象 原创文章,如需转载,请注明出处. 最近在一直研究Silve ...
- 初次使用glog
一.安装配置 1.简单介绍 google 出的一个C++轻量级日志库,支持下面功能: ◆ 參数设置,以命令行參数的方式设置标志參数来控制日志记录行为: ◆ 严重性分级,依据日志严重性分级记录日志: ◆ ...
- [Gevent]gevent 网络抓取问答
我听说过gevent基于事件的异步处理功能 如何高效率,该项目已很少使用,今天是没什么学习一些简单的使用. 有正式书面一个非常好的教程 中国版的地址:http://xlambda.com/gevent ...
- Entity framework 更改模型，新增表
在Package Manager Console 中运行命令Enable-Migrations 再次运行可以更新 抄袭 在实体类中增加一个属性以后,执行 Update-Database 命令 ,可以更 ...
- jquery开关灯
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
- 【C#】wpf自定义calendar日期选择控件的样式
原文:[C#]wpf自定义calendar日期选择控件的样式 首先上图看下样式 原理 总览 ItemsControl内容的生成 实现 界面的实现 后台ViewModel的实现 首先上图,看下样式 原理 ...
- 备份一个支持虚拟化的wrappanel
public class VirtualizingWrapPanel : VirtualizingPanel, IScrollInfo { #region Fields UIElementCollec ...
- ELINK编程器典型场景之远程镜像
当不想直接提供Hex/Bin等二进制程序文件给用户时,通过生成远程镜像功能将程序文件加密后,再提供给用户自行脱机下载来达到远程更新的目的. 远程镜像生成的一般步骤为由客户端提供SN码,本地依据SN码加 ...
- 蓝牙模块在HHARM2410上的移植
最近两天在HHARM2410-R3上移植了USB蓝牙设备和 BlueZ 蓝牙协议栈,呵呵,蓝牙果然是个很好的东西,协议栈内容很丰富,挂上去以后可以使用很多功能.我现在就可以用它来接收 GPS 数据以及 ...