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 ...
随机推荐
- 移动web-bootstrap
1bootstarp布局容器+栅格系统的使用 1.101-移动web-bootstrap中的布局容器 1.container和container-fluid的区别? a) container ...
- C#版 - LeetCode 148. Sort List 解题报告(归并排序小结)
leetcode 148. Sort List 提交网址: https://leetcode.com/problems/sort-list/ Total Accepted: 68702 Total ...
- EL表达式jsp页面double小数点后保留两位
EL表达式jsp页面double小数点后保留两位,四舍五入 <fmt:formatNumber type="number" value="${member.logi ...
- TOMCAT源码分析（转）
前言: 本文是我阅读了TOMCAT源码后的一些心得. 主要是讲解TOMCAT的系统框架, 以及启动流程.若有错漏之处,敬请批评指教!建议: 毕竟TOMCAT的框架还是比较复杂的, 单是从文字上 ...
- C#4并行计算
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- centos7下安装samba服务器
samba笔记: http://services.linuxpanda.tech/%E7%BD%91%E7%BB%9C%E6%96%87%E4%BB%B6%E5%85%B1%E4%BA%AB/samb ...
- ES6躬行记（9）——字符串
在介绍字符串之前,有必要先了解一点Unicode的基础知识,有助于理解ES6提供的新功能和新特性. 一.Unicode Unicode是一种字符集(即多个字符的集合),它的目标是涵盖世界上的所有字符, ...
- 字符串不相同出现相同HashCode（算法）
转自:https://blog.csdn.net/fly_grass_fish/article/details/81742794 在Java中有HashCode的说法,以前以为HashCode是唯一的 ...
- mysql常用字符串操作函数大全，以及实例
今天在论坛中看到一个关于mysql的问题,问题如下 good_id cat_id12654 665,56912655 601,4722 goods_id是商品i ...
- 用主题模型可视化分析911新闻（Python版）
本文由 伯乐在线 - 东狗 翻译,toolate 校稿.未经许可,禁止转载!英文出处:blog.dominodatalab.com.欢迎加入翻译小组. 本文介绍一个将911袭击及后续影响相关新闻文章的 ...