关于React的小知识（持续更新）

1.JSX引用一个组件，实际上调用了React.createElement

<MyButton color="blue" shadowSize={2}>Click Me</MyButton>

编译为

React.createElement(
  MyButton,
  {color: 'blue', shadowSize: 2},
  'Click Me'
)

2.PropTypes 类型检查

React v16 之前可用 React.PropTypes

class Greeting extends React.Component {
  render() {
    return (<h1>Hello, {this.props.name}</h1>);
  }
}

Greeting.propTypes = {
  name: React.PropTypes.string
};

React v16 之后React.PropTypes弃用，需使用prop-types库

import PropTypes from 'prop-types';
class Greeting extends React.Component {
  render() {
    return (<h1>Hello, {this.props.name}</h1>);
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};

当给属性传递了无效值时，JavsScript 控制台将会打印警告。出于性能原因，propTypes 只在开发模式下进行检查。

3.Ref属性访问组件

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

this.refs.[refName] 属性可以获取真实 DOM ，但是必须等到虚拟 DOM 插入文档以后（componentDidMount），才能使用这个属性，否则会报错。

能用state状态提升解决的，尽量不要用ref

1) 使用React.createRef()创建ref

class A extends React.Component{
    constructor(props){
        super(props);
        this.textInput = React.createRef();
    }
    componentDidMount(){
        this.textInput.current.focusTextInput();
    }
    render(){
        return (
            <B ref={this.textInput} />
        );
    }
}

这种方法仅对 class 声明的 B（组件） 有效，对函数式声明的B无效，因为函数式声明没有产生实例。

class B extends React.Component {
    // class申明
    //...
    render(){
        return (<input />);
    }
}

function B(){
    // 函数申明
    return (<input />);
}

2) Ref回调

React 将在组件挂载时将 DOM 元素传入ref 回调函数并调用，当卸载时传入 null 并调用它。
ref 回调函数会在 componentDidMout 和 componentDidUpdate 生命周期函数前被调用

class A extends React.Component{
    constructor(props){
        super(props);
    }
    saveFormRef = (form) => {
        this.form = form;  //将子组件Dom
    }
    render(){
        return (
            <BForm ref={ this.saveFormRef } />
        );
    }
}

class B extends React.Component{
    render(){
        return (<Form>...</Form>);
    }
}
const BForm = Form.create()(B);
export default B;

Ref可以读取组件的DOM，例子中由于BForm是一个Form组件，所以在A中可以直接读取B的表单数据。

4.React.createClass和extends Component的区别

1） 语法区别

//ES5的语法
var Hello = React.createClass({
    componentWillMount : function(){
        ......
    },
    render: function(){
        return (<div>Hello</div>);
    },
})
module.exports = Hello;

//ES6的语法
class Hello extends React.Component{
    constructor(props){
        super(props);
    }
    componentWillMount(){
        ...
    }
    render(){
        return (<div>Hello</div>);
    }
}
export default Hello;

2）状态的区别

React.createClass：通过getInitialState()方法返回一个包含初始值的对象

const Hello = React.createClass({
    // return an object 返回的结果在state里
    getInitialState(){ 
        return {
            isEditing: false
        }
    }
    render(){
        return <div></div>
    }
})

React.Component：通过constructor设置初始状态

class Hello extends React.Component{
    constructor(props){
        super(props);
        this.state = { // define this.state in constructor
            isEditing: false
        } 
    }
    render(){
        return <div></div>
    }
}

3）this区别

React.createClass：会自动绑定this

const Hello = React.createClass({  
  handleClick() {
    console.log(this); // React Component instance
  },
  render() {
    return (
      <div onClick={this.handleClick}></div>//会切换到正确的this上下文
    );
  }
});

React.Component：this属性并不会自动绑定到 React 类的实例上，默认的函数或者生命周期函数才会自动绑定this

class Hello extends React.Component{
    constructor(props){
        super(props);
    }
    handleClick(){
        console.log(this); // null
    }
    handleFocus(){  // manually bind this
        console.log(this);
    }
    handleBlur: ()=>{  // use arrow function
        console.log(this); 
    }
    render(){
        return <input onClick={this.handleClick} 
                              onFocus={this.handleFocus.bind(this)}  
                              onBlur={this.handleBlur}/>
    }
}

也可以在constructor中绑定this (推荐使用这种方法)

constructor(props){
    super(props);
    this.handleClick = this.handleClick.bind(this);
}