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 ...
随机推荐
- 宝塔面板下安装zabbix
宝塔面板之前已经安装完成,如果不会可以查看上一个日志.接下来开始安装zabbix 1.添加系统用户和组 2. yum -y install epel-release #安装源 3.使用命令 yum - ...
- 能不能在FOR循环中执行SQL？
JDBC最基础的For循环处理SQL的方式 以及执行时间 package javaee.net.cn.jdbc; import java.sql.*; public class TestTransac ...
- SQL参数放在where前后的区别
本博客记录一个细节,在使用sql left join时候,参数放在left join后面当条件,还是放在where后的区别 给出两条SQL: tt.book_type = 'TIPS_TYPE',放在 ...
- 设置python环境变量
原始环境变量 /> python Python |Anaconda (-bit)| (default, May , ::) [GCC (Red Hat -)] on linux Type &qu ...
- Nginx是什么？Nginx介绍及Nginx的优点
Nginx是俄罗斯人编写的十分轻量级的HTTP服务器,Nginx,它的发音为"engine X", 是一个高性能的HTTP和反向代理服务器,同时也是一个IMAP/POP3/SMTP ...
- 使用apidocJs快速生成在线文档
https://blog.csdn.net/xialei199023/article/details/63251482 https://blog.csdn.net/qq_16142851/articl ...
- Apache Pulsar简介
Apache Pulsar What is Pulsar "Pulsar is a distributed pub-sub messaging platform with a very fl ...
- 全网最详细的最新稳定OSSEC搭建部署（ossec-server（CentOS7.X）和ossec-agent（CentOS7.X）)（图文详解）
不多说,直接上干货! 前言 写在前面的话,网上能够找到一些关于ossec方面的资料,虽然很少,但是总比没有强,不过在实际的使用过程中还是会碰到许多稀奇古怪的问题.整理整理我的使用过程,就当做一篇笔记吧 ...
- java中String类为什么不可变？
在面试中经常遇到这样的问题:1.什么是不可变对象.不可变对象有什么好处.在什么情景下使用它,或者更具体一点,java的String类为什么要设置成不可变类型? 1.不可变对象,顾名思义就是创建后的对象 ...
- leetcode — first-missing-positive
/** * * Source : https://oj.leetcode.com/problems/first-missing-positive/ * * Created by lverpeng on ...