React简单Demo

理解了框架的原理后，那么使用框架就迫在眉睫了，如果只懂原理不知道怎么使用，是不是有些半吊子感觉，整个的思路就是这样–
原理+简单Demo（注重理解函数的api）+实战
本节讲的就是简单的Demo，废话不多说
使用React的最基本的几个概念：
首先明白：React注重view层
state
React把页面划分为一个个组件，每一个组件的view展示都是由state决定的，如果没有state，就是无状态组件，通过配置的方式展示view（这是react最推崇的）。
无状态组件：就是调用组件、出来一个view，最理想的
有状态组件：
初始化：this.state={config：conf}
修改状态：this.setState({config:conf});//必须以键值对方式赋值，否则不会渲染组件，如果使用this.state.config=conf,不会生效
props
props主要用来在组件之间传递消息，父组件向子组件传递数据，那么子组件怎么向父组件传递数据呢？父组件向子组件传递一个回调函数，当然随着组件层级的增加，不同的组件之间传递数据会显得比较麻烦，那么最好的方式就是观察者模式，在这里就不做赘述了，主要讲解props的使用

class Parent extends React.Component{        render(){                    return <Child msg="父亲给儿子的问候">；        }}class Child extends React.Component{        render<div{this.props.msg}/>}

生命周期
React的生命周期，简单来说就是定义了组件的整个活动过程，从过程的角度来看就是怎么样组件什么时候会调用什么函数。
让我们来看看有哪些大名鼎鼎的API
组件装载机阶段：
constructor() //构造函数最开始调用
componentWillMount()
render()
componentDidMount()
更新组件阶段：
componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()
移除组件：
componentWillUnmount()
其他API
setState()
forceUpdate()
defaultProps
displayName
下面通过一个简单的例子来说明整个流程：

import React from 'react'import ReactDOM from 'react-dom'export default class Demo extends React.Component{        constructor(props){            super(props);            console.log("....Constructor!....");            console.log(this.props.color);            this.state={                state:'start'            };        }        componentWillMount(){            console.log("....Will Mount!...."+this.state.state);        }        render(){            console.log("....Render!...."+this.state.state);            return <div><button onClick={this.cl.bind(this)}>Demo</button>                    <button onClick={this.force.bind(this)}>Force</button></div>        }        componentDidMount(){            console.log("....Mount Done!...."+this.state.state);        }        componentWillReceiveProps(){            console.log('Receive new color.....'+this.props.color);            console.log("....Will receive props!...."+this.state.state);        }        shouldComponentUpdate(){            console.log("....Should update!...."+this.state.state);            return true; //默认返回true，返回false将不会渲染组件        }        componentWillUpdate(){            console.log("....Will Update!...."+this.state.state);        }        componentDidUpdate(){            console.log("....Did update!...."+this.state.state);        }        componentWillUnmount(){            console.log("Will mount"+this.state.state);        }        cl(){            this.setState({                state:"change"            })        }        force(){            this.setState({                state:"force"            })            this.forceUpdate();        }}//如果不传递参数进来就是color defaultDemo.defaultProps = {    color: 'color default'}

//将组件渲染到界面上去ReactDOM.render(<Demo/>,document.getElementById('main'));//如果传递参数，color default就变成 new colorReactDOM.render(<Demo color="new color"/>,document.getElementById('main'));

输出结果为：
运行结果如图所示：

其实，简单来讲，React的生命周期，提供给用户在各个阶段，可以操作控件的接口，类似Java中的切面编程（比喻可能不是很确切。。。。），随时插入。