React入门基础(学习笔记)
这篇博客是我通过阅读React官方文档的教程总结的学习笔记,翻译可能存在误差,如有疑问请参见http://reactjs.cn/react/docs/tutorial.html 。
一.所需文件
在编写react代码前需要在html文件中引入三个文件
我通过bower把react.js和react-dom.js下载在本地,这样在刷新浏览器时,浏览器加载会更快。第三个文件是react解码器,由于react用到的语法是jsx,浏览器是不能直接执行jsx语法的,要想你写的react代码在浏览器中运
行,就必须将jsx转换为js代码,第三个文件可以达到将jsx转换为js的目的,当然这并不是唯一一个将jsx转换为js的方法。你还可以使用创建工具gulp或者grunt来将jsx转化为jsx。
二.开始学习代码
1.编写第一个react程序
html文件的核心代码如下(html文件很简单)
<body>
<div id="contentOther"></div>
<script type="text/babel" src="index.js"></script>
</body>
html文件代码解释:
a:由于react并不是真正的js代码,所有script标签的type属性不能是text/js,而应该是text/babel
index.js的代码如下
index.js文件代码解释:
a:React.createClass()方法用于创建一个自定义组件,它接受一个对象作为参数
b:Content是一个自定义组件,在react中自定义组件必须以大写字母开头,dom自带的元素名以小写字母开头,如div,span等.
c:每个react组件可以拥有多个方法,其中最重要的方法是render方法,这个方法返回一个最终渲染到HTML中的组件树。render只能返回一个单一的组件,如果要返回多个组件,必须将将它们包裹到一个根组件里。
d:在react中有两种组件,分别为自定义组件(如:Content)和自带组件(如:div等),react可以为组件添加类,react为组件添加类使用的属性是className,在上述demo中为div组件添加了一个other的类
e:ReactDOM.render()方法用于实例化根组件,它接受两个参数,第一个参数是一个XML标签形式的组件名,它必须闭合,第二个参数是一个dom节点。意味着将指定的根组件渲染到指定的dom节点中。这个方法
必须放在组件定义之后。
二.using props
html文件的核心代码
<body>
<div id="list"></div>
<script type="text/babel" src="index.js"></script>
</body>
index.js文件的代码如下
index.js文件代码解释
a:jsx语法规定,表达式必须要在花括号中,语句不能放在花括号中,如if语句不能放在花括号中。
b:有两种为组件添加属性的方法:(1)
<Component name="li" age="12"/>
(2)
var props = {
name:"li",
age:"12"
};
<Component {...props}/>
可以将任何合法的数据类型添加到组建的属性,如函数,数组等
c:组件的所有数组都保存在组件的props对象中,通过this.props.propsName可以获得指定的属性值
三. state
html文件的代码如下
<body>
<div id="contentList"></div>
<script src="index.js" type="text/babel"></script>
</body>
index.js文件的代码如下
comments.json文件的内容如下:
[
{
"id": 1388534400000,
"author": "Pete Hunt",
"text": "Hey there!"
},
{
"id": 1420070400000,
"author": "Paul O’Shannessy",
"text": "React is great!"
}
]
index.js文件代码解释
a:在这个demo中用到了ajax请求,请求的操作是通过jQuery的$.getJSON
()方法实现的,所有除了引入之前提到的那三个文件外,还要引入jquery。ajax请求的文件是comments.json,请求成功返回一个Json数据
b:自定义组件都有state,在组件中通过this.state.stateName可以取得指定的state,与props不同的是在一个组件内部可以改变自己的state,但是不能改变props,组件的props只能通过父组件去改变。
c:组件可以通过setState()去改变自己的state,当组件的state发生变化后会再次执行render函数,即重新渲染组件,
d:getInitialState()用来设置组件的初始state,在组件的生命周期只被执行一次,而且它会比render先执行
e:componentDidMount()是一个react组件首次被render后立即自动调用的方法。在这个demo中ContentList
组件的初始state data是一个空数组,在组件ContentList
第一次被render后会立即调用
componentDidMount()方法去修改组件的state,在修改了state后,组件会再次被render,但是组件再次被render之后就不会在调用componentDidMount()方法了。
f:在React中,组件有两种数据模型,分别是props和state,在react这篇官方文档中,详细的说明了props和state的区别,以及它们的应用场景。我看了这篇文章的结论是:在做交互性功能上才使用state,在
下面这三种情况下不要使用state:
(1)数据来自于父组件
(2)数据不会随时间改变
(3)数据可以基于其他state或props计算得到
四.event
html文件代码如下
<body>
<div id="content2"></div>
<script type="text/babel" src="index.js"></script>
</body>
js文件代码如下
index.js文件的解释
a:组件的event是作为props存在,event名采用驼峰命名.
b:在这个demo中实现的效果是:在输入框中输入内容,当点击OK按钮后,将输入的内容插入下方的无序列表。为了实现这个效果我创建了三个组件,分别为:ContentBox,
Form以及List,其中Form和List是ContentBox的子组件。由于父组件ContentBox需要从子组件Form得到输入的值,所以我给Form添加了一个名为onContentSubmit
的props
这个onContentSubmit
是一个回调函数。这个回调函数在From触发submit事件(即ok按钮被点击)后被调用。onContentSubmit
的执行会导致ContentBox的state被改变,
前面已经说过,组件的state改变,会使组件重新render。List的props item等于ContentBox的state data ,所以只要ContentBox重新render也会改变List的
props item改变。所以输入框输入的值可以插到无序列表中
关于event我还写了另位一个demo,在这里供大家参看,这个domo我就不做解释了,
html文件核心代码如下
<body>
<div id="content"></div>
<script type="text/babel" src="index.js"></script>
</body>
index.js文件核心代码如下
React入门基础(学习笔记)的更多相关文章
- es6 Object.assign ECMAScript 6 笔记(六) ECMAScript 6 笔记(一) react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式
es6 Object.assign 目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...
- 尚学堂JAVA基础学习笔记
目录 尚学堂JAVA基础学习笔记 写在前面 第1章 JAVA入门 第2章 数据类型和运算符 第3章 控制语句 第4章 Java面向对象基础 1. 面向对象基础 2. 面向对象的内存分析 3. 构造方法 ...
- 【C#编程基础学习笔记】4---Convert类型转换
2013/7/24 技术qq交流群:JavaDream:251572072 教程下载,在线交流:创梦IT社区:www.credream.com [C#编程基础学习笔记]4---Convert类型转换 ...
- 【C#编程基础学习笔记】6---变量的命名
2013/7/24 技术qq交流群:JavaDream:251572072 教程下载,在线交流:创梦IT社区:www.credream.com [C#编程基础学习笔记]6---变量的命名 ----- ...
- 1.C#基础学习笔记3---C#字符串(转义符和内存存储无关)
技术qq交流群:JavaDream:251572072 教程下载,在线交流:创梦IT社区:www.credream.com ------------------------------------- ...
- Webpack新手入门教程(学习笔记)
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: center; font: 30.0px Helvetica; color: #000000 } ...
- Java基础学习笔记总结
Java基础学习笔记一 Java介绍 Java基础学习笔记二 Java基础语法之变量.数据类型 Java基础学习笔记三 Java基础语法之流程控制语句.循环 Java基础学习笔记四 Java基础语法之 ...
- Mysql数据库基础学习笔记
Mysql数据库基础学习笔记 1.mysql查看当前登录的账户名以及数据库 一.单表查询 1.创建数据库yuzly,创建表fruits 创建表 ) ) ,) NOT NULL,PRIMARY KEY( ...
- 0003.5-20180422-自动化第四章-python基础学习笔记--脚本
0003.5-20180422-自动化第四章-python基础学习笔记--脚本 1-shopping """ v = [ {"name": " ...
- Java基础学习笔记(一)
Java基础学习笔记(一) Hello World 基础代码学习 代码编写基础结构 class :类,一个类即一个java代码,形成一个class文件,写于每个代码的前端(注意无大写字母) XxxYy ...
随机推荐
- MyBatis保存完整日期的解决方法
在用mybatis时,对mysql数据库是datatime字段添加值是,发现添加成功后查看数据库字段值是,只有年月日有值,时分秒则为0来表示的,更改为java.sql.date,time等也不行,如果 ...
- JDK的跳表源码分析
JDK源码中的跳表实现类: ConcurrentSkipListMap和ConcurrentSkipListSet. 其中ConcurrentSkipListSet的实现是基于ConcurrentSk ...
- No MyBatis mapper was found in '[com.wuji.springboot]' package. Please check your configuration
No MyBatis mapper was found in '[com.wuji.springboot]' package. Please check your configuration. 这个原 ...
- BZOJ 1941: [Sdoi2010]Hide and Seek(k-d Tree)
Time Limit: 16 Sec Memory Limit: 162 MBSubmit: 1712 Solved: 932[Submit][Status][Discuss] Descripti ...
- linux 学习第十一天
一.配置服务说明 1.1.linux系统中的一切都是文件 1.2.配置一个服务就是在修改去配置文件 1.3.要想让新的配置文件立即生效,需要重启对应的服务 二.配置网卡 2.1.编辑配置文件 vim ...
- Role Helper
using System; using Microsoft.Xrm.Sdk; using Microsoft.Crm.Sdk.Messages; using System.Collections.Ge ...
- 树莓派3B+学习笔记:9、更改软件源
树莓派系统安装完成后,由于默认软件源服务器访问速度慢,安装软件耗时会很长,可以通过更改软件源来加快软件的安装速度. 系统安装完成后默认软件源如下: 更改镜像源前需要自行查找镜像源,并记下网址: 1.阿 ...
- FreeRTOS内存管理
简介 Freertos的内存管理分别在heap_1.c,heap_2.c,heap_3.c,heap_4.c,heap_5.c个文件中,选择合适的一种应用于嵌入式项目中即可. 本文的图片中 红色部分B ...
- LSTM网络应用于DGA域名识别--文献翻译--更新中
原文献名称 Predicting Domain Generation Algorithms with Long Short-Term Memory Networks原文作者 Jonathan Wood ...
- 05ICMP协议与ARP协议(IP协议中重要协议)
ICMP协议在网络层,应用:ping命令,tracert命令:追踪命令,用于静态路由. ICMP重定向 redirect