react:material-ui源碼解析（持續更新）

時間 2019-11-10

標籤 react material 源碼解析持續更新欄目 React 简体版

原文原文鏈接

本文主要對基於react的UI庫 material-ui源碼分析，重點關注組件設計方面，學習其抽取組件和主題的思想。javascript

技術棧

react-material-ui是基於react的UI庫。css

樣式：內聯csshtml
inline-style-prefixer：根據userAgent自動添加前綴java
keynode：提供鍵碼到鍵位名稱和鍵位名稱到鍵碼的映射關係node
lodash | 中文：具備一致接口、模塊化、高性能等特性的JavaScript工具庫react
react-addons-create-fragment： react children helper，用來解決children順序變化時，引起remount的問題git
react-addons-transition-group: react css動畫實現庫github
react-event-listener：提供一個聲明式API，綁定事件到全局對象EventTarget，一般在react生命週期中綁定和解綁事件。express
recompose:react function components和HOC的工具庫npm
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>
    );
  }