一、 react.js的基本使用方法

1)快速使用,hello world

<div id="app"></div>

<script src="bower_components/react/react.js"></script>

<script src="bower_components/react/JSXTransformer.js"></script>

<script type="text/jsx">

var Message = React.createClass({          //创建组件,首字母必须大写

clickMe: function () {               //此处方法可以在组件中直接使用

alert('click again');

},

render: function () {

return (<h1 onClick={this.clickMe} class="addd">hello world!</h1>)

}});

//加载组件

React.render(

<Message/>,

document.getElementById('app'),

function () {

alert('success')

})

</script>

2)组件的嵌套

//需要注意的是,当嵌套组件时,整个当前组件内容需要用标签包裹起来

var Message1 = React.createClass({

render: function () {

var arr = [];

for (var i = 0; i < 10; i++) {  //循环生成组件数组

arr.push<Message2 key={'Meg'+i}/>);      //可以添加key进行区分

}

return (

<div>        //包裹标签

<h1>组件1</h1>

{arr}            //嵌套组件数组

                </div>

)

}

});

var Message2 = React.createClass({

render: function () {

return (

<div>

<h2>组件2</h2>

<Message3/>     //嵌套其他组件

</div>

)

}

});

var Message3 = React.createClass({

render: function () {

return (

<h3>组件3</h3>

)

}

});

3)组件的状态state

var Message1 = React.createClass({

getInitialState: function () {          //react内置方法设置变量初始状态值

return {

clickCount: 0,

}

},

handleClick: function () {

this.setState({         //react内置方法改变变量状态

clickCount: this.state.clickCount + 1,

})

},

render: function () {

return (

<div>

<button onClick={this.handleClick}>点击</button>

<p>被点击了:{this.state.clickCount}次</p>  //设置状态值显示

</div>

)

}

});

4)组件的参数:组件之间传递数据props

var Message1 = React.createClass({

getInitialState: function () {

return {

message: [

'test1', 'test2', 'test3'

]

}

},

render: function () {

return (

<div>

<Message2 message={this.state.message}/> //向组件2中传递数据

<h1>{title}</h1>  //此处传入的是全局变量数据,顶层数据

</div>

)

}

});

var title = '这是title';

var Message2 = React.createClass({

propTypes: {          //设置数据的类型

message: React.PropTypes.array.isRequired

},

 getDefaultProps: function () {    //如果没有数据,显示默认消息

return {

message: ['默认消息']

}

},

render: function () {

var arr = [];

this.props.message.forEach(function (msg, i) {  //加载其他组件传递的数据

arr.push(<li key={'key'+i}>{msg}</li>);

})

return (

<div>

{arr}

</div>

)

}

});

5)组件中的事件(event

var Message1 = React.createClass({

getInitialState: function () {

return {

selectV: '2',

inputV: 'test again'

}

},

handleSubmit: function () {

console.log('submit');

},

handleInput: function (e) {

this.setState({inputV: e.target.value}); //此处为react封装的事件对象

console.log(e.nativeEvent);          //此处可以查看原生的事件对象

},

render: function () {

return (

<form onSubmit={this.handleSubmit}>

<input type="text" value={this.state.inputV} onChange={this.handleInput}/>           //添加onChange内置方法

<input type="text" defaultValue='default'/>  //可以修改

<select value={this.state.selectV}>  //如果设置value则不可修改,必须添加onChange事件,才能修改,推荐用defaultValue

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

</select>

</form>

)

}

});

6)组件中元素的指向(ref

var Message1 = React.createClass({

getInitialState: function () {

return {

inputV: 'test again'

}

},

handleClick: function () {

console.log(this.refs.input.getDOMNode().value);      //获取ref=’input’的DOM元素value

this.refs.hello.saySomething();   //调用ref=‘hello’组件的方法

},

console: function () {

console.log('child')

},

render: function () {

return (

<form onSubmit={this.handleSubmit}>

<input ref='input' type="text" value={this.state.inputV}/>

<input ref={function(comName) {  //ref可以是一个函数同时执行指向自己的方法

                            React.findDOMNode(comName).focus()

                        }} type="text" defaultValue='default'/>

<Child ref='hello' consoleF={this.console}/> //可以向子组件传递方法

<button onClick={this.handleClick} type="button">点击</button>

</form>

)

}

});

var Child = React.createClass({

saySomething: function () {

alert('hello')

},

render: function () {

return (

<div onClick={this.props.consoleF}>

这是child

</div>

)

}

});

7react中的双向数据绑定

<script src="bower_components/react/react-with-addons.js"></script>        //需要引用带addon功能插件的react,js

<script src="bower_components/react/JSXTransformer.js"></script>

<script type="text/jsx">

var Message1 = React.createClass({

 mixins: [React.addons.LinkedStateMixin],  //引入mixins插件

getInitialState: function () {

return {

inputV: 'test again',

flag: true

}

},

render: function () {

return (

<div>

<h1>{this.state.inputV}</h1>

<h2>这是多少? {this.state.flag ? '是1!' : '是2 '}</h2>

<input type="checkbox" checkedLink={this.linkState('flag') }/>  //设置绑定方法,并绑定数据

<input type="text" valueLink={this.linkState('inputV')}/>

<Child childLink={this.linkState('inputV')}/>     //可以传递绑定的方法到子组件中

</div>

)

}

});

var Child = React.createClass({

render: function () {

return (

<input valueLink={this.props.childLink}/>  //子组件接收绑定方法

)

}

});

8)组件的生命周期

  组件的周期,主要分为:装载mount、更新update、卸载unmount三个过程

