react学习系列之states与props

state

React 把组件当作是一个状态机（State Machines）。经过与用户的交互，实现不一样状态，而后渲染 UI，让用户界面和数据保持一致。
React 里，只需更新组件的 state，而后根据新的 state 从新渲染用户界面（不要操做 DOM）。

state工做原理
经常使用的通知React数据变化的方法是调用setState(data,callback).这个方法会合并data到this.state,并从新渲染组件.渲染完成后,调用可选的callback回调.大部分状况不须要提供callback,由于React会负责吧界面更新到最新状态.
经常使用的模式就是建立多个只负责渲染数据的无状态(stateless)组件,在他们的上层建立一个有状态(stateful)组件并把它的状态经过props传给子级.有状态的组件封装了全部的用户交互逻辑,而这些无状态组件只负责声明式地渲染数据.
下面使用es6的class的方式实现一个likedbutton

import React from 'react';
import ReactDOM from 'react-dom';

class LikedButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      liked : props.liked || false
    }
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState({
      liked: !this.state.liked
    });
  }
  render() {
    var text = this.state.liked ? '喜欢' : '不喜欢';
    return (
      <div onClick={this.handleClick}>
        Your text is {text}. Click to say.
      </div>
    );
  }
}

LikedButton.propTypes = {
  liked : React.PropTypes.boolean
}

LikedButton.defaultprops = {
  liked: false
}

ReactDOM.render(
  <LikedButton/>,
  document.getElementById('app')
);

props

组件中的props是一种父级向子级传递数据的方式.
state 和 props 主要的区别在于 props 是不可变的，而 state 能够根据与用户交互来改变。这就是为何有些容器组件须要定义 state 来更新和修改数据。 而子组件只能经过 props 来传递数据。
能够经过 getDefaultProps() 方法为 props 设置默认值
Props 验证使用 propTypes，它能够保证咱们的应用组件被正确使用，React.PropTypes 提供不少验证器 (validator) 来验证传入数据是否有效。当向 props 传入无效数据时，JavaScript 控制台会抛出警告。

验证器说明

propTypes: {
    // 能够声明 prop 为指定的 JS 基本数据类型，默认状况，这些数据是可选的
   optionalArray: React.PropTypes.array,
    optionalBool: React.PropTypes.bool,
    optionalFunc: React.PropTypes.func,
    optionalNumber: React.PropTypes.number,
    optionalObject: React.PropTypes.object,
    optionalString: React.PropTypes.string,

    // 能够被渲染的对象 numbers, strings, elements 或 array
    optionalNode: React.PropTypes.node,

    //  React 元素
    optionalElement: React.PropTypes.element,

    // 用 JS 的 instanceof 操做符声明 prop 为类的实例。
    optionalMessage: React.PropTypes.instanceOf(Message),

    // 用 enum 来限制 prop 只接受指定的值。
    optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),

    // 能够是多个对象类型中的一个
    optionalUnion: React.PropTypes.oneOfType([
      React.PropTypes.string,
      React.PropTypes.number,
      React.PropTypes.instanceOf(Message)
    ]),

    // 指定类型组成的数组
    optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),

    // 指定类型的属性构成的对象
    optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),

    // 特定 shape 参数的对象
    optionalObjectWithShape: React.PropTypes.shape({
      color: React.PropTypes.string,
      fontSize: React.PropTypes.number
    }),

    // 任意类型加上 `isRequired` 来使 prop 不可空。
    requiredFunc: React.PropTypes.func.isRequired,

    // 不可空的任意类型
    requiredAny: React.PropTypes.any.isRequired,

    // 自定义验证器。若是验证失败须要返回一个 Error 对象。不要直接使用 `console.warn` 或抛异常，由于这样 `oneOfType` 会失效。
    customProp: function(props, propName, componentName) {
      if (!/matchme/.test(props[propName])) {
        return new Error('Validation failed!');
      }
    }
  },
  /* ... */
});