React之代码优化

在上一篇的React中，我们可以看到所有的代码都在ParentComponent.js中写着，并且随着功能的越来越多，那么代码势必会增加很多，并且性能还会有一定的影响，接下来我们就对以上的代码进行一些最基础的优化。
1.bind()使用的优化，this.xxx.bind(this)可以优化成this.xxx，但是需要在construct构造函数里面添加如下代码：

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

2.render()函数的优化，我们在render函数下面的return后面会有类似这样的一个代码：

render(){
    return (
        <div>
            <div>
                <input placeholder='input value and click btn' />
                <button >click me</button>
            </div>
            <div>
                <button >click me</button>
            </div>
        </div>
    );
}

你会发现我们本来不想要最外层的那个div，但是又不得不这样做，于是react提供了一个类Fragment，只需要在导入React的时候加上，然后替换最外层的div就可以了，代码如下：

import React, {Component, Fragment} from 'react';

render(){
    return (
        <Fragment>
            <div>
                <input placeholder='input value and click btn' />
                <button >click me</button>
            </div>
            <div>
                <button >click me</button>
            </div>
        </Fragment>
    );
}

这样，在页面解析的时候最外层就不会多一层div了。