react相关知识点

1.react内联样式写法：

<div style={{width:'200px',height:'100px',border:'1px solid red'}}>
</div>

react的内联样式是对象，所以这样写。第一重大括号表示这是 JavaScript 语法，第二重大括号表示样式对象。

2.react的事件写法：

onClick={this.handleClick}

注意：1）on后面的事件英文必须是大写；

2）事件用大括号{}括起来，事件函数后面不带小括号()。

3.refs的属性可以帮助我们突破虚拟DOM的限制，可以获取到DOM结构。

使用react-dom提供的专门操作DOM的方法：

ReactDOM.findDOMNode(this.refs.XXX)

4.设置state必须用setState：

this.setState({})

5.react要求array或iterator必须要有key。

Each child in an array or iterator should have a unique "key" prop.

循环array或itrator，写法：

var arr = ["aaa","bbb","ccc"];
var arrList = arr.map(function (value,index) {
    return (
        <li key={index}>{value}</li>
    );
});    

6.getInitialState：对于组件的每个实例来说，这个方法的调用有且只有一次，用来初始化每个实例的 state，在这个方法里，可以访问组件的 props。

getDefaultProps：对于每个组件实例来讲，这个方法只会调用一次，该组件类的所有后续应用，getDefaultPops 将不会再被调用。

每一个React组件都有自己的 state，其与 props 的区别在于 state只存在组件的内部，props 在所有实例中共享。

7.下面2种方式都可以通过ref获取真实DOM节点

var usernameDOM = ReactDOM.findDOMNode(this.refs.username);
var usernameDOM = ReactDOM.findDOMNode(this.refs['username']);

getDOMNode()方法：在react 0.13和0.14中提示一个错误，在15.0中完全移除（react 0.15版本命名为15.0了）。

8.React组件的生命周期图示：

9.组件之间传值：

1). props只能进行数据传递，不能修改，并且只能通过父组件传给子组件；例子(父组件传props给子组件)：http://runjs.cn/detail/kzki5vgm

2). state（状态）用来保存交互的状态，每个组件自带state属性。不能在组件之间传递数据。

3). 组件之间传值可以找到这些组件之间共有的父组件，把state属性设置在父组件上。

10.父组件发生render的时候子组件就会调用componentWillReceiveProps（不管props有没有更新，也不管父子组件之间有没有数据交换）。

11.如果父组件中包含子组件，则父组件的componentDidMount方法会在子组件执行完实例化周期后再执行。

12.组件生命周期图示：

13.组件使用：

在组件的挂载过程中，会依次调用 componentWillMount()、render() 和 componentDidMount()。挂载完成后，componentWillMount() 和 componentDidMount() 将不会再被触发，render() 则会根据 props 和 state 的变化多次执行。

在 componentDidMount() 调用之前，只能得到由 render() 返回的虚拟 DOM；在该方法执行时，真实 DOM 的渲染已经完成，此时，可以通过 ReactDOM 内建的 ReactDOM.findDOMNode() 访问真实的 DOM。

挂载结束后，组件处于监听状态，监听 props 和 state 的变化。props 和 state 的差异在于：state 用于配置组件内的状态，props 则用于在组件间传递数据。

在实际开发中，这一阶段调用的核心都是围绕 state 展开的。state changed 之后，系统会立即调用 boolean shouldComponentUpdate(object nextProps, object nextState) 方法来决定是否重新渲染页面。当遭遇性能瓶颈时，适当地通过该方法控制页面渲染的频率是为提升性能不二法门。

当 props changed 时，系统会立即调用 componentWillReciveProps(object nextProps) 方法。该方法常被用来执行 props -> state 的更新，继而触发整个页面的渲染。

在这一阶段重新渲染页面所需要的同样是 will -> render -> did 三个方法。不同之处在于，此处的 will 和 did 附加了 props 和 state 信息：

componentWillUpdate(object nextProps, object nextState) {
    ...
}
componentDidUpdate(object prevProps, object prevState) {
    ...
}

14.boolean componentWillUpdate(object nextProps, object nextState)

PureRenderMixin，ES6中的用法是：

import PureRenderMixin from 'react-addons-pure-render-mixin';
class FooComponent extends React.Component {
      constructor(props) {
        super(props);
        this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
      }

      render() {
        return <div className={this.props.className}>foo</div>;
      }
}

PureRenderMixin的原理就是它实现了shouldComponentUpdate，在shouldComponentUpdate内它比较当前的props、state和接下来的props、state，当两者相等的时候返回false，这样组件就不会进行虚拟DOM的diff。 

这里需要注意：
PureRenderMixin内进行的仅仅是浅比较对象。如果对象包含了复杂的数据结构，深层次的差异可能会产生误判。仅用于拥有简单props和state的组件。

如果对比的数据结构比较复杂，用immutable.js，也是facebook出品，它能解决复杂数据在deepClone和对比过程中性能损耗。

15.componentWillReceiveProps

在组件接收到新的 props 的时候调用。

用此函数可以作为 react 在 prop 传入之后， render() 渲染之前更新 state 的机会。老的 props 可以通过 this.props 获取到。在该函数中调用 this.setState() 将不会引起第二次渲染。

componentWillReceiveProps: function(nextProps) {
  this.setState({
    likesIncreasing: nextProps.likeCount > this.props.likeCount
  });
}