① 装载mount、卸载unmount

var MessageBox = React.createClass({

getInitialState: function () {

console.log('getInitialState')  //打印排序1

return {

count: 0

}

},

componentWillMount: function () { //组件将要加载时

console.log('componentWillMount')       //打印排序2

},

componentDidMount: function () {  //组件已经加载完成时

console.log('componentDidMount')        //打印排序4

},

componentWillUnmount: function () {    //组件将要删除时

alert('did you want to kill me');

},

killComponent: function () {

React.unmountComponentAtNode(document.getElementById('app'));     //react内置删除DOM元素的方法

},

render: function () {

console.log('render')        //打印排序3

return (

<div>

<h1>现在计数:{this.state.count}</h1>

<button type="button" onClick={this. killComponent}>点击</button>

</div>

)

}

});

React.render(<MessageBox/>,

document.getElementById('app'),

function () {

console.log('渲染完成啦!!');        //打印排序5

}

)

② 更新update

var MessageBox = React.createClass({

getInitialState: function () {

console.log('getInitialState')

return {

count: 0

}

},

shouldComponentUpdate: function (nextProp, nextState) {  //返回一个bool

//判断是否需要更新,有两个参数,如果是组件内部数据,调用nextState,如果是父组件数据,调用nextProp

if (nextState.count > 8) {        //如果count大于8不更新

return false;

}

return true;

},

componentWillUpdate: function () {        //组件将要更新

console.log('componentWillUpdate')

},

componentDidUpdate: function () {         //组件已经更新

console.log('componentDidUpdate');

},

doUpdate: function () {

this.setState({

count: this.state.count + 1

})

},

render: function () {

console.log('render')

return (

<div>

<h1>现在计数:{this.state.count}</h1>

<button type="button" onClick={this.doUpdate}>点击</button>

<Child count={this.state.count}/>

</div>

)

}

});

var Child = React.createClass({

componentWillReceiveProps: function () {  //子组件将要接受props

console.log('componentWillReceiveProps');

},

shouldComponentUpdate: function (nextProp, nextState) {

if (nextProp.count > 4) {  //子组件使用nextProp中的数据判断是否更新

return false;

}

return true;

},

render: function () {

return (

<h1>现在计数:{this.props.count}</h1>

)

}

});

React.render(<MessageBox/>,

document.getElementById('app'),

function () {

console.log('渲染完成啦!!');

}

)

9)组件公用方法可以写在mixins

var stateRecordMixin = {         //定义公用的方法内容

componentWillMount: function () {

console.log('componentWillMount')

},

componentWillUpdate: function (nextProp, nextState) {

console.log('componentWillMount')

},

selfFunction: function () {

alert('selfFunction')

}

}

var MessageBox = React.createClass({

mixins: [stateRecordMixin],   //加载公用的mixin方法,数组形式

getInitialState: function () {

return {

count: 0

}

},

render: function () {

return (

<div>

<button type="button" onClick={this.selfFunction}>点击</button>        //此处即可调用该公用方法中的内容

<Child count={this.state.count}/>

</div>

)

}

});

var Child = React.createClass({

mixins: [stateRecordMixin],    //加载公用的mixin方法,数组形式

render: function () {

return (<div>

<button type="button" onClick={this.selfFunction}>点击</button>

</div>

)

}

});

React.render(<MessageBox/>,

document.getElementById('app'),

function () {

console.log('渲染完成啦!!');

}

)

