react学习笔记2
1.build文件介绍
（1）react.js 是react的核心库
（2）react-dom.js 提供与DOM相关功能
（3）browser.js 是将JSX语法转为javascript语法
2.组件的继续学习
注意：组件的第一个字母必须大写，否则会报错。组件的用法和html标签完全一致，可以任意加入属性。组件的属性，可以通过 this.props 对象上获取。
3.this.props.children
this.props.children 有三种可能 ：
a.当前组件没有字节点，返回undefined ；
b.如果有一个字节点，数据类型是object ；
c.数据类型是array
（1）代码预览
（2）游览器里效果
（3）源码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div> <script type="text/babel"> var NotesList = React.createClass({
render: function() {
return (
<ol>
{
React.Children.map(this.props.children, function (child) {
return <li>{child}</li>;
})
}
</ol>
);
},
}); ReactDOM.render(
<NotesList>
<span>hello</span>
<span>world</span>
</NotesList>,
document.getElementById('example')
); </script>
</body>
</html>
4.PropTypes
组件类的 PropType 属性，就是用来验证组件实例的属性是否符合要求。
(1)代码预览
(2)游览器里效果
（3）源码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div> <script type="text/babel"> var MyTitle = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired,
}, render: function() {
return <h1> {this.props.title} </h1>;
}
}); var data = 123; ReactDOM.render(
<MyTitle title={data} />,
document.body
); </script>
</body>
</html>
5.获取真实的dom节点
组件并不是真实的dom节点，而是存在于内存中的一种数据结构，叫做virtual dom。只有插入文档中才会变成真实的dom 。根据react的设计，所有的dom的变动，都现在虚拟的dom上发生，然后再将实际发生变动的部分，反映在真实的dom上，这种算法叫做dom diff，它可以极大提高网页的性能。
（1）代码预览
（2）游览器效果如下：
（3）源码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div> <script type="text/babel"> var MyComponent = React.createClass({
handleClick: function() {
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>
);
}
}); ReactDOM.render(
<MyComponent />,
document.getElementById('example')
); </script>
</body>
</html>
6.this.state
this.state 和 this.props 都是用来描述组件的特性。this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是随着用户而产生的热性。
（1）代码预览
（2）游览器里效果（点击的时候会切换）
(3)源码
<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
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>
);
}
}); ReactDOM.render(
<LikeButton />,
document.getElementById('example')
);
</script>
</body>
</html>
7.表单
(1)代码预览
（2）在游览器中的效果 （p标签里面的内容会随着input里面的内容变化）
（3）源码
<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var Input = React.createClass({
getInitialState : function(){
return {value:'hello'};
},
handleChange : function(event){
this.setState({value:event.target.value});
},
render : function(){
var value = this.state.value;
return(
<div>
<input type="text" value={value} onChange={this.handleChange} />
<p>{value}</p>
</div>
);
},
}); ReactDOM.render(<Input/>,document.getElementById('example'))
</script>
</body>
</html>
8.组件的生命周期
组件的生命周期分成三个状态：
1. mounting : 已经插入真实dom
2.updating : 正在被重新渲染
3.unmounting : 已移除真实dom
react为每个状态都提供了两种处理函数，will 函数在进入状态前期调用，did 函数在进入状态之后调用 ，三种状态共计五种处理函数
1. componentWillMount()
2. componentDidMount()
3. componentWillUpdate(object nextProps,object nextState)
4. componentDidUpdate(object prevProps,object preState)
5. componentWillUnmount()
此外，react还提供特殊状态的处理函数：
1. componentWillReceiveProps(object nextProps) 已加载组件到新的参数时调用
2. shouldComponentUpdate(object next Props,object nextState) 组件判断是否重新渲染时调用
例子：（helloworld的透明度随时间改变）
（1）代码预览
（2）游览器里的效果
（3）源码
<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var Hello = React.createClass({
getInitialState: function () {
return {
opacity: 1.0
};
}, componentDidMount: function () {
this.timer = setInterval(function () {
var opacity = this.state.opacity;
opacity -= .05;
if (opacity < 0.1) {
opacity = 1.0;
}
this.setState({
opacity: opacity
});
}.bind(this), 100);
}, render: function () {
return (
<div style={{opacity: this.state.opacity}}>
Hello {this.props.name}
</div>
);
}
}); ReactDOM.render(
<Hello name="world"/>,
document.body
);
</script>
</body>
</html>
9.ajax
组件的数据来源，通常是通过ajax请求服务器获取可以使用componentDidMount方法设置ajax请求，等到请求成功，再用this.setState的方法重新渲染UI。
(1)代码预览
（2）游览器效果
（3）源码
<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
<script src="../build/jquery.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel"> var RepoList = React.createClass({
getInitialState: function() {
return { loading: true, error: null, data: null};
}, componentDidMount() {
this.props.promise.then(
value => this.setState({loading: false, data: value}),
error => this.setState({loading: false, error: error}));
}, render: function() {
if (this.state.loading) {
return <span>Loading...</span>;
}
else if (this.state.error !== null) {
return <span>Error: {this.state.error.message}</span>;
}
else {
var repos = this.state.data.items;
var repoList = repos.map(function (repo) {
return (
<li>
<a href={repo.html_url}>{repo.name}</a> ({repo.stargazers_count} stars) <br/> {repo.description}
</li>
);
});
return (
<main>
<h1>Most Popular JavaScript Projects in Github</h1>
<ol>{repoList}</ol>
</main>
);
}
}
}); ReactDOM.render(
<RepoList
promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')}
/>,
document.body
);
</script>
</body>
</html>
10.最后总结下几个需要注意的地方：
1.react主要的概念是 状态机＋组件
2.组件的首字母必须大写
3.组件使用的过程中／不要漏掉 ，<conponentName />
react学习笔记2的更多相关文章
- react学习笔记1--基础知识
什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...
- React学习笔记--程序调试
React学习笔记 二 程序调试 前面我们搭建好了React的基本开发环境,可以编写基本的React js程序了.但完成的开发环境肯定包含调试器,怎么调试用React编写的JS程序呢?有浏览器,比 ...
- React学习笔记（一）- 入门笔记
React入门指南 作者:狐狸家的鱼 本文链接:React学习笔记 GitHub:sueRimn 1.组件内部状态state的修改 修改组件的每个状态,组件的render()方法都会再次运行.这样就可 ...
- React学习笔记（七）条件渲染
React学习笔记(七) 六.条件渲染 使用if或条件运算符来创建表示当前状态的元素. 可以使用变量来存储元素.比如: let button = null; if (isLoggedIn) { but ...
- React学习笔记（六）事件处理
React学习笔记(六) 五.事件处理 React事件绑定属性的命名采用驼峰写法,不同于传统DOM全部小写. 如果采用JSX的语法,事件函数需要用大括号{}包裹函数名,不同于传统DOM字符串小括号的方 ...
- React学习笔记（五）State&声明周期
React学习笔记(五) 四.State&声明周期 可以为组件添加"状态(state)".状态与属性相似,但是状态是私有的,完全受控于当前组件. 局部状态就是只能用于类(定 ...
- React学习笔记 - 组件&Props
React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...
- React学习笔记 - 元素渲染
React Learn Note 3 React学习笔记(三) 标签(空格分隔): React JavaScript 二.元素渲染 元素是构成react应用的最小单位. 元素是普通的对象. 元素是构成 ...
- React学习笔记 - JSX简介
React Learn Note 2 React学习笔记(二) 标签(空格分隔): React JavaScript 一.JSX简介 像const element = <h1>Hello ...
- React学习笔记 - Hello World
React Learn Note 1 React学习笔记(一) 标签(空格分隔): React JavaScript 前.Hello World 1. 创建单页面应用 使用Create React A ...
随机推荐
- Oracle to_char(参数,'FM990.00')函数
遇到一个SQL,记录一下 select to_char(参数,'FM990.00') from 表格 刚看到FM990.00确实不知道什么意思,通过网上资料,知道了 0表示:如果参数(double或者 ...
- Xamarin.Android 使用 SimpleAdapter 打造 ListView 万能适配器
第一步:创建 layout1.axml 来展示列表详细内容 <?xml version="1.0" encoding="utf-8"?> <L ...
- Net Core平台灵活简单的日志记录框架NLog+SqlServer初体验
Net Core平台灵活简单的日志记录框架NLog+SqlServer初体验 前几天分享的"[Net Core平台灵活简单的日志记录框架NLog+Mysql组合初体验][http://www ...
- JVM学习（一）、垃圾收集器简介
一.垃圾收集算法 (1)标记-清除算法:最基础的收集算法“标记--清除”(Mark-sweep)算法,算法分为“标记”和“清除”两个阶段:首先标记出所有需要回收的对象,在标记完成后统一回收所有被标记的 ...
- struts2整合uploadify插件怎样传参数
关于uploadify3.1,先看下帮助文档中的有些知识. 其中有个onUploadStart方法,我们可以使用这个向后台传参. 下面举个例子, js: <script type="t ...
- 西安活动 | 9月15号 "拥抱开源, 又见.NET" 线下交流活动
随着.NET Core的发布和开源,.NET又重新回到了人们的视野.除了开源.跨平台.高性能以及优秀的语言特性,越来越多的第三方开源库也出现在了github上——包括ML.NET机器学习.Xamari ...
- MFC编程之数值调节按钮
MFC编程之数值调节按钮 一丶数值调节按钮使用的注意事项 CSpinButtonCtrl类是MFC封装的数值调节按钮. 我们要使用数值调节按钮需要注意的事项. 1.数值调节按钮跟一个编辑框配合使用. ...
- RabbitMQ系列（四）RabbitMQ事务和Confirm发送方消息确认——深入解读
RabbitMQ事务和Confirm发送方消息确认--深入解读 RabbitMQ系列文章 RabbitMQ在Ubuntu上的环境搭建 深入了解RabbitMQ工作原理及简单使用 RabbitMQ交换器 ...
- 消息中间件RabbitMQ(一)
1.消息中间件 消息队列中间件是指利用高效可靠地消息传递机制传递消息.有两种传递模式:点对点模式.发布/订阅模式.流行的消息中间件有RabblitMQ.Kafka.RockerMQ.它们都提供了基于存 ...
- tcp_wrapper过滤
1.1 wrap简介 wrap工作在内核空间和应用程序中间的库层次中.在内核接受到数据包准备传送到用户空间时都会经过库层次,对于部分(只是部分)应用程序会在经过库层次时会被wrap库文件阻挡下来检查一 ...