簡單的程序只需要幾行代碼霉赡，一個(gè)文件橄务，這樣的代碼很容易管理。但當(dāng)項(xiàng)目總是非常復(fù)雜的穴亏，于是我們需要一種共享代碼的機(jī)制蜂挪。 require import exports這些語法，就可以將一個(gè)文件中的代碼倒出嗓化，使得在另一個(gè)文件中可以輕易使用棠涮。
ES5語法
在ES5中，使用require和module.exports來共享代碼刺覆，而module就是承載代碼的容器
下面的React代碼严肪，用來在頁面上顯示三個(gè)顏色塊
//App.js
var React = require('react');
var Component = React.Component;
require('./App.css');
var Color = require('./Shapes');
第一句React用來引用'react'庫，用的是require的語法
第二句Component引用react庫中的Component組件
第三句導(dǎo)入css文件谦屑，不需要賦值給變量
第四句給Color變量賦了從Shape.js中導(dǎo)出的值
//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 導(dǎo)出
//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;
結(jié)果如下:
導(dǎo)出多個(gè)組件
下面的Shape.js不僅導(dǎo)出了Color組件，還導(dǎo)出了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
}
這里導(dǎo)出的組件氢橙，需要一個(gè)Key來標(biāo)志
導(dǎo)入的時(shí)候也可以用相應(yīng)的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>
);
}
}
結(jié)果如下:
ES6語法
ES6的語法有些改變结窘，但是思想是一致的
ES6中用import替代了require，而且當(dāng)只有一個(gè)變量或函數(shù)需要導(dǎo)出的話充蓝，可以使用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 {...