React.js基础知识的更多相关文章

  1. React JS 基础知识17条

    1. 基础实例 <!DOCTYPE html> <html> <head> <script src="../build/react.js" ...

  2. [JS复习] JS 基础知识

    项目结尾,空闲时间,又把<JS 基础知识> 这本书过了一遍,温故知新后,很多知其然不知其所以然的内容 豁然开朗. [1. 用于范围的标签] display  :inline or bloc ...

  3. HTML+CSS+JS基础知识

    HTML+CSS+JS基础知识 目录 对HTML+CSS+JS的理解 基础知识 对HTML+CSS+JS的理解 基础知识 插入样式表的三种方式 外部样式表:<link rel="sty ...

  4. Node.js基础知识

    Node.js入门   Node.js     Node.js是一套用来编写高性能网络服务器的JavaScript工具包,一系列的变化由此开始.比较独特的是,Node.js会假设在POSIX环境下运行 ...

  5. 网站开发进阶(十五)JS基础知识充电站

    JS基础知识充电站 1.javascript alert弹出对话框时确定和取消两个按钮返回值? 用的不是alert对话框,是confirm confirm(str); 参数str:你要说的话或问题: ...

  6. NodeJs>------->>第三章:Node.js基础知识

    第三章:Node.js基础知识 一:Node.js中的控制台 1:console.log.console.info  方法 console.log(" node app1.js 1> ...

  7. JS基础知识笔记

    2020-04-15 JS基础知识笔记 // new Boolean()传入的值与if判断一样 var test=new Boolean(); console.log(test); // false ...

  8. React.js学习知识小结(一)

    学习React也有半个月了吧,这里对所学的基础知识做个简单的总结.自己先是跟着官方文档学,差不多学了四五天,也跟着入门教程做了一个简单的小栗子.然后跟着阮一峰老师的教程上手了几个小Demo,后来在网上 ...

  9. React入门---基础知识-大纲-1

    -----------------在慕课网学习react入门笔记-------------- ---------博主边学边记录,手把手进行学习及记录---------- --------------- ...

随机推荐

  1. SpringMVC接收前端传值有哪些方式?

    有很多种,比如: 1.通过@RequestParam注解接收请求参数: 2.通过Bean封装,接收多个请求参数 3.通过@ModelAttribute绑定接收前端表单数据 4.通过@PathVaria ...

  2. python2.7练习小例子(二十八)

    28):题目:请输入星期几的第一个字母来判断一下是星期几,如果第一个字母一样,则继续判断第二个字母.     程序分析:用情况语句比较好,如果第一个字母一样,则判断用情况语句或if语句判断第二个字母. ...

  3. 通过py2exe打包python程序的过程中,解决的一系列问题

    py2exe的使用方法参考<py2exe使用方法>. 注:程序可以在解释器中正常运行,一切问题都出在打包过程中. 问题1: 现象:RuntimeError: maximum recursi ...

  4. python基础——列表、字典

    Python核心数据类型--列表 列表是一个任意类型的对象的位置相关的有序集合,它没有固定的大小.大小可变的,通过偏移量进行赋值以及其他各种列表的方法进行调用,能够修改列表.其他更多的功能可以查阅py ...

  5. jmeter动态获取jsessionid

    思想是在一个线程组内添加一个cookie管理器,登录之后,用正则提取到sessionid,该线程组下的操作便可以共享这个session了. 1. 依次新建线程组.cookie管理器.http请求-登录 ...

  6. TortoiseGit小乌龟 git管理工具

    1.新建分支git远端新建分支: b001本地git目录:右击--TortoiseGit--获取(会获取到新建分支) 2.本地新建分支对应远端分支本地新建分支:b001 关联远端分支b001(之后工作 ...

  7. 「日常训练」 Soldier and Traveling (CFR304D2E)

    题意 (CodeForces 546E) 对一个无向图,给出图的情况与各个节点的人数/目标人数.每个节点的人只可以待在自己的城市或走到与他相邻的节点. 问最后是否有解,输出一可行解(我以为是必须和答案 ...

  8. PHP的array_merge()合并数组

    ,4];print_r(array_merge($arr1,$arr2));返回结果:Array(    [a] => 3    [b] => 2    [0] => 4)1注释:当 ...

  9. NO7——二分

    int binsearch(int *t,int k,int n) {//t为数组,k是要查找的数,n为长度,此为升序 ,high = n,mid; while(low<=high) { mid ...

  10. Spring MVC温故而知新 – 参数绑定、转发与重定向、异常处理、拦截器

    请求参数绑定 当用户发送请求时,根据Spring MVC的请求处理流程,前端控制器会请求处理器映射器返回一个处理器,然后请求处理器适配器之心相应的处理器,此时处理器映射器会调用Spring Mvc 提 ...