简单的程序只需要几行代码，一个文件，这样的代码很容易管理。但当项目总是非常复杂的，于是我们需要一种共享代码的机制。 require import exports这些语法，就可以将一个文件中的代码倒出，使得在另一个文件中可以轻易使用。
ES5语法
在ES5中，使用require和module.exports来共享代码，而module就是承载代码的容器
下面的React代码，用来在页面上显示三个颜色块
//App.js
var React = require('react');
var Component = React.Component;
require('./App.css');
var Color = require('./Shapes');
第一句React用来引用'react'库，用的是require的语法
第二句Component引用react库中的Component组件
第三句导入css文件，不需要赋值给变量
第四句给Color变量赋了从Shape.js中导出的值
//App.js
class App extends Component {
render() {
return (
<div className="App">
<div className="colors">
<Color name="red"/>
<Color name="green"/>
<Color name="blue"/>
</div>
</div>
);
}
}
module.exports = App;
App.js定义了App组件，这里用module.exports 导出
//Shapes.js
var React = require('react');
var Component = React.Component;
class Color extends Component {
render() {
const divStyle = {
backgroundColor: this.props.name,
color: 'white',
fontSize: '20px',
height: '100px',
width: '100px'
}
return (
<div style={divStyle}>{this.props.name}</div>
)
}
}
module.exports = Color;
结果如下:
导出多个组件
下面的Shape.js不仅导出了Color组件，还导出了Animal组件
//Shapes.js
var React = require('react');
var Component = React.Component;
class Color extends Component {
render() {
const divStyle = {
backgroundColor: this.props.name,
color: 'white',
fontSize: '20px',
height: '100px',
width: '100px'
}
return (
<div style={divStyle}>{this.props.name}</div>
)
}
}
module.exports = {
Color: Color,
Animal: Animal
}
这里导出的组件，需要一个Key来标志
导入的时候也可以用相应的Key来给变量赋值
//App.js
var {Color} = require('./Shapes');
var {Animal} = require('./Shapes');
class App extends Component {
render() {
return (
<div className="App">
<div className="colors">
< Color name="red"/>
< Color name="green"/>
< Color name="blue"/>
</div>
<div className="animals">
< Animal name="dog" />
< Animal name="cat" />
< Animal name="bird" />
</div>
</div>
);
}
}
结果如下:
ES6语法
ES6的语法有些改变，但是思想是一致的
ES6中用import替代了require，而且当只有一个变量或函数需要导出的话，可以使用export default
import React, {Component} from 'react';
import './App.css';
import {Color, Animal} from './Shapes';
...
export default App;
//Shapes.js
import React, {Component} from 'react';
export class Color extends Component {...
export class Animal extends Component {...
