react.js 各种小测试笔记
首先看一个 基础html 至于其中的 js 问价大家去官网下载就好了。
<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="test"></div>
<script type="text/babel"> </script>
</body>
</html>
1在input框中输入值点击按钮获取其中的值在console.log中打印。
var TestRef = React.createClass({
handleClick : function(){
console.log(this.refs.Inputref.value);
},
render:function(){
return (<div>
<input type="text" ref="Inputref"/>
<input type="button" value="TEXT" onClick={this.handleClick}/>
</div>);
}
});
ReactDOM.render(
<TestRef/>,
document.getElementById('test')
);
2
//2 组建通讯 属性的用法
/**
* 当输入框的值改变的时候上面hello后面的值也发生改变
* 当Test1 组建创建 执行getInitialState（这个方法只运行一次 在创建组建的时候）方法 设置状态 name 的默认值为空
* 然后执行render 方法 渲染 此时调用Test组建 由于组建Test中name 属性的值是空 所以页面第一次会显示 hello word
* 当用户在输入框中输入数据的时候 出发 onChange 执行handleChange 方法 这个方法中
* setState 更新name 的状态为输入框的值。此时在组建Test 中的属性name 的值发生改变 所以会随之变化
*/
var Test =React.createClass({
render:function(){
return <div>hello,{this.props.name ? this.props.name :'word!'}!</div>;
}
});
var Test1 = React.createClass({
getInitialState:function(){
return {name:''};
},
handleChange:function(event){
this.setState({name:event.target.value})
},
render:function(){
return(
<div>
<Test name={this.state.name}/>
<input type="text" onChange={this.handleChange}/>
</div>
);
}
});
ReactDOM.render(
<Test1/>,
document.getElementById('test')
);
3
// 组建通讯 状态 属性的用法
/**
* 状态，属性的用法
* 场景：点击提交的时候 获取textarea的值和select 选中的值。用console.log 打印出来
* 最后render 渲染的时候是Test1组建 所以先看Test1组建 创建的时候 定义了2个状态 names数组 selectvalue
* 渲染的时候 也加载了<Test>组建 给组建设置了一个属性selectName 值等于Test1中的状态 selectvalue
* 组建Test1中当下拉框的值改变的时候触发handleOnchange方法 设置状态 selectvalue的值为下拉框中选中的值。
* 在Test 组建中 创建的时候 设置状态 inputValue为空 渲染的时候 当输入框的值改变的时候出发handleONE方法
* 设置状态inputValue 的值为输入框的值。 当点击Submit的时候出发 handleTWO 方法 获取状态inputValue的值和属性selectName的值
*
var Test =React.createClass({
getInitialState:function(){
return {inputValue:''};
},
handleONE:function(event){
this.setState({inputValue:event.target.value});
},
handleTWO:function(){
console.log("textarea value is:"+this.state.inputValue+"----selectValue:"+this.props.selectName);
},
render:function(){
return (
<div>
<textarea placeholder="please input string" onChange={this.handleONE}>
</textarea>
<input type="button" value="Submit" onClick={this.handleTWO}/>
</div>
);
}
});
var Test1 = React.createClass({
getInitialState:function(){
return{
names:['xiaoming','xiaowang','xiaohong'],
selectvalue:'',
}
},
handleOnchange:function(event){
this.setState({selectvalue:event.target.value});
},
render:function(){
var optionArr = [];
for (var option in this.state.names) {
optionArr.push(<option key={option} value={this.state.names[option]}>{this.state.names[option]}</option>);
};
return(
<div>
<select onChange={this.handleOnchange}>
{optionArr}
</select>
<Test selectName={this.state.selectvalue}/>
</div>
);
}
});
ReactDOM.render(
<Test1/>,document.getElementById('test')
);
4 组建的生命周期 初始化阶段
// React 有三个阶段 初始化阶段 运行中阶段 销毁阶段
// React 初始化阶段
var HelloWorld = React.createClass({
//设置默认属性
getDefaultProps: function () {
console.log("getDefaultProps, 1")
},
//设置默认状态
getInitialState: function () {
console.log("getInitialState, 2");
return null;
},
//在渲染之前调用
componentWillMount: function () {
console.log("componentWillMount, 3")
},
//渲染
render: function () {
console.log("render, 4")
return <p ref="childp">Hello, {(function (obj) {
if (obj.props.name)
return obj.props.name
else
return "World"
})(this)}</p>
},
//组建渲染完成之后调用
componentDidMount: function () {
console.log("componentDidMount, 5")
},
});
ReactDOM.render
(<div>
<HelloWorld></HelloWorld>
</div>,
document.getElementById('test')
);
看结果
5 组建的生命周期 运行中阶段
// React 有三个阶段 初始化阶段 运行中阶段 销毁阶段
// React 运行中阶段触发顺序
var HelloWorld = React.createClass({
componentWillReceiveProps: function () {
console.log("componentWillReceiveProps 1");
},
shouldComponentUpdate: function () {
console.log("shouldComponentUpdate 2");
return true;
},
componentWillUpdate: function () {
console.log("componentWillUpdate 3")
},
render: function () {
console.log("render 4");
return <p>Hello, {this.props.name ? this.props.name : "World"}</p>;
},
componentDidUpdate: function() {
console.log("componentDidUpdate 5");
},
});
var HelloUniverse = React.createClass({
getInitialState: function () {
return {name: ''};
},
handleChange: function (event) {
this.setState({name: event.target.value});
},
render: function () {
return <div>
<HelloWorld name={this.state.name}></HelloWorld>
<br/>
<input type="text" onChange={this.handleChange} />
</div>
},
});
ReactDOM.render
(<div>
<HelloUniverse></HelloUniverse>
</div>,
document.getElementById('test')
);
默认情况下
当输入数据时
6 mixin 的用法 :复用 类似于公共方法 提高代码的复用性
//Mixin 用法
var MixinFunction ={
handleChange:function(key){
var that =this
// 这里的this 代表的是HelloUniverse 这个组建。
//如果return 中用this 的话 this 代表的就是 这个函数的本身 所以用that变量去代替
return function(event){
var Common={};
Common[key] = event.target.value;
that.setState(Common);
}
}
}; var HelloUniverse = React.createClass({
mixins:[MixinFunction],
getInitialState:function(){
return {name:'',name2:''};
}, render:function(){
return(
<div>
<input type="text" onChange={this.handleChange('name')}/><hr/>
<input type="text" onChange={this.handleChange('name2')}/>
<p>input_value_name:{this.state.name}</p>
<p>input_value_name2:{this.state.name2}</p>
</div>
);
}
}); ReactDOM.render(
<div>
<HelloUniverse></HelloUniverse>
</div>,
document.getElementById('test')
);
看结果：
初始：
结果：实现了双向绑定 
react.js 各种小测试笔记的更多相关文章
- React.js入门小案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
- React.js 小书介绍
React.js 小书 Github 关于作者 这是一本关于 React.js 的小书. 因为工作中一直在使用 React.js,也一直以来想总结一下自己关于 React.js 的一些知识.经验.于是 ...
- 移动web端的react.js组件化方案
背景: 随着互联网世界的兴起,web前端开发的方式越来越多,出现了很多种场景开发的前端架构体系,也对前端的要求日益增高,早已经不是靠一个JQuery.js来做前端页面的时代了,而今移动端变化最大,近 ...
- Angular、React.js 和Node.js到底选谁?
为了工作,程序员选择正确的框架和库来构建应用程序是至关重要的,这也就是为什么Angular和React之间有着太多的争议.Node.js的出现,让这场战争变得更加复杂,虽然有选择权通常是一件很棒的事情 ...
- React.js入门笔记
# React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
- React.js 小书 Lesson16 - 实战分析：评论功能（三）
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson16 转载请注明出处,保留原文链接和作者信息. 接下来的代码比较顺理成章了.修改 Commen ...
- React.js入门笔记(再续)：评论框的实现
本案例来自React.js中文官网对应内容. 一. 运行环境 <link rel="stylesheet" type="text/css" href=&q ...
- React.js小书总结
(迁移自旧博客2017 08 27) 第一阶段 react的组件相当于MVC里面的View. react.js 将帮助我们将界面分成了各个独立的小块,每一个块就是组件,这些组件之间可以组合.嵌套,就成 ...
- ReactiveX 学习笔记（26）使用 RxJS + React.js 调用 REST API
JSON : Placeholder JSON : Placeholder (https://jsonplaceholder.typicode.com/) 是一个用于测试的 REST API 网站. ...
随机推荐
- 40+个对初学者非常有用的PHP技巧
1.不要使用相对路径,要定义一个根路径 这样的代码行很常见: require_once('../../lib/some_class.php'); 这种方法有很多缺点: 它首先搜索php包括路径中的指定 ...
- Oracle 11gR2 RAC集群服务启动与关闭总结
引言:这写篇文章的出处是因为我的一名学生最近在公司搭建RAC集群,但对其启动与关闭的顺序和原理不是特别清晰,我在教学工作中也发现了很多学员对RAC知识了解甚少,因此我在这里就把RAC里面涉及到的最常用 ...
- Java NIO简单介绍（二）
上一篇<NIO简单介绍(一)>中讲解了NIO中本地IO相关的内容,这篇重点介绍的NIO的非阻塞式网络通信 一.阻塞与非阻塞 传统的 IO 流都是阻塞式的.也就是说,当一个线程调用 read ...
- fileupload页面跳转找不到原页面的解决方法
做了个上传图片的功能,之前做的全都对,完全可以实现,但是后来再弄的时候,只要FileUpload控件里面有字(选择了图片),再按button.它尽然不执行button1_click事件,直接页面跳转, ...
- string源码分析 ——转载 http://blogs.360.cn/360cloud/2012/11/26/linux-gcc-stl-string-in-depth/
1. 问题提出 最近在我们的项目当中,出现了两次与使用string相关的问题. 1.1. 问题1:新代码引入的Bug 前一段时间有一个老项目来一个新需求,我们新增了一些代码逻辑来处理这个新需求.测试阶 ...
- yii2自定义500错误
由于项目想加预警监控,有一块儿是涉及到程序内部错误的500,这样的错误级别比较高,所以就需要捕获这样的错误,顺便自定义了一把视图样式 看了这篇博客,知道了如何去自定义自己错误页面 : http://t ...
- ShowDialog窗体的return问题
最近的一个项目里,打开新窗口用到了ShowDialog()这种方式,发现在新窗口做保存操作的时候,保存按钮事件下的程序执行完(无论有没有return)都会关闭子窗口. 网上查了一下,发现大家说的方法在 ...
- SQL判断NULL的几种常见方式
第一种 where XX ='NULL' ,XX字段存的值就是NULL这四个字符, 第二种 where XX is null ,XX字段什么也没存,这是数据库的判断语法, 第三种 where isnu ...
- 读取web外的配置文件
一般web项目配置文件都放在classPath下面,读取的时候: 1 import java.io.InputStream; 2 import java.util.Properties; 3 publ ...
- 【UVALive】3029 City Game（悬线法）
题目 传送门:QWQ 分析 以前见到过差不多的这题. xhk说是单调栈水题,但我又不会单调栈,于是当时就放下了. 这么久过去了我还是不会用单调栈做这题,用的是悬线法. 非常好写 代码 #include ...