React组件API

在本章节中我们将讨论React组件API.我们将讲解一下7个方法：

• 设置状态:setState
• 替换状态:replaceState
• 设置属性:setProps
• 替换属性:replaceProps
• 强制更新:forceUpdate
• 获取DOM节点:findDOMNode
• 判断组件挂载状态:isMounted

  设置状态setState

  setState(object nextState[, function callback])

  参数说明

• nextState,将要设置得新状态，该状态会和当前得state合并
• callback，可选参数，回调函数。该函数会在setState设置成功，且组件重新渲染后调用。
  合并nextState和当前state,并重新渲染组件。setState是React事件处理函数中和请求回调函数中触发UI更新得主要方法。

  关于setState

  不能再组件内部通过this.state修改状态，因为该状态会在调用setState()后被替换。
  setState()并不会立即改变this.state,而是创建一个即将处理的state.setState()并不一定是同步得，为了提升性能React会批量执行state和DOM渲染。
  setState()总是会出发一次组件重绘，除非在shouldComponentUpdate()中实现了一些条件渲染逻辑。

  class Counter extends React.Component{
      constructor(props){
          super(props);
          this.state = {clickCount: 0};
          this.handleClick = this.handleClick.bind(this);
      }
  
      handleClick(){
          this.setState(function(state){
              return {clickCount: state.clickCount + 1};
          });
      }
      render(){
          return (<h2 onClick={this.handleClick}>点我！点击次数为:{this.state.clickCount}</h2>);
      }
  }
  ReactDOM.render(
      <Counter />,
      document.getElementById('example')
  );

  实例中通过点击h2标签来使得点击计数器加1

  替换状态：replaceState

  replaceState(object nextState[, function call back])

• nextState,将要设置的新状态，该状态会替换当前的state.
• callback,可选参数，回调函数，该函数会在replaceState设置成功，且组件重新渲染后调用。
  设置组件属性，并重新渲染组件。
  props相当于组件的数据量，它总会从父组件向下传递至所有的子组件中，当和一个外部的JavaScript应用集成时，我们可能会需要想组件传递数据或者通知React.render()组件需要重新渲染，可以使用setProps().
  更新组件，我可以在节点上再次调用React.render(),也可以通过setProps()方法改变组件属性，出发组件重新渲染。

  替换属性:replaceProps

  replaceProps(object nextProps[, function callback])

• nextProps,将要设置的新属性，该属性会替换当前的props.
• callback,可选参数，回调函数，该函数会在replaceProps设置成功，且组件重新渲染后调用。
  replaceProps()方法与setProps类似，但它会删除原有的props.

  强制更新:forceUpdate

  forceUpdate([function callback])

  参数说明
• callback,可选参数，回调函数，该函数会在组件render()方法调用后调用。
  forceUpdate()方法会使组件调用自身的render()方法重新渲染组件，组件的子组件也会调用自己的render(),但是，组件重新渲染时，依然会读取this.props和this.state，如果状态没有改变，那么React只会更新DOM。
  forceUpdate()方法适用于this.props和this.state之外的组件重绘（如:修改了this.state后),通过该方法通知React需要调用render()
  一般来说，应该尽量避免使用forceUpdate(),而仅从this.props和this.state中读取状态并由React触发render()调用

  获取DOM节点:findDOMNode

  DOMElement fundDOMNode()

• 返回值：DOM元素DOMElement
  如果组件已经挂载到DOM中，该方法返回对应的本地浏览器DOM元素。当render返回null或false时，this.findDOMNode()也会返回null，从DOM中读取值得时候，该方法很有用，如：获取表单字段的值和做一些DOM操作。

  判断组件挂载状态:isMounted

  bool isMounted()

• 返回值：true或false,表示组件是否已挂载到DOM中
  isMounted()方法用于判断组件是否已挂载DOM中，可以使用该方法保证了setState()和forceUpdate()在异步场景下的调用不会出错

关于setState()有三件事情要知道

1、不要直接更新状态

例如，此代码不会重新渲染组件

//wrong
this.state.comment = 'Hello';

应当使用setState();

//corect
this.setState({comment:'Hello'});

构造函数是唯一能够初始化this.state的地方

2,状态更新可能是异步的

React可以将多个setState()调用合成并一个调用来提高性能。
因为this.props和this.state可能是异步更新的，你不应该依靠他们的值来计算下一个状态。
例如，此代码无法更新计数器；

//wrong
this.setState({
    counter: this.state.counter + this.props.increment,
});

要修复它，请使用第二种形式的setState()来接受一个函数而不是一个对象。该函数将接受先前的状态作为第一个参数，将此次更新被应用时的props作为第二个参数：

//Correct
this.setState((prevState, props)=>({
    counter: prevState.counter + props.increment
}));

上方代码使用了箭头函数，但它也使用于常规函数：

//Correct
this.setState(function(prevState, props){
    return {
        counter: prevState.counter + props.increment
    };
});

3,状态更新合并

当你调用setState()时，React将你提供的对象合并到当前状态。例如，你的状态可能包含一些独立的变量：

constructor(props){
    super(props);
    this.state={
        posts:[],
        comments:[]
    };
}

你可以调用setState()独立地更新他们：

componentDidMount(){
    fetchPosts().then(response =>{
        this.setState({
            posts: response.posts
        });
    });

    fetchComments().then(response => {
        this.setState({
            comments: response.comments
        });
    });
}

这里的合并时浅合并，也就是说this.setState({comments})完整保留了this.state.posts,但完全替换了this.state.comments.
isMounted的方法在ES6中已经废除了。主要的原因是它经过实际与测试可能不足以检测组件是否挂载，尤其是对于有一些异步的程序情况，以及逻辑上造成混乱。现在用以下方法替代；

componentDidMount(){
    this.mounted=true;
}
componentWillUnmount(){
    this.mounted=false;
}