本文主要对基于react的UI库 material-ui源码分析，重点关注组件设计方面，学习其抽取组件和主题的思想。
技术栈
react-material-ui是基于react的UI库。
样式：内联css
inline-style-prefixer：根据userAgent自动添加前缀
keynode：提供键码到键位名称和键位名称到键码的映射关系
react-addons-create-fragment： react children helper，用来解决children顺序变化时，引发remount的问题
react-addons-transition-group: react css动画实现库
react-event-listener：提供一个声明式API，绑定事件到全局对象EventTarget，通常在react生命周期中绑定和解绑事件。
recompose:react function components和HOC的工具库
simple-assign:Object.assign的简单实现
warning:开发环境记录log的工具，产品环境建议使用babel-plugin-dev-expression进行移除
目录结构
src目录是组件实现源码，下面对其进行介绍。
styles：样式
baseThemes下是内置的两个主题，默认使用的是lightBaseTheme。
样式的定义依次是： 主题->组件style->props style。每个组件中依次定义了style变量作为样式，需要定制样式时，通过props中的xxxStyle变量进行覆盖。
getMuiTheme.js
基于lightBaseTheme基础主题构成不同组件的样式主题。
如：
appBar: {
color: palette.primary1Color,
textColor: palette.alternateTextColor,
height: spacing.desktopKeylineIncrement,
titleFontWeight: typography.fontWeightNormal,
padding: spacing.desktopGutter,
},getMuiTheme提供了定制主题的方法：
const muiTheme = getMuiTheme({
palette: {
accent1Color: deepOrange500,
},
});MuiThemeProvider.js
主题提供者。通过getMuiTheme定制一个自定义主题，然后作为属性muiTheme传递给MuiThemeProvider。如果没有传递muiTheme属性，MuiThemeProvider则调用getMuiTheme 生成默认的muiTheme。
MuiThemeProvider使用React context特性来传递muiTheme对象给下级DOM。
const App = () => (
<MuiThemeProvider muiTheme={muiTheme}>
<RootComponent />
</MuiThemeProvider>
);style下还定义了组件库使用到的颜色、间隔、z-index和transition。
utils
该目录下主要抽取了一些公共的工具方法。
组件解析
下面选择AutoComplete组件进行解析，其他组件的封装思路大同小异。
material-ui库中的组件存在相互依赖的关系，AutoComplete是一个复合组件，依赖了TextField、Menu、MenuItem、Divider、Popover。可以理解为，这些依赖组件是一个个的零件，在AutoComplete组件中，使用粘合剂和链条，对其进行定制后（也有可能不需要定制），将其组装在一起。
因为样式通过props传递可以进行定制，将每个子组件的事件处理函数也抽取到props中，那么，组件的样式和交互均可高度定制化，自由度相当之高。
static defaultProps = {
anchorOrigin: {
vertical: 'bottom',
horizontal: 'left',
},
animated: true,
dataSourceConfig: {
text: 'text',
value: 'value',
},
disableFocusRipple: true,
filter: (searchText, key) => searchText !== '' && key.indexOf(searchText) !== -1,
fullWidth: false,
open: false,
openOnFocus: false,
onUpdateInput: () => {},
onNewRequest: () => {},
searchText: '',
menuCloseDelay: 300,
targetOrigin: {
vertical: 'top',
horizontal: 'left',
},
};
以上是AutoProps抽象的定制参数，其实也是这个组件的API设计。一个组件好不好用，其实取决于API设计的合不合理。
重点我们看一下render方法。
render() {
const {
anchorOrigin,
animated,
animation,
dataSource,
dataSourceConfig, // eslint-disable-line no-unused-vars
disableFocusRipple,
errorStyle,
floatingLabelText,
filter,
fullWidth,
style,
hintText,
maxSearchResults,
menuCloseDelay, // eslint-disable-line no-unused-vars
textFieldStyle,
menuStyle,
menuProps,
listStyle,
targetOrigin,
onClose, // eslint-disable-line no-unused-vars
onNewRequest, // eslint-disable-line no-unused-vars
onUpdateInput, // eslint-disable-line no-unused-vars
openOnFocus, // eslint-disable-line no-unused-vars
popoverProps,
searchText: searchTextProp, // eslint-disable-line no-unused-vars
...other
} = this.props;
const {
style: popoverStyle,
...popoverOther
} = popoverProps || {};
const {
open,
anchorEl,
searchText,
focusTextField,
} = this.state;
const {prepareStyles} = this.context.muiTheme;
const styles = getStyles(this.props, this.context, this.state);
const requestsList = [];
dataSource.every((item, index) => {
switch (typeof item) {
case 'string':
if (filter(searchText, item, item)) {
requestsList.push({
text: item,
value: (
<MenuItem
innerDivStyle={styles.innerDiv}
value={item}
primaryText={item}
disableFocusRipple={disableFocusRipple}
key={index}
/>),
});
}
break;
case 'object':
if (item && typeof item[this.props.dataSourceConfig.text] === 'string') {
const itemText = item[this.props.dataSourceConfig.text];
if (!this.props.filter(searchText, itemText, item)) break;
const itemValue = item[this.props.dataSourceConfig.value];
if (itemValue.type && (itemValue.type.muiName === MenuItem.muiName ||
itemValue.type.muiName === Divider.muiName)) {
requestsList.push({
text: itemText,
value: React.cloneElement(itemValue, {
key: index,
disableFocusRipple: disableFocusRipple,
}),
});
} else {
requestsList.push({
text: itemText,
value: (
<MenuItem
innerDivStyle={styles.innerDiv}
primaryText={itemText}
disableFocusRipple={disableFocusRipple}
key={index}
/>),
});
}
}
break;
default:
// Do nothing
}
return !(maxSearchResults && maxSearchResults > 0 && requestsList.length === maxSearchResults);
});
this.requestsList = requestsList;
const menu = open && requestsList.length > 0 && (
<Menu
{...menuProps}
ref="menu"
autoWidth={false}
disableAutoFocus={focusTextField}
onEscKeyDown={this.handleEscKeyDown}
initiallyKeyboardFocused={true}
onItemTouchTap={this.handleItemTouchTap}
onMouseDown={this.handleMouseDown}
style={Object.assign(styles.menu, menuStyle)}
listStyle={Object.assign(styles.list, listStyle)}
>
{requestsList.map((i) => i.value)}
</Menu>
);
return (
<div style={prepareStyles(Object.assign(styles.root, style))} >
<TextField
{...other}
ref="searchTextField"
autoComplete="off"
value={searchText}
onChange={this.handleChange}
onBlur={this.handleBlur}
onFocus={this.handleFocus}
onKeyDown={this.handleKeyDown}
floatingLabelText={floatingLabelText}
hintText={hintText}
fullWidth={fullWidth}
multiLine={false}
errorStyle={errorStyle}
style={textFieldStyle}
/>
<Popover
style={Object.assign({}, styles.popover, popoverStyle)}
canAutoPosition={false}
anchorOrigin={anchorOrigin}
targetOrigin={targetOrigin}
open={open}
anchorEl={anchorEl}
useLayerForClickAway={false}
onRequestClose={this.handleRequestClose}
animated={animated}
animation={animation}
{...popoverOther}
>
{menu}
</Popover>
</div>
);
}