React-组件的生命周期
1.组件的生命周期
组件的生命周期分成三个状态:
-
Mounting:已插入真实 DOM
-
Updating:正在被重新渲染
-
Unmounting:已移出真实 DOM
React 为每个状态都提供了两种处理函数,will 函数在进入状态之前调用,did 函数在进入状态之后调用,三种状态共计五种处理函数。
-
componentWillMount()---render之前最后一次修改状态的机会
-
componentDidMount()---成功render并渲染完成真实DOM之后触发,可以修改DOM
-
componentWillUpdate(object nextProps, object nextState)
-
componentDidUpdate(object prevProps, object prevState)
-
componentWillUnmount()
此外,React 还提供两种特殊状态的处理函数。
-
componentWillReceiveProps(object nextProps):已加载组件收到新的参数时调用
-
shouldComponentUpdate(object nextProps, object nextState):组件判断是否重新渲染时调用
注意:render只能访问this.props和this.state,只有一个顶层组件,不允许修改状态和DOM输出
2.React中的Ajax使用
组件的数据来源,通常是通过 Ajax 请求从服务器获取,可以使用 componentDidMount
方法设置 Ajax 请求,等到请求成功,再用 this.setState
方法重新渲染 UI
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>测试获取数据</title> <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="container"></div> </body> <script type="text/babel" > $(document).ready(function(){ var UserGist=React.createClass({ getInitialState:function(){ return { username:'', lastGistUrl: '' }; }, componentDidMount:function(){ $.get(this.props.source,function(result){ var lastGist=result[0]; if(this.isMounted()){ this.setState({ username:lastGist.owner.login, lastGistUrl:lastGist.html_url }); } }.bind(this)); }, render:function(){ return ( <div> {this.state.username}'s last gist is <a href={this.state.lastGistUrl}>here</a>. </div> ); } }); ReactDOM.render(<UserGist source="https://api.github.com/users/octocat/gists"/>,document.getElementById('container')); }); </script> </html>
要获取的数据是:https://api.github.com/users/octocat/gists里面的JSON数据
效果:
上面代码使用 jQuery 完成 Ajax 请求,这是为了便于说明。React 本身没有任何依赖,完全可以不用jQuery,而使用其他库。
使用get()方法以GET方式从服务器获取数据
使用get()方法时,采用GET方式向服务器请求数据,并通过方法中回调函数的参数返回请求的数据,它的调用格式如下:
$.get(url,[callback])
参数url为服务器请求地址,可选项callback参数为请求成功后执行的回调函数。
使用bind()方法绑定元素的事件
bind()方法绑定元素的事件非常方便,绑定前,需要知道被绑定的元素名,绑定的事件名称,事件中执行的函数内容就可以,它的绑定格式如下:
$(selector).bind(event,[data] function)
绑定元素的多个事件时,只需将事件用空格符隔开
$("#test").bind("change click",function(){});
参数event为事件名称,多个事件名称用空格隔开,function为事件执行的函数。
总结:
(1)ReactJs是基于组件化的开发,所以最终你的页面应该是由若干个小组件组成的大组件。
(2)可以通过属性,将值传递到组件内部,同理也可以通过属性将内部的结果传递到父级组件;要对某些值的变化做DOM操作的,要把这些值放到state中。
(3)为组件添加外部css样式时,类名应该写成className而不是class;添加内部样式时,应该是style={{opacity: this.state.opacity}}而不是style="opacity:{this.state.opacity};"。
(4)组件名称首字母必须大写。
(5)变量名用{}包裹,且不能加双引号。
参考文档:
http://www.ruanyifeng.com/blog/2015/03/react.html
http://www.cocoachina.com/webapp/20150721/12692.html