Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Ellipsis use ellipsisValueRef to reduce reflow #226

Merged
merged 1 commit into from
Jan 30, 2024

Conversation

childrentime
Copy link
Contributor

在一个有展开收起的例子中。比如

import { Ellipsis } from '@arco-design/mobile-react';

export default function EllipsisDemo() {
    const text =
        `This wasn't the first time ''natural'' sounds had been used in musical compositions; that sort of thing had been going on at least as far back as the 19th century, and the surrealists and futurists of the 1920s and 1930s were way into this kind of thing.`;
    const [ellipsis, setEllipsis] = React.useState(true);
    const collapseNode = <span className="demo-link">Collapse</span>;

    return (
        <Ellipsis
            ellipsis={ellipsis}
            text={text}
            maxLine={2}
            ellipsisNode={
                <span>
                    ...<span className="demo-link">Expand</span>
                </span>
            }
            collapseNode={collapseNode}
            reflowOnResize={true}
            onEllipsisNodeClick={() => {
                setEllipsis(false);
            }}
            onCollapseNodeClick={() => {
                setEllipsis(true);
            }}
        />
    );
}

点击展开节点执行 setEllipsis(false); 会设置ellipsis属性值为false。

这个时候在组件中,由于
https://github.com/arco-design/arco-design-mobile/blob/main/packages/arcodesign/components/ellipsis/components/js-ellipsis.tsx#L217-L222

{!ellipsis && collapseNode && (
                <span className={`${prefixCls}-js-content-collapse`} onClick={onCollapseNodeClick}>
                    {collapseNode}
                </span>
 )}

这段代码,会在ellipsis变化的时候触发 resize 事件。

https://github.com/arco-design/arco-design-mobile/blob/main/packages/arcodesign/components/ellipsis/components/js-ellipsis.tsx#L163-L177

但其实这个时候,useEffect还没有重新执行,所以resize事件触发执行 reflow的时候,拿到的ellipsis是旧值为true,进行了不必要的二分查找计算。

使用ref来替换可以在reflow的时候拿到最新的值,从而避免这部分计算。

@TinaPeach TinaPeach changed the title perf(Ellipsis): reduce_reflow fix: Ellipsis use ellipsisValueRef to reduce reflow Jan 30, 2024
Copy link

codecov bot commented Jan 30, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

❗ No coverage uploaded for pull request base (main@02c7158). Click here to learn what that means.

Additional details and impacted files
@@           Coverage Diff           @@
##             main     #226   +/-   ##
=======================================
  Coverage        ?   89.34%           
=======================================
  Files           ?      138           
  Lines           ?     8054           
  Branches        ?     3299           
=======================================
  Hits            ?     7196           
  Misses          ?      837           
  Partials        ?       21           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@TinaPeach TinaPeach merged commit cbb761f into arco-design:main Jan 30, 2024
3 checks passed
@childrentime childrentime deleted the perf/reduce_reflow branch January 30, 2024 12:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants