组件的属性和方法
render
React.createClass用于生成组件类，每一个组件都要有render函数
props
组件的属性可以在组件类this.props对象上获取，如：this.props.属性名。添加组件属性，需要注意：class属性需要写成className，for属性需要写成htmlFor，因为class和for是JavaScript的保留字
<script type="text/babel">
//组件类的第一个字母需要大写，否则会报错
var HelloMessage = React.createClass({
render : function(){//所有组件必须有自己的render方法，用于输入组件
return <div><h1>Hello,{this.props.name}</h1><h2>woca,age is:{this.props.age}</h2></div>;
}
});
ReactDOM.render(
<HelloMessage name="sqliang" age="23"/>,document.getElementById('example') ); </script>
this.props.children
this.props.children表示组件的所有子节点：
<script type="text/babel">
var NotesList = React.createClass({
render : function(){
return (
<ol> { React.Children.map(this.props.children,function(child){ return <li>{child}</li>;
})
}
</ol> ); } }); ReactDOM.render( <NotesList> <span>Hello</span>
<span>hehe</span> <span>heihei</span> </NotesList>,document.body ); </script>
getDefaultProps方法设置组件属性默认值
<div id="example"></div> <script type="text/babel"> var MyTitle = React.createClass({ getDefaultProps : function(){ return { title : 'Hello,World',name : 'sqliang' }; },render : function(){ return <h1>{this.props.title},{this.props.name}</h1>;
}
});
ReactDOM.render(
<MyTitle />,document.getElementById("example") ); </script>
组件生命周期
React组件是一个状态机，接受两个输入参数：this.props和this.state，返回一个虚拟DOM
创建类
通过 React.createClass 创建的是类,React组件是有类和实例区别的。组件不允许修改自己的 props，只能通过父组件来修改。这是为了保持props的一致性。如果有需要自行修改的值，应该存在 this.state 中。
var InputState = React.createClass({
/** * 组件初始化的时候执行，必须返回一个null或者对象 * @returns {{enable: boolean,width: string,height: string,margin: string,display: string}} * 通过this.state.属性名来访问属性值 */
getInitialState : function(){
return {
enable : false,width : '200px',height : '100px',margin : '5px auto',display : 'inline-block'
};
},handleClick : function(event){//点击事件每次修改属性值后，会自动调用this.render(),再次渲染组件
this.setState({//修改初始属性值得时候要调用this.setState()来修改
enable: !this.state.enable
});
},render : function(){
return (
<p style={{width:this.state.width,height:this.state.height,margin:this.state.margin}}> <input placeholder="输入用户名" style={{display:this.state.display}} disabled={this.state.enable} className="form-control" type="text" /> <button onClick={this.handleClick} className="btn btn-default">Change State</button> <h3>{this.props.name}</h3> </p> ); } });
实例化
类创建后就可以进行实例化主要过程有以下几种组成：
- getInitialSrate：获取this.state的默认值
- componentWillMount：在render之前调用此方法，在render之前需要做的事情就在这里处理
- render：渲染并返回一个虚拟DOM
componentDidMount：在render之后，react会使用render返回的虚拟DOM来创建真实DOM，完成之后调用此方法
注意：
1. this.state只存储原始数据，不要存储计算后的数据2. componentWillMount用来处理render之前的逻辑，不要在render中处理业务逻辑。render就是一个模板的作用，值处理和展示相关的逻辑，比如格式化时间等，如果有业务逻辑，那么放在componentWillMount中执行，所以render中一定不会出现改变state之类的操作
3. render返回的是虚拟DOM，所谓虚拟DOM，其实就是React.DOM.div之类的实例，就是一个js对象，render方法完成之后，真实的DOM并不存在。
4. componentDidMount中处理和真实DOM相关的逻辑。这时候真实的DOM已经渲染出来，可以通过this.getDOMNode()方法来使用了。典型的场景就是可以在这里调用jQuery插件
更新
组件实例化完成后进入了存在期，可以响应用户操作和父组件的更新来更新视图，主要有以下过程组成：
- componentWillReceiveProps:父组件或者通过组件的实例调用setProps改变当前组件的props时调用
- shouldComponentUpdate:是否需要更新组件（慎用）
- componentWillUpdate:调用render方法之前
- render：同上
componentDidUpdate：真实DOM已经完成更新
销毁
销毁的过程调用：componentWillUnmount
组件生命周期示例代码：
var HelloComponent = React.createClass({
getDefaultProps: function(){
return {};
},getInitialState : function () {
return {};
},componentWillMount : function () {
console.log("render之前，业务逻辑代码")
},render : function () {
return (<div>Hello,{this.props.name}</div>); },componentDidMount : function () { console.log("真实DOM已好,你想调用jQuery插件吗？？"); },componentWillReceiveProps : function () { console.log("改变当前组件的props时调用"); },componentWillUpdate : function () { console.log("调用在render之前，可以添加逻辑代码"); },componentDidUpdate : function () { console.log("真实DOM已经完成更新"); } }); var helloCom1 = ReactDOM.render( <HelloComponent name="sqliang"/>,document.getElementById('div1') ); var helloCom2 = ReactDOM.render( <HelloComponent name='zcy'/>,document.getElementById('div2') );
