<html> <head> <title>...
<html> <head> <title>hello world React.js</title> <script src="build_0.13/react.min.js"></script> <script src="build_0.13/JSXTransformer.js"></script> </head> <body> <div id="e"></div> <script type="text/jsx"> var Hello = React.createClass({ getInitialState:function(){ return {opacity:1.0}; }, componentDidMount:function(){ this.timer = setInterval(function(){ var opacity = this.state.opacity; opacity -= 0.1; 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> ); } }); //添加组件到e中 React.render( <Hello name="world" />, document.getElementById("e") ); </script> </body></html>
组件的生命周期
组件的生命周期分成三个状态：
Mounting：已插入真实 DOM
Updating：正在被重新渲染
Unmounting：已移出真实 DOM
React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。
componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()
此外，React 还提供两种特殊状态的处理函数。
componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用
版权声明
本文仅代表作者观点，不代表百度立场。
本文系作者授权百度百家发表，未经许可，不得转载。
上一篇：SpringMVC注解之@JsonView 下一篇：java 字节码 指令集 汇编
