使用react context实现一个支持组件组合和嵌套的React Tab组件

Posted 2020-08-01 luke_lin

纵观react的tab组件中，即使是github上star数多的tab组件，实现原理都非常冗余。

例如Github上star数超四百星的react-tab，其在render的时候都会动态计算哪个tab是被选中的，哪个该被隐藏：

  getChildren() {
    let index = 0;
    let count = 0;
    const children = this.props.children;
    const state = this.state;
    const tabIds = this.tabIds = this.tabIds || [];
    const panelIds = this.panelIds = this.panelIds || [];
    let diff = this.tabIds.length - this.getTabsCount();

    // Add ids if new tabs have been added
    // Don‘t bother removing ids, just keep them in case they are added again
    // This is more efficient, and keeps the uuid counter under control
    while (diff++ < 0) {
      tabIds.push(uuid());
      panelIds.push(uuid());
    }

    // Map children to dynamically setup refs
    return React.Children.map(children, (child) => {
      // null happens when conditionally rendering TabPanel/Tab
      // see https://github.com/rackt/react-tabs/issues/37
      if (child === null) {
        return null;
      }

      let result = null;

      // Clone TabList and Tab components to have refs
      if (count++ === 0) {
        // TODO try setting the uuid in the "constructor" for `Tab`/`TabPanel`
        result = cloneElement(child, {
          ref: ‘tablist‘,
          children: React.Children.map(child.props.children, (tab) => {
            // null happens when conditionally rendering TabPanel/Tab
            // see https://github.com/rackt/react-tabs/issues/37
            if (tab === null) {
              return null;
            }

            const ref = `tabs-${index}`;
            const id = tabIds[index];
            const panelId = panelIds[index];
            const selected = state.selectedIndex === index;
            const focus = selected && state.focus;

            index++;

            return cloneElement(tab, {
              ref,
              id,
              panelId,
              selected,
              focus,
            });
          }),
        });

        // Reset index for panels
        index = 0;
      }
      // Clone TabPanel components to have refs
      else {
        const ref = `panels-${index}`;
        const id = panelIds[index];
        const tabId = tabIds[index];
        const selected = state.selectedIndex === index;

        index++;

        result = cloneElement(child, {
          ref,
          id,
          tabId,
          selected,
        });
      }

      return result;
    });
  }

getChildren每次都会在render里面执行，虽然每次动态计算都会比较耗时，但这不是个大问题，真正让人担心的是里面用到的是cloneElement，cloneElement会生成新的实例对象，而这就会导致不必要的re-render（重新渲染）！！就算是银弹头pure render checking也无力挽回。

 

难道一个小小的tab组件用react实现就这么复杂吗？jQuery也就没几行代码，如果是这样那还不如使用jQuery，ReactJS的组件优势又是什么。。

 

现在我们回归到问题的本质，为什么要实现上面的代码？上面的代码其实是动态给组件增加props属性，例如给每个TabTitle组件添加是否selected的状态，因为组件内部无法知道selected状态，只能通过外部传入，但每个TabTitle组件又都需要这些组件，这就导致一个问题我要遍历所有TabTitle组件，然后把属性传进去。像上面的代码用在扁平结构的html标签倒还好，例如：

<Tabs>
    <TabLink to="1">
        tab1
    </TabLink>
    <TabLink to="2">
        tab2
    </TabLink>
    <TabContent for="1">
        TabContent1
    </TabContent>
    <TabContent for="2">
        TabContent2
    </TabContent>
</Tabs>

但如果我要支持组件组合使用，例如下面这样：

<Tabs>
    <div>
        <TabLink to="1">
            tab1
        </TabLink>
    </div>
    <div>
        <TabLink to="2">
            tab2
        </TabLink>
    </div>
    <div>
        <TabContent for="1">
            TabContent1
        </TabContent>
    </div>
    <div>
        <TabContent for="2">
            TabContent2
        </TabContent>
    </div>
</Tabs>

上面的代码其实应用场景更广泛，因为如果你无法控制产品经理，他就会给你整这么一出！

这样的话前面的getChildren可能就要递归遍历子元素查找，时间复杂度又增加了。

 

即使解决了这么个问题，如果我的产品里一个tab里面嵌套了另一个tab，如何才能不让它们冲突呢？

<Tab defaultSelectedTab="b">
    <TabTitle label="a">
        TabTitle a
    </TabTitle>
    <TabTitle label="b">
        TabTitle b
    </TabTitle>
    <TabTitle label="c">
        TabTitle c
    </TabTitle>
    <TabPanel for="a">
        TabPanel a
    </TabPanel>
    <TabPanel for="b">
        TabPanel b
    </TabPanel>
    <TabPanel for="c">
        <Tab>
            <TabTitle label="a">
                TabTitle a
            </TabTitle>
            <TabTitle label="b">
                TabTitle b
            </TabTitle>
            <TabPanel for="a">
                TabPanel a
            </TabPanel>
            <TabPanel for="b">
                TabPanel b
            </TabPanel>
        </Tab>
    </TabPanel>
