React ---- 浅谈ReactJs

标签：body   方式   render   实例   create   dup   reac   idm   dom   

1、Hello  React 简单组件搭建。

var HelloReact = React.createClass({

　　render: function() {

　　　　return (

　　　　　　<div>Hello React!</div>

　　　　)

　　}

});

ReactDOM.render(

　　<HelloReact />,

　　document.querySelector(‘body‘);

)

2、React 生命周期(初始化、更新和销毁);

1. getDefaultProps  // 创建组建props
2. getInitalState  // 实例化状态
3. componentWillMount // 挂载前
4. componentDidMount // 挂载后
5. componentWillReceiveProps // 属性被改变时
6. shouldComponentUpdate // 是否跟新
7. componentWillUpdate // 更新前
8. componentDidUpdate // 更新后
9. componentWillUnmount  // 销毁前

3、React 数据初始化，而React为我们提供了两种方式来向组件传递数据，即 props 和 state。

// props 传递

　　var  HelloReact = React.createClass({

　　　　getDefaultProps: function() {

　　　　　　return {

　　　　　　　　data: "  "

　　　　　　}

　　　　},

　　　　render: function() {

　　　　　　return (

　　　　　　　　<div>

　　　　　　　　　　{this.props.data}

　　　　　　　　</div>

　　　　　　)

　　　　}

　　})

　　ReactDOM.render(

　　　　<HelloReact  data={" Hello React! "} />,

　　　　document.querySelector("body")

　　)

// state 不通过外部传递

　　var HelloReact = React.createClass({

　　　　getInitialState:function() { return data: "  " },

　　　　componentDidMount:function() { this.requestData(); },

　　　　requestData: function() {
　　　　　　$.ajax({

　　　　　　　　url: " http://www.baidu.com ",

　　　　　　　　data: {},

　　　　　　　　success: function(data) {

　　　　　　　　　　this.setState({

　　　　　　　　　　　　data: data

　　　　　　　　　　})

　　　　　　　　}

　　　　　　}.bind(this));

　　　　},

　　　　render: function() {

　　　　　　return (

　　　　　　　　<div>

　　　　　　　　　　{ this.state.data }

　　　　　　　　</div>

　　　　　　)

　　　　}

　　});

　　React.render(

　　　　<HelloReact  />,

　　　　document.querySelector("body");

　　)

React ---- 浅谈ReactJs

标签：body   方式   render   实例   create   dup   reac   idm   dom   

原文地址：http://www.cnblogs.com/GongYaLei/p/7787715.html