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 组建通讯属性的用法
/**
* 当输入框的值改变的时候上面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')
    );

// 组建通讯状态属性的用法
/**
* 状态，属性的用法
* 场景：点击提交的时候获取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 网站. ...

随机推荐

关于WCF引用方式之WCF服务寄宿控制台
1.创建解决方案WCFService 依次添加四个项目,如上图,Client和Hosting为控制台应用程序,Service和Service.Interface均为类库. 2.引用关系 Service ...
Android 编译系统的组成
Android 和 Linux 的编译系统都是通过 Makefile 工具来组织编译源代码的. Makefile 工具用来解释和执行 Makefile 文件,在 Makefile 文件里定义好工程源代 ...
使用Nancy搭建简单的Http服务的示例demo
刚刚接触Nancy没几天,暂时还不会使用Nancy来做web开发,只是使用Nancy实现了一个简单的Http服务的Demo程序,实现对Post和Get请求的处理. Demo的示例代码地址如下:http ...
Oracle拆分字符串函数与执行调用
本函数可以将“目标字符串”以“指定字符串”进行拆分,并通过表结构返回结果.代码如下: ); CREATE OR REPLACE FUNCTION splitstr(p_string IN VARCHA ...
Exce信息提取
Exce信息提取 Private Declare Sub Sleep Lib "kernel32" (ByVal dwMilliseconds As Long) Sub 信息汇总( ...
Zookeeper--Watcher 和 ACL
Zookeeper--Watcher 和 ACL Watcher (观察) Zookeeper中的znode可以被监控,这是zk的核心特性. 通过exists,getChildren和getData这 ...
librtmp接收flv流中提取h264码流:根据多个资料汇总
rtmpdump可以下载rtmp流并保存成flv文件.如果要对流中的音频或视频单独处理,需要根据flv协议分别提取.简单修改rtmpdump代码,增加相应功能.1 提取音频:rtmpdump程序在Do ...
python 发红包
import random li = [] def fahongbao(money,num=6): if money > 0 and num != 1: n = round(random.uni ...
yii 获取当前ip
<?php //当前域名 echo Yii::app()->request->hostInfo; //除域名外的URL echo Yii::app()->request-> ...
*.app 无法打开或已损坏解决办法
1.系统偏好设置... -> 安全性与隐私-->修改为任何来源 2.如果没有任何来源 ,打开终端执行:sudo spctl --master-disable

react.js 各种小测试笔记

react.js 各种小测试笔记的更多相关文章

随机推荐

热门专题