react:material-ui源码解析（持续更新）

本文主要对基于react的UI库 material-ui源码分析，重点关注组件设计方面，学习其抽取组件和主题的思想。

技术栈

react-material-ui是基于react的UI库。

样式：内联css
inline-style-prefixer：根据userAgent自动添加前缀
keynode：提供键码到键位名称和键位名称到键码的映射关系
lodash | 中文：具有一致接口、模块化、高性能等特性的JavaScript工具库
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 = () => (
  
    
  
);

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: (
                ),
            });
          }
          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: (
                  ),
              });
            }
          }
          break;

        default:
          // Do nothing
      }

      return !(maxSearchResults && maxSearchResults > 0 && requestsList.length === maxSearchResults);
    });

    this.requestsList = requestsList;

    const menu = open && requestsList.length > 0 && (
      
        {requestsList.map((i) => i.value)}
      
    );

    return (
      
        
        
          {menu}
        
      
    );
  }