React进阶（三）

React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。

由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。

一、获取真实的DOM节点

组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。但是，有时需要从组件获取真实 DOM 的节点，这时就要用到 ref属性。示例代码如下：

代码运行结果如下：

运行结果显示

部分代码如下：

var MyComponent = React.createClass({
  handleClick: function() {
    this.refs.myTextInput.focus();
  },
  render: function() {
    return (
      

        
        
      
    );
  }
});

ReactDOM.render(
  ,
  document.getElementById('example')
);

上面代码中，组件 MyComponent 的子节点有一个文本输入框，用于获取用户的输入。这时就必须获取真实的 DOM 节点，虚拟 DOM 是拿不到用户输入的。为了做到这一点，文本输入框必须有一个ref属性，然后 this.refs.[refName]就会返回这个真实的 DOM 节点。

需要注意的是，由于 this.refs.[refName]属性获取的是真实 DOM ，所以必须等到虚拟 DOM 插入文档以后，才能使用这个属性，否则会报错。上面代码中，通过为组件指定 Click 事件的回调函数，确保了只有等到真实 DOM 发生 Click 事件之后，才会读取 this.refs.[refName]属性。

React 组件支持很多事件，除了 Click事件以外，还有 KeyDown 、Copy
、Scroll等，完整的事件清单请查看官方文档。

二、this.state

组件免不了要与用户互动，React 的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI 。示例代码如下：

代码运行结果如下：

代码显示结果

部分代码如下：

var LikeButton = React.createClass({
  getInitialState: function() {
    return {liked: false};
  },
  handleClick: function(event) {
    this.setState({liked: !this.state.liked});
  },
  render: function() {
    var text = this.state.liked ? 'like' : 'haven\'t liked';
    return (
      

        You {text} this. Click to toggle.
      
    );
  }
});

ReactDOM.render(
  ,
  document.getElementById('example')
);

上面代码是一个 LikeButton 组件，它的 getInitialState 方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取。当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。

由于 this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。

三、表单

用户在表单填入的内容，属于用户跟组件的互动，所以不能用 this.props 读取。示例代码如下：

代码运行结果如下：

代码运行显示

部分代码如下：

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 (
      

        
        
{value}
      
    );
  }
});

ReactDOM.render(, document.body);

上面代码中，文本输入框的值，不能用 this.props.value读取，而要定义一个 onChange事件的回调函数，通过event.target.value读取用户输入的值。textarea元素、select元素、radio元素都属于这种情况，更多介绍请参考官方文档。

在码代码的过程中碰到不能理解的东西，再去找找这个东西是什么？拿来做什么？觉得理解得差不多了继续阅读学习。如果觉得理解差不多了就收工，抱着等以后会用到的时候再来深究，其实这样并不好。

我们身为码农， 就是要一直码代码一直码代码，但是在码代码的过程中想想这个来实现什么功能模块，学习下别人的思路（但是也不要丢掉个人的想法盲目的追寻）及写代码的规范等等。过程虽慢，但是收获绝对比只看不练多得多（个人理解），这是我最近以来亲身体会。 道理谁都懂……只看愿不愿意花时间在练代码上了。

加油！愿生活对努力的人温柔以待！！！