React学习笔记（二）

刚入门的笔记写的很烂···这里非常推荐大家从阮一峰的博客开始学习React，循序渐进，从主要的API开始，逐步建立起对React的认识，熟悉了它的基本用法我们就可以再去看看实战视频或者其它更深入的书籍了。
《阮一峰 React 入门实例教程》

PropTypes

组件的属性可以接受任意值，字符串、对象、函数等等都可以。有时，我们需要一种机制，验证别人使用组件时，提供的参数是否符合要求。
组件类的PropTypes属性，就是用来验证组件实例的属性是否符合要求:

var data = "123";
var MyTitle = React.createClass({
  propTypes: {  //组件的属性必须为string，且不能为空
    title: React.PropTypes.oneOf(["123","234"]),
  },

  render: function() {
     return <h1> {this.props.title} </h1>;
   }
});

ReactDOM.render(
  <MyTitle title=data/>,
  document.getElementById("")
);

官方文档是这样描述的：React.PropTypes挂载了一系列验证器，这些验证器用于确保传递给组件的数据是合法的。其包括了如下选项：

optionalArray: React.PropTypes.array,

optionalBool: React.PropTypes.bool

optionalFunc: React.PropTypes.func

optionalNumber: React.PropTypes.number

optionalObject: React.PropTypes.object

optionalString: React.PropTypes.string

optionalNode: React.PropTypes.node //所有能被渲染的类型：数字、文本和节点等

optionalElement: React.PropTypes.element //一个React节点类型

optionalMessage: React.PropTypes.instanceOf(Message) //指定为某个类的实例

optionalEnum: React.PropTypes.oneOf([‘News’, ‘Photos’]) //指定为数组中的某一个

optionalUnion: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.number,
React.PropTypes.instanceOf(Message)
])

requiredAny: React.PropTypes.any.isRequired //可以是任意类型，但不能为空

getDefaultProps用于设置组件属性的默认值：

getDefaultProps : function () {
  return {  //title属性的默认值被设置为‘Hello World’
    title : 'Hello World'
  };
}

真实的DOM节点

React的组件并不是真正的DOM节点，而是存在于内存中的一种数据结构，叫做virtual DOM。只有当它插入文档以后才会变成真实的DOM。所有的变动先体现在虚拟DOM上，之后再反应到真实的DOM上，这种算法可以极大的提高网页的性能表现。如果需要从组件中获取真实的DOM节点，就需要用到ref属性：

var MyComponent = React.createClass({
  handleClick: function() {  //点击button时会调用此函数
    this.refs.myTextInput.focus();  //refs.myTextInput用于获取真实的节点
    this.refs.myTextInput.value="focused";
  },
  render: function() {
    return (
      <div>
        <input type="text" ref="myTextInput" />
        <input type="button" value="Focus the text input" onClick={this.handleClick} />
      </div>
    );
  }
});

给文本框设置ref属性，然后使用this.refs.[refname]就能获得真实节点的引用。

this.state

React将组件看成是一个状态机，一开始有个初始状态，然后用户的互动导致状态变化，从而触发重新渲染（阮大神的理解）。流程如下：

var LikeButton = React.createClass({
  getInitialState: function() {
    return {flag: false};
  },
  handleClick: function(event) {
    this.setState({flag: !this.state.flag});
  },
  render: function() {
    var text = "state is: "+this.state.flag;
    return (
      <button onClick={this.handleClick}>
        You <b>{text}</b> . Click to toggle.
      </button>
    );
  }
});

getInitialState用于定义初始状态，实际是一个对象，这个对象的引用为this.state，调用this.setState之后React会自动调用this.render再次渲染组件。

表单

用户在表单填入的内容，可以用事件的target对象的value属性来获取：

var Input = React.createClass({
  getInitialState: function() {
    return {value: 'Hello!'};
  },
  handleChange: function(event) {
    this.setState({value: event.target.value});
  },
  render: function () {
    var value = this.state.value;
    return (
      <div>
        <input type="text" value={value} onChange={this.handleChange} />
        <p>{value}</p>
      </div>
    );
  }
});

组件生命周期

组件的生命周期有三个状态：

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

各个阶段可以自定义的函数如下：

初始化
getDefaultProps：只执行一次，所有实例共享默认属性；
getInitialState：每次实例化都会执行
componentWillMount：渲染之前最后一次修改状态的机会
render：只能访问props和state属性，不允许修改状态和DOM输出
componentDidMount：成功装载真正的DOM后触发，可以修改DOM
运行中
componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
render
销毁
componentWillUnmount：删除组件之前触发，一般用于清理操作

此外，React 还提供两种特殊状态的处理函数：

Ajax

下面是一个使用jQuery发起ajax的示例：

var UserGist = React.createClass({
  getInitialState: function() {
    return {
      username: '',
      lastGistUrl: ''
    };
  },

  componentDidMount: function() {  //组件加载完后发起ajax请求
    $.get(this.props.source, function(result) {
      var lastGist = result[0];
      if (this.isMounted()) {
        this.setState({  //在ajax的回调中设置状态
          username: lastGist.owner.login,
          lastGistUrl: lastGist.html_url
        });
      }
    }.bind(this));
  },

  render: function() {
    return (
      <div>
        {this.state.username}'s last gist is
        <a href={this.state.lastGistUrl}>here</a>.
      </div>
    );
  }
});

ReactDOM.render(
  <UserGist source="https://api.github.com/users/octocat/gists" />,
  document.body
);