一个文件中有多个render，请问怎么把这几个合并一下？

Question

import React from 'react';

import ReactDOM from 'react-dom';

//import App from './App.jsx';
import App from './component/App.js';
import FormatNameUse from './component/FormatName.js';


ReactDOM.render(<App name="John"/>,
    document.getElementById('app'))
ReactDOM.render(<FormatNameUse name="John"/>,
    document.getElementById('app01'))

App.js

import React from 'react';

//  React中并不一定要用JSX
//  JSX只是React.createElement(component, props, ...children)的语法糖，完全可以用原生JS替代




class App extends React.Component {
    constructor() {
        super();
    }
    render() {
        return React.createElement('div', null, `你的Hello123 ${this.props.name}`);
    }
}


export default App;

FormatName.js

import React from 'react';

function formatName(user) {
    return user.firstName + ' ' + user.lastName;
}

const user = {
    firstName: 'Harper',
    lastName: 'Perez'
};

class FormatNameUse extends React.Component {
    constructor() {
        super();
    }
    render() {
        return React.createElement('h1', null, `小名字 ${formatName(user)}`);
    }
}


export default FormatNameUse;

我合并了，依然没有效果

import React from 'react';
import ImgShow from './component/jsx/ImgShow.jsx';

class StaffHeader extends React.Component{
    render(){
        return (
            <div>

                <table className="optHeader">
                    <tbody>
                    <tr>
                        <td className="headerTd"><input type='text' placeholder='Search...' /></td>
                        <td className="headerTd">
                            <label for='idSelect'>人员筛选</label>
                            <select id='idSelect'>
                                <option value='0'>全部</option>
                                <option value='1'>主任</option>
                                <option value='2'>老师</option>
                                <option value='3'>学生</option>
                                <option value='4'>实习</option>
                            </select>
                        </td>
                        <td>
                            <label for='orderSelect'>排列方式</label>
                            <select id='orderSelect'>
                                <option value='0'>身份</option>
                                <option value='1'>年龄升</option>
                                <option value='2'>年龄降</option>
                            </select>
</td>



</tr>
</tbody>
</table>
<ImgShow />
</div>
);
}
}

export default StaffHeader;

项目的地址

Answer 1

最好就一个出口文件，也就是说就一个render一次，你可以吧他们提出来放到定义一个element来接收App和FormatName

Answer 2

看一下这里 link 就知道了.

Answer 3

减少render的次数，可以对性能进行优化，建议能进行组件封装的就封装，然后按需调用，一个入口进行render!