React入门（二）

三、React组件

React 组件基本上是由组件的构建方式、组件内的状态属性与生命周期方法组成

• React.createClass

用 React.createClass 构建组件是 React 最传统、也是兼容性最好的方法。在 0.14 版本发布之前，这一直都是React官方唯一指定的组件写法，如下：

const Button = React.createClass({
    getDefaultProps() {
        return {
            color: 'blue',
            text: 'Confirm',
      };
    },
    render() {
        const { color, text } = this.props;
        return (
            
            {text}
            
        );
    }
});

• ES6 classes
  ES6 classes 的写法是通过 ES6 标准的类语法的方式构建方法：

import React, { Component } from 'react';
class Button extends Component {
    constructor(props) {
        super(props);
    }
    static defaultProps = {
        color: 'blue',
        text: 'Confirm',
    };
    render() {
        const { color, text } = this.props;
        return (
            
            {text}
            
        );
    }
}

四、React数据流

在 React 中，数据是自顶向下单向流动的，即从父组件到子组件。这条原则让组件之间的关系变得简单且可预测。

state与props是React组建中最重要的概念。如果顶层组件初始化props，那么React会乡下遍历整颗组件树，重新尝试渲染所有相关的子组件。而state只关心每个组件自己内部的状态，这些状态只能在组件内改变。把组件看成一个函数，那么它接受了props作为参数，内部由state作为函数的内部参数，返回一个Virtual DOM的实现。

state

state用于管理组件内部的状态，当state状态发生变化时，该组件就会尝试重新渲染。例如实现一个计数器的组件：

import React, { Component } from 'react';

class App extends Component {

  constructor(props){
    super(props);

    this.handleClick = this.handleClick.bind(this);
    this.state = {
      count: 0,
    };
  }

  handleClick(e) {
    e.preventDefault();

    this.setState({
        count: this.state.count + 1,
    });
  }

  render() {
    return (
      

        
{this.state.count}
          更新
      
    );
  }
}

export default App;

在React中常常在事件处理方法中更新state，上述例子就是通过点击“更新”按钮不断地更新内部count的值，这样就可以把组件内状态封装在实现中。

props

props是React用来让组件之间互相联系的一种机制，通俗的说就像方法参数一样。React的单向数据流，主要的流动管道就是props。

function HelloMessage(props) {
    return 
Hello {props.name}!
;
}
 
const element = ;
 
ReactDOM.render(
    element,
    document.getElementById('example')
);

五、React组件的生命周期

React组件的生命周期可分为三个状态：

• Mounting：已插入真实 DOM
• Updating：正在被重新渲染
• Unmounting：已移出真实 DOM

生命周期的方法有：

组件挂载时

• componentWillMount 在render()方法前调用,在客户端也在服务端。

• componentDidMount 在第一次render()方法后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。

import React, { Component, PropTypes } from 'react';

class App extends Component{
  static propTypes = {
    // ...
  };
  
  static defaultPorps = {
      // ...
  };
  
  constructor(props) {
    super(props);
    
    this.state = {
      // ...
    };
  }
  
  componentWillMount(){
    // ...
  }
  
  componentDidMount(){
    // ...
  }
  
  render(){
    return 
This is a demo
;
  }
  
  
}

componentWillMount和componentDidMount只会在组件初始化时运行一次。如果在componentWillMount方法中执行setState方法，组件会更新state，但是组件只渲染一次；如果在componentDidMount中执行setState方法，初始化时组件会渲染两次

组件更新时

• componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。

• shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
  可以在你确认不需要更新组件时使用。

• componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。

• componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。

import React, { Component, PropTypes } from 'react';

class App extends Component {
  componentWillReceiveProps(nextProps) {
    //
  }
  
  shouldComponentUpdate(nextProps, nextState) {
    //
  }
  
  componentWillUpdate(nextProps, nextState) {
    //
  }
  
  componentDidUpdate(preProps, prevState) {
    //
  }

  render(){
    return 
This is a demo
;
  }
}

组件卸载时

• componentWillUnmount在组件从 DOM 中移除之前立刻被调用。

import React, { Component, PropTypes } from 'react';

class App extends Component {
 componentWillUnmount(){
   // ...
 }

  render(){
    return 
This is a demo
;
  }
}

生命周期整体流程

React生命周期整体流程图

React组件API

• 设置状态：setState

setState(object nextState[, function callback])

• 替换状态：replaceState

replaceState(object nextState[, function callback])

• 设置属性：setProps

setProps(object nextProps[, function callback])

• 替换属性：replaceProps

replaceProps(object nextProps[, function callback])

• 强制更新：forceUpdate

forceUpdate([function callback])

• 获取DOM节点：findDOMNode

DOMElement findDOMNode()

• 判断组件挂载状态：isMounted

bool isMounted()

参考：
《深入React技术栈》 陈屹峰著
http://www.runoob.com/react/