Hello react

来源:互联网 发布:阿里云客服怎么样 编辑:程序博客网 时间:2024/05/18 03:01
<style>        .wm-h{                color:red;            }        </style>    </head>    <body>    <div id="app"></div>    <script type="text/babel">    var Comp=React.createClass({        render:function(){           return <div style={{fontSize:'30px'}} className="wm-h">{this.props.name} <h1>我就试试{this.props.title}</h1></div>;        }    });       ReactDOM.render(        <Comp name="666" title="44944"/>,        document.getElementById('app')        );    </script>

React.createClass声明组件
ReactDOM.render(component,挂载点)
jsx 中 style={{key:value}}形式 key 用驼峰命名
class为 className=”

React Components Lifecycle

hook :

Mounting

 1.getDefaultProps() 2.getInitialState() 3.componentWillMount    render 4 componentDidMount
Created with Raphaël 2.1.0getDefaultPropsgetInitialStatecomponentWillMountRendercomponentDidMount

Updating

Created with Raphaël 2.1.0componentWillReceivePropsshouldComponentUpdate(yes/no update)componentWillUpdateRendercomponentDidUpdatenext cycleyesno

Unmounting

componentWillUnmount
(个人觉得应该再添加DidUnmount 状态)

原创粉丝点击