React基础(二)

NO.7获取真实的DOM

组件其实只是存在内存中的一种数据结构，叫做虚拟DOM（virtual DOM），只有插入文档以后，才变成真实的DOM，据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。
假设有一个名为Name的组件，组件代码如下：

class Name extends React.Component {
render () {
  return (
    <div>
      <input type="text"/>
      <input type="button" value="Focus the text input" />
    </div>
    );
  }
}

这个组件渲染出来的视图为一个输入框和一个按钮。如果想要拿到用户输入的数据，就必须获取真实DOM的节点，所以，需要给输入框加入ref属性。然后this.refs.[refName]就能获取到真实的DOM节点。
另外值得注意的是，想要获取真实DOM，必须等虚拟DOM插入到文档之后，才能成功获取，所以this.refs.[refName]方法必须确保真实DOM存在后再使用，所以为组件指定click回调函数。代码改为如下：

class Name extends React.Component {
render (){
  return (
    <div>
      <input type="text" ref="myTextInput" />
      <input type="button" value="Focus the text input" onClick={this.handleClick} />
    </div>
    );
  }
  handleClick(){
  let va = this.refs.myTextInput.value;
  console.log(va);
  }
}

根据ES6语法，变量命名需要加上let,否则会报错。
运行代码，点击按钮获取输入框的值，仍然报错
Uncaught TypeError: Cannot read property 'refs'。
原因是onClick={this.handleClick}需要加入bind(this),改为onClick={this.handleClick.bind(this)}
,现在就能成功获取输入框里的值了。

NO.8 状态（this.state）

组件的状态，用来和用户互动，组件一开始有一个状态，然后用户操作导致状态改变，从而改变状态，根据状态重新渲染页面。

class Name extends React.Component {
   constructor(props) {
    super(props);
    this.state = {liked: false};
   }
  render () {
    let text  = this.state.liked? "喜欢" : "不喜欢";
    return (
      <div>
        <input type="text" ref="myTextInput" />
        <input type="button" value={text} onClick={this.handleClick.bind(this)} />
      </div>
    );
  }
  handleClick(){
  let va = this.refs.myTextInput.value;
  this.setState({liked: !this.state.liked});
  console.log(va);
  }
}

以上就是根据用户的操作改变当前组件的状态，根据用户点击按钮，交替显示喜欢还是不喜欢。相当于一个点赞按钮。

ES6写法，初始化组件的状态

  constructor(props) {
    super(props);
    this.state = {liked: false};
   }

将组件状态设置为当前状态相反状态

this.setState({liked: !this.state.liked});

NO9.表单

文本输入框的值，不能用 this.props.value 读取，而要定义一个 onChange 事件的回调函数，通过 event.target.value 读取用户输入的值。textarea 元素、select元素、radio元素都属于这种情况。

'use strict';

import React from "react";


class Input extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value : "hello"};
   }
  render () {
    let value = this.state.value;
    return (
      <div>
        <input type="text" value={value} onChange={this.handleChange.bind(this)} />
      </div>
    )
  }
  handleChange(event){
    this.setState({value: event.target.value});
    let a = this.state.value
    console.log(a);
  }
}

export { Input as default };

如上代码，input里面的value只能用过onChange={this.handleChange.bind(this)}这个方法来获得，将value和状态绑定在一起，当输入框改变时，改变组件状态，将value存入状态中，读取输入框的数据时，只能读取状态里的value。

NO.10 组件的生命周期

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

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

React为每个状态提供了两种处理函数，will在进入状态之前用，did在进入状态之后调用。

• componentWillMount()
• componentDidMount()
• componentWillUpdate(object nextProps, object nextState)
• componentDidUpdate(object prevProps, object prevState)
• componentWillUnmount()

下面一段实例代码来说明生命周期：

'use strict';
import React from "react";

class Input extends React.Component {
  constructor(props) {
    super(props);
    this.state = {opacity : 1.0};
   }
   componentDidMount() {
    this.timer = setInterval(function () {
      var opacity = this.state.opacity;
      opacity -= .05;
      if (opacity < 0.1) {
        opacity = 1.0;
      }
      this.setState({
        opacity: opacity
      });
    }.bind(this), 100);
   }
  render () {
    let value = this.state.value;
    return (
      <div>
        <input type="text" style={{opacity: this.state.opacity}} />
      </div>
    )
  }
}

export { Input as default };

componentDidMount方法在已经插入真实DOM后之后，每100ms修改input框的透明度，当透明度被修改的时候，状态对应修改，又需要重新
渲染DOM，会产生输入框一直输入的效果。

注意的是：style={% raw %}{{opacity: this.state.opacity}}{% endraw %}应该写成这样，这是因为 React 组件样式是一个对象。

NO.11 Ajax

组件的数据来源，通常是通过 Ajax 请求从服务器获取，可以使用 componentDidMount 方法设置 Ajax 请求，等到请求成功，再用 this.setState 方法重新渲染 UI

var UserGist = React.createClass({
  getInitialState: function() {
    return {
      username: '',
      lastGistUrl: ''
    };
  },
  componentDidMount: function() {
    $.get(this.props.source, function(result) {
      var lastGist = result[0];
      if (this.isMounted()) {
        this.setState({
          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
);

（完）

参考资料：React 入门实例教程（阮一峰）