一、什么是React

React: A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES

上面的话直译过来就是,React是一个用于构建用户界面的JavaScript库。

React起源于Facebook内部项目,后来觉得不错,在2013年6月开源

二、学习React

我学习的时候是基于 React-Demos 这个阮一峰博客上写的Demo库以及他的博客学习的,基本上跟着Demo跑一次下来就差不多入门了。前提是你对JavaScript和DOM有一定的了解。

三、安装

1.直接到官网下载

2.看着React-Demos学习的话,React-Demos中就自带了React源码,直接git clone或者下载zip压缩包

四、HelloWorld

下面是使用React网页的基本结构

<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/JSXTransformer.js"></script>
</head>
<body>
<div id="helloworld"></div>
<script type="text/jsx">
// your code
React.render(
<h1>Hello, World!</h1>,
document.getElementById('helloworld')
);
</script>
</body>
</html>

注意:

1.最后的script标签的type属性是“text/jsx”。因为React独有的JSX语法与JacaScript不兼容,使用JSX的地方都有显示表明type属性为"text/jsx"。

2.React提供的两个库react.js和JSXTransformer.js都必须首先加载。JSXTransformer.js的作用是件JSX语法转为JavaScript语法,这一步实际应该放到服务器完成,因为非常耗时间。

上面的代码中用到了React.render方法,这是React最基本的方法,用于将模板转为HTML语言并插入指定的DOM节点。

我们看到代码中,HTML语言直接写在JavaScript语言中,没有任何引号,这是JSX语法,允许HTML与JavaScript混写。

五、JSX语法

把上面的HelloWorld代码修改一下。

<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/JSXTransformer.js"></script>
</head>
<body>
<div id="helloJSX"></div>
<script type="text/jsx">
// your code
var names = ['John', 'Amin', 'Ann'];
React.render(
<div>
{
names.map(function (name) {
return <h1>Hello, {name}!</h1>
})
}
</div>,
document.getElementById('helloJSX')
);
</script>
</body>
</html>

上面这种像XML的语法叫JSX语法。

在JSX语法中,遇到HTML标签(以<开头)就用HTML规则解析,遇到代码块(以{开头)就用JavaScript规则解析。

上面代码运行出来就是id为helloworld的div下再嵌套着一个div,然后再嵌套三个h1标题。

JSX还允许在模板中直接插入JavaScript变量,变量是数组就展开数组成员。

<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/JSXTransformer.js"></script>
</head>
<body>
<div id="helloArray"></div>
<script type="text/jsx">
// your code
var arr = [
<h1>Hello, world!</h1>,
<h2>Hello, Amin!</h2>,
<h3>React is awesome</h3>
];
React.render(
<div>{arr}</div>,
document.getElementById('helloArray')
);
</script>
</body>
</html>

上面代码会在id为helloArray的div下嵌套三个套着div的标题。

我本来想看一下如果不想在标题外面再嵌套div要怎么做,暂时还没发现。

六、组件(component)

<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/JSXTransformer.js"></script>
</head>
<body>
<div id="helloComponent"></div>
<script type="text/jsx">
// your code
var HelloMessage = React.createClass({
render: function() {
return <h1>hello, {this.props.name}</h1>;
}
});
React.render(
<HelloMessage name="John"/>,
document.getElementById('helloComponent')
);
</script>
</body>
</html>

React允许代码封装成组件,在网页中插入组件就像插入普通HTML标签一样。

React.createClass方法是用来生成一个组件类,上面的HelloMessage就是这个方法生成的一个组件类。在模板插入<HelloMessage />时和插入普通的HTML标签一样,但是会自动生成HelloMessage这个组件类的一个实例。在组件类中应该有自己的render方法来输出组件。

组件可以加入任意的属性,和HTML标签的用法一样。上面的HelloMessage组件中就有一个name属性。组件属性在组件类的this.props对象上可以获取。

添加组件属性的时候需要注意不要和JavaScript保留字冲突。如果要用到class和for应该这么写:

var MyComponent = React.createClass({
render: function() {
return <div className="first"><span>A Span</span></div>;
}
});

this.props对象属性基本上和组件属性对应,除了this.props.children属性,它表示的意思是组件的所有子节点。

见下面代码

<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/JSXTransformer.js"></script>
</head>
<body>
<script type="text/jsx">
// your code
var NoteList = React.createClass({
render: function() {
return (
<ol>
{
this.props.children.map(function (child) {
return <li>{child}</li>;
})
}
</ol>
);
}
});
React.render(
<NoteList>
<span>Hello, world!</span>
<span>Hello, Amin!</span>
<span>Hello, Ann!</span>
</NoteList>,
document.body
);
</script>
</body>
</html>

NoteList组件类通过this.props.children读取NoteList组件实例下的三个span子节点,然后重新进行转化再插入到body中。

注意子节点必须多于1个,this.props.children才会是一个数组,当它是数组时才能用map方法,否则会报错。

我们需要知道,组件并不是真实的DOM节点,它是存在于内存中叫虚拟DOM(virtual DOM)的一种数据结构。组件插入文档中以后才会成为真实的DOM节点。

根据React的diff算法,DOM变动都先在虚拟DOM上发生,然后将发生变动部分反映到真实DOM上。

如果需要从组件中获取真实DOM节点,需要用到的方法叫React.findDOMNode.

<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/JSXTransformer.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/jsx">
// your code
var MyComponent = React.createClass({
handleClick: function() {
React.findDOMNode(this.refs.myTextInput).focus();
},
render: function() {
return (
<div>
<input type="text" ref="myTextInput" />
<input type="button" value="Focus the text input" onClick={this.handleClick} />
</div>
);
}
});
React.render(
<MyComponent />,
document.getElementById('example')
);
</script>
</body>
</html>

我对上面代码的理解是,在组件MyComponent的子节点中有一个文本输入框,用于获取用户输入,onClick绑定的事件是组件中的handleClick,让文本框获得焦点。

这时就需要获得真实的DOM节点,为了做到这点,首先文本输入框要有一个ref属性,我对ref属性的理解是通过这个属性文本输入框被分配了一个名字,通过this.refs.[refName]就能指向这个虚拟DOM的子节点,最后通过React.findDOMNode方法获取真实DOM节点。

React把组件看成一个状态机,一开始有一个初始状态,组件与用户互动导致状态变化的话,会触发重新渲染UI。

<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/JSXTransformer.js"></script>
</head>
<body>
<div id="state"></div>
<script type="text/jsx">
// your code
var LikeButton = React.createClass({
getInitialState: function () {
return {liked: false};
},
handleClick: function (event) {
this.setState({liked: !this.state.liked});
},
render: function () {
var text = this.state.liked ? 'like' : 'haven\'t liked';
return (
<p onClick={this.handleClick} >
You {text} this. Click to toggle.
</p>
);
}
}); React.render(
<LikeButton />,
document.getElementById('state')
);
</script>
</body>
</html>

上面的效果就是你点击div里面的文字会进行切换。

LikeButton组件中的getInitialState方法定义初始状态,这个对象通过this.state读取。每次点击都会导致状态变化,this.setState方法用于修改状态值,每次修改之后都会自动调用this.render方法,再次渲染组件。

当组件的特性是会随着与用户互动而产生变化时,我们应该使用this.state,而不是this.props

React 入门笔记的更多相关文章

  1. react入门笔记

    this.props.children是任何内嵌的元素 利用ref属性给子组件命名,this.refs引用组件,getDOMNode()获取本地的DOM元素,如: this.refs.author.g ...

  2. React入门---基础知识-大纲-1

    -----------------在慕课网学习react入门笔记-------------- ---------博主边学边记录,手把手进行学习及记录---------- --------------- ...

  3. React.js入门笔记

    # React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...

  4. React学习笔记(一)- 入门笔记

    React入门指南 作者:狐狸家的鱼 本文链接:React学习笔记 GitHub:sueRimn 1.组件内部状态state的修改 修改组件的每个状态,组件的render()方法都会再次运行.这样就可 ...

  5. React 入门学习笔记整理目录

    React 入门学习笔记整理(一)--搭建环境 React 入门学习笔记整理(二)-- JSX简介与语法 React 入门学习笔记整理(三)-- 组件 React 入门学习笔记整理(四)-- 事件 R ...

  6. es6 Object.assign ECMAScript 6 笔记(六) ECMAScript 6 笔记(一) react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式

    es6 Object.assign   目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...

  7. react入门——慕课网笔记

    一. jsx 1. 被称为语法糖:糖衣语法,计算机语言中添加的某种语法,对语言的功能没有影响,更方便程序员使用,增加程序的可读性,降低出错的可能性 类似的还有(coffeescript,typescr ...

  8. React 入门学习笔记2

    摘自阮一峰:React入门实例教程,转载请注明出处. 一.获取真实的DOM节点 组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual DOM).只有当它 ...

  9. React 入门学习笔记1

    摘自阮一峰:React入门实例教程,转载请注明出处. 一. 使用React的html模板 使用React, 我们需要加载3个库,react.js, react-dom.js, 和browser.js. ...

随机推荐

  1. IndentationError: expected an indented block错误

    Python语言是一款对缩进非常敏感的语言,给很多初学者带来了困惑,即便是很有经验的python程序员,也可能陷入陷阱当中.最常见的情况是tab和空格的混用会导致错误,或者缩进不对,而这是用肉眼无法分 ...

  2. Python移动自动化测试面试

    Python移动自动化测试面试 整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频的感受,单论单个知识点课程本身没问题,大家看的时候可以关 ...

  3. redis学习笔记05-发布订阅模式

    由于redis消息队列并不支持多播机制,即生产者产出一次,由中间件复制发送给多个消费者的机制,为了弥补这个不足,单独引入了发布订阅模式的模块.使用方式如下: #生产者 import redis cli ...

  4. css3之 渐变

    CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果.但是,通过使用 CSS3 渐变(gradients),你可以减少下载的事件和 ...

  5. HDFS读数据的过程

  6. 啊啊我找不到web.xml怎么办呀~~

    创建Dymamic Web Project的时候不要忘记勾选这玩意(about servlet) 其实还有一个办法就是右键点击你的web项目名--->Java EE Tools-->Gen ...

  7. 解决JSP调用JavaBean出现乱码问题

    解决JSP调用JavaBean出现乱码问题 话不多说放代码 144 Normal 0 7.8 磅 0 2 false false false EN-US ZH-CN X-NONE /* Style D ...

  8. numpy 常用工具函数 —— np.bincount/np.average

    numpy 常用工具函数 —— np.bincount/np.average numpy 常用api(一) numpy 常用api(二) 一个函数提供 random_state 的关键字参数(keyw ...

  9. 洛谷P5319 奥术神杖

    题意:给你若干个串和一个填了一部分的串.补完这个串使得 (每个串的匹配次数 * 权值) ^ (1 / 所有串匹配次数) 最大. 解:把这个东西随便取一个对数,就变成了分数规划. 二分.然后在AC自动机 ...

  10. c#还有一点不太明白,既然开启了线程为何还要委托呢?

    2013-07-15 09:33threadroc | 浏览 1611 次 既然开启了线程为何还要委托呢?,开启线程本身不就是委托吗?为何委托要显示声明呢?Thread thread = new Th ...