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 ...
随机推荐
- PackageManager整理
一.PackageManager的功能 1.安装.卸载应用.2.查询permission相关信息.3.查询Application相关信息(application,activity,receiver,s ...
- 解决微信小程序使用wxcharts在屏幕不固定问题-开发工具里也显示好了布局，为啥到真机就是乱的
解决微信小程序使用wxcharts在屏幕不固定问题-开发工具里也显示好了布局,为啥到真机就是乱的 .chart{ width: 100%; text-align: center; } .canvas{ ...
- [Postman]发出SOAP请求(18)
使用Postman发出SOAP请求: 将SOAP端点作为URL.如果您使用的是WSDL,那么请将WSDL的路径作为URL. 将请求方法设置为POST. 打开原始编辑器,并将正文类型设置为“text / ...
- JavaScript中的注释问题详解？ 部分3
注释:解释代码的含义,浏览器中不执行. 方便其他程序员了解代码 ,也可以注释自己不需要的代码(开发过程中)! 1. 单行注释 // 用于一行代码上面 2.多行注释 /* */ 用于一段代码上面 或者是 ...
- volatile和synchronized关键字
synchronized java课上讲到过synchronized 首先看看用synchronized和没用synchronized的区别 import lombok.Getter; /** * @ ...
- npm jspdf报错
137073 warn optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.2 (node_modules\chokidar\node_modul ...
- 使用eclipse创建maven+动态web的项目
windows7操作系统 提前安装java jdk1.8版本+apache-maven-3.3.3+wildfly-10.0.0.Final 1.新建maven项目,到other里面找一下 2.使用默 ...
- ASP.NET Core微服务+Tabler前端框架搭建个人博客2--系统架构
功能分析 在整个微服务架构的搭建过程中,我们需要做的第一步就是对服务进行拆分,将一个完整的系统模块化,通过对各个模块互联,共同完成一个系统的工作.既然要做到模块化,那么必须明白你的系统的需求到底是什么 ...
- NiftyNet开源平台的使用 -- 配置文件
NiftyNet开源平台的使用 NiftyNet基础架构是使研究人员能够快速开发和分发用于分割.回归.图像生成和表示学习应用程序,或将平台扩展到新的应用程序的深度学习解决方案. 详细介绍请见: ...
- R 脚本读取汇总 Excel 表格数据
主要用到了 xlsx 和 rJava 包,打开 Excel 文件,读取各表格数据,再写入到汇总表. 下图为处理前的原始数据表格: 下图为处理后的数据: 代码实现 安装&加载包的函数实现.ins ...