【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,和用于创建更 ...
随机推荐
- 新版【CefSharp】 禁用右键菜单 43.00+
原文:新版[CefSharp] 禁用右键菜单 43.00+ 禁用右键菜单其实是很容易的.主就要是实现一个接口 IMenuHandler ,这个接口有一个 OnBeforeContextMenu 的方 ...
- Shell脚本入门学习笔记
1.shell操作系统和用户之间.负责解释命令行 2./etc/shells 记录登录系统有效支持shell 3./etc/passwd 最后,有人谁可以看到用户的默认shell 4.直接输入shel ...
- js动态创建表格
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- C++ Boost 学习资源列表
文档书籍下载 Boost Documentation Boost代码下载 优秀网站导航 Boost官方网站 Boost中文站 Boost Consulting 专题资源报告 Lin ...
- GAC的一种非官方实现方式
1.GAC简介 全局程序集缓存(Global Assembly Cache, GAC)计算机范围内的代码缓存,它存储专门安装的程序集,这些程序集由计算机上的许多应用程序共享.在全局程序集缓存中部署的应 ...
- 【全面解禁!真正的Expression Blend实战开发技巧】第三章 从最常用ButtonStyle开始 - TextButton
原文:[全面解禁!真正的Expression Blend实战开发技巧]第三章 从最常用ButtonStyle开始 - TextButton 在实际项目中,使用blend做的最多的一定是各种自定义But ...
- DLL编写与调用全解
DLL编写与调用全解 DELPHI学习 2008-12-23 22:52 阅读8 评论0 字号: 大 中 小 第一章 为什么要使用动态链接库(DLL) top 提起DLL您一定不会 ...
- Windows软件在Linux上的等价/替代/模仿软件列表 (抄一个)
Last update: 16.07.2003, 31.01.2005, 27.05.2005 您可在以下网站发现本列表最新版:http://www.linuxrsp.ru/win-lin-soft/ ...
- 使用MultiByteToWideChar转换UTF8为GBK（UTF8在Windows的代码页是CP_UTF8）
两个使用的函数: 1,UTF8转化为Unicode,inline为了编译后更快运行,老用到了,返回字符串为了使用链式表达式 inline WCHAR *UTF8ToUnicode(const cha ...
- Asp +Js 无刷新分页
Default.aspx代码 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind=" ...