1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <script src="../build/react.js"></script>
    5. <script src="../build/react-dom.js"></script>
    6. <script src="../build/browser.min.js"></script>
    7. </head>
    8. <body>
    9. <div id="example"></div>
    10. <script type="text/babel">
    11. var Hello = React.createClass({
    12. getInitialState: function () {
    13. return {
    14. opacity: 1.0
    15. };
    16. },
    17. componentDidMount: function () {
    18. this.timer = setInterval(function () {
    19. var opacity = this.state.opacity;
    20. opacity -= .05;
    21. if (opacity < 0.1) {
    22. opacity = 1.0;
    23. }
    24. this.setState({
    25. opacity: opacity
    26. });
    27. }.bind(this), 100);
    28. },
    29. render: function () {
    30. return (
    31. <div style={{opacity: this.state.opacity}}>
    32. Hello {this.props.name}
    33. </div>
    34. );
    35. }
    36. });
    37. ReactDOM.render(
    38. <Hello name="world"/>,
    39. document.getElementById('example')
    40. );
    41. </script>
    42. </body>
    43. </html>
    45. 01、组件的生命周期分成三个状态
    46. Mounting 已插入真实DOM
    47. Updating 正在被重新渲染
    48. Unmounting 已移出真实DOM
    50. React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用
    51. 三种状态共计五种处理函数
    52. componentWillMount()
    53. componentDidMount()
    54. componentWillUpdate(object nextProps,object nextState)
    55. componentDidUpdate(object nextProps,object nextState)
    56. componentWillUnmount()
    58. 另两种特殊处理函数
    59. componentWillReceiveProps(object nextProps) 已加载组件收到新的参数时调用
    60. shouldComponentUpdate(object nextProps, object nextState) 组件判断是否重新渲染时调用
    62. 02、上面代码在hello 组件加载以后，通过componentDidMount 方法设置一个定时器，每隔100毫秒，
    63. 就重新设置组件的透明度，从而引发重新渲染。
    65. 03、React 中的对象写法
    66. style ={{opacity:this.state.opacity}} -->外面一层是javascript语法，里面一个是对象