</Tab>

 

尼玛，这也太复杂了吧！！

如果单纯只用state和props来处理就是这样麻烦，就算是使用redux（虽然我并不推荐使用redux封装组件）也要每次自己管理全局状态。

Context to rescue

什么是context?

context是react的一个高级技巧，通过它你可以不用给每个组件都传props。具体解释请看官方文档： context

我们的根组件的context属性可以在子元素任意位置下获取到，利用这个特性我们就可以很轻易地实现上面说的组合组件和嵌套Tabs。

实现代码的代码可以在我的github里查看到，里面还有可执行的·demo。也欢迎大家点赞~~

我们把selectedTab放到context里面，这样子组件通过this.context.selectedTab是否和自己相同就可以推断出当前是否被激活了。

export default class Tabs extends Component {
    constructor(props, context) {
        super(props, context);

        this.state = {
            selectedTab: null
        };

        this.firstLink = null;
    }

    getChildContext(){
        return {
            onSelect: this.onSelect.bind(this),
            selectedTab: this.state.selectedTab || this.props.defaultSelectedTab,
            activeStyle: this.props.activeLinkStyle || defaultActiveStyle,
            firstLink: this.firstLink
        };
    }

    onSelect(tab, ...rest) {
        if(this.state.selectedTab === tab) return;

        this.setState({
            selectedTab: tab
        });

        if(typeof this.props.onSelect === ‘function‘) {
            this.props.onSelect(tab, ...rest);
        }
    }

    findFirstLink(children){
        if (typeof children !== ‘object‘ || this.firstLink) {
            return;
        }

        React.Children.forEach(children, (child) => {
            if(child.props && child.props.label) {
                if(this.firstLink == null){
                    this.firstLink = child.props.label;
                    return;
                }
            }

            this.findFirstLink(child.props && child.props.children);
        });
    }

    render() {
        this.findFirstLink(this.props.children);

        return (
            <div {...this.props}>
                {this.props.children}
            </div>
        );
    }
}
Tabs.defaultProps = {
    onSelect: null,
    activeLinkStyle: null,
    defaultSelectedTab: ‘‘
};
Tabs.propTypes = {
    onSelect: PropTypes.func,
    activeLinkStyle: PropTypes.object,
    defaultSelectedTab: PropTypes.string
};
Tabs.childContextTypes = {
    onSelect: PropTypes.func,
    selectedTab: PropTypes.string,
    activeStyle: PropTypes.object,
    firstLink: PropTypes.string
};

上面是Tab组件的实现代码，我们在context里还增加了onSelect, activeStyle, 和firstLink。

onSelect是指我们自定义的onSelect事件， firstLink主要是用来保存第一个Tab的label名称的，如果使用者没有指定默认tab就使用第一个。

接下来是TabTitle和TabPanel的实现：

const defaultActiveStyle = {
    fontWeight: ‘bold‘
};

export class TabTitle extends Component {
    constructor(props, context){
        super(props, context);

        this.onSelect = this.onSelect.bind(this);
    }

    onSelect(){
        this.context.onSelect(this.props.label);
    }

    componentDidMount() {
        if (this.context.selectedTab === this.props.label || this.context.firstLink === this.props.label) {
            this.context.onSelect(this.props.label);
        }
    }

    render() {
        let style = null;
        let isActive = this.context.selectedTab === this.props.label;
        if (isActive) {
            style = this.context.activeStyle;
        }

        return (
            <div
                className={ this.props.className + (isActive ? ‘ active‘ : ‘‘) }
                style={style}
                onClick={ this.onSelect }
            >
                {this.props.children}
            </div>
        );
    }
}
TabTitle.defaultProps = {
    label: ‘‘,
    className: ‘tab-link‘
};
TabTitle.propTypes = {
    label: PropTypes.string.isRequired,
    className: PropTypes.string
};
TabTitle.contextTypes = {
    onSelect: PropTypes.func,
    firstLink: PropTypes.string,
    activeStyle: PropTypes.object,
    selectedTab: PropTypes.string
};

 

const styles = {
    visible: {
        display: ‘block‘
    },
    hidden: {
        display: ‘none‘
    }
};

export class TabPanel extends Component {
    constructor(props, context){
        super(props, context);
    }

    render() {
        let displayStyle = this.context.selectedTab === this.props.for 
            ? styles.visible : styles.hidden;

        return (
            <div
                className={ this.props.className }
                style={ displayStyle }>
                {this.props.children}
            </div>
        );
    }
}
TabPanel.defaultProps = {
    for: ‘‘,
    className: ‘tab-content‘
};
TabPanel.propTypes = {
    for: PropTypes.string.isRequired,
    className: PropTypes.string
};
TabPanel.contextTypes = {
    selectedTab: PropTypes.string
};

使用context后代码量少多了，而且还实现了更复杂的功能，真是一举两得。

更多请参考我的github： https://github.com/LukeLin/react-tab/blob/master/index.js