react知识小结

1.在componentDidMount方法中，react会使用render方法返回的虚拟dom对象创建真实的dom结构，所以可以在这个方法中获取dom节点

2.性能优化：react-addons-pure-render-mixin

import PureRenderMixin from 'react-addons-pure-render-mixin'

constructor中设置：this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this)

3.性能优化：Immutable.js
3.constructor()中调用super()的原因：
在ES6中，在子类的constructor中必须先调用super才能引用this.
super(props)的目的：在constructor中可以使用this.props。通过super（props）调用父类也就是React.Component的构造函数。如果在构造函数中没有调用super（props），那么组件实例被构造之后，类实例的所有成员函数就无法通过this.props访问到父组件传递过来的props值。很明显，给this.props赋值是React.Component构造函数的工作之一。
4.使用ref的两种方法：
方法一：
class Index extends Component{
    componentDidMount(){
       console.log(this.input);
       this.input.style = 'border:1px solid yellow';
       this.input.focus();
    }
    render(){
       return(
           <input ref={(input) => this.input = input} />
       )
    }
}
ReactDOM.render(
     <Index />,document.getElementById('root')
);

方法二：
class Index extends Component{
   componentDidMount(){
       console.log(this.refs.aaa);
      this.refs.aaa.style = 'border:1px solid red';
      this.refs.aaa.focus();
  }
   render(){
     return(
        <input ref='aaa' />
     )
  }
}

ReactDOM.render(
     <Index />,document.getElementById('root')
)
4.绑定事件的两种方法：
方法一：
class Index extends Component{
       handleClick(){
            console.log(this);
           alert('aasdeer');
       }
      render(){
         return (
             <div onClick = {this.handleClick.bind(this)} >aaaa</div>
         )
     }
}
ReactDOM.render(
    <Indext>,document.getElementById('root')
);
方法二：
class Index extends Component{
      handleClick(){
          console.log(this);
          alert('aaadfeerefdf');
      }
      render(){
         return (
            <div onClick = {()=> this.handleClick()}>aaaa</div>
          )
      }
}   
ReactDOM.render(
      <Index />,document.getElementById('root')
)；
5.没有JSX的React
JSX对于React来说并不是必需的。如果你不打算在React中使用JSX,那么在React中创建元素时需要知道以下三点：定义组件类，创建一个为组件类生产实例的工厂，使用工厂来创建ReactElement实例。
class Index extends Component{
    render(){
       return(
          React.createElement('div',{className:'divider'},
                 React.createElement('h2',null,'tttttttt'),
                 React.createElement('hr',null)
           )
        )
    }
}
ReactDOM.render(<Index />,document.getElementById('root'));

6.父组件、子组件之间的调用：

子组件调用父组件：this.props

父组件调用子组件：this.refs
7.DOM操作
当仅使用虚拟DOM无法满足需求时，可以考虑ref属性，它允许访问指定的元素。并且在componentDidMount执行后，可以使用findDOMNode方法修改它们底层的DOM节点。
8.当外部世界要传递一些数据给React组件，一个最直接的方式就是通过prop；同样，React组件要反馈数据给外部世界，也可以用prop，因为prop的类型不限于纯数据，也可以是函数，函数类型的prop等于让父组件交给子组件一个回调函数，子组件在恰当的时机调用函数类型的prop，可以带上必要的参数，这样就可以反过来把信息传递给外部世界。
9.没有state的组件叫无状态组件，设置了state的叫做有状态组件，尽量少地写有状态的组件。
10.用函数式组件的编写方式：
const HelloWorld = (props) => {
    const sayHi = (event) => alert('hello world')
    return (
       <div onClick={sayHi}>Hello World</div>
    )
}
以前一个组件是通过继承Component来构建，一个子类就是一个组件。而用函数式的组件编写方式是一个函数就是一个组件，你可以和以前一样通过<HelloWorld />使用该组件。不同的是，函数式组件只能接受props而无法跟类组件一样可以在constructor里面初始化state。你可以理解函数式组件就是一种只能接受props和提供render方法的类组件。