perf: nested Trigger should not force render when ancestor Trigger render (#270)

Change-Id: I1cbe580d44011aeecbe8337ed18d3f8239a6d402

Co-authored-by: fuyongning <fuyongning@bytedance.com>

Author: yongningfu

src/index.tsx

@@ -780,15 +780,12 @@ export function generateTrigger(
       this.setPopupVisible(false);
     }
 
+    triggerContextValue = { onPopupMouseDown: this.onPopupMouseDown };
+
     render() {
       const { popupVisible } = this.state;
-      const {
-        children,
-        forceRender,
-        alignPoint,
-        className,
-        autoDestroy,
-      } = this.props;
+      const { children, forceRender, alignPoint, className, autoDestroy } =
+        this.props;
       const child = React.Children.only(children) as React.ReactElement;
       const newChildProps: HTMLAttributes<HTMLElement> & { key: string } = {
         key: 'trigger',
@@ -877,9 +874,7 @@ export function generateTrigger(
       }
 
       return (
-        <TriggerContext.Provider
-          value={{ onPopupMouseDown: this.onPopupMouseDown }}
-        >
+        <TriggerContext.Provider value={this.triggerContextValue}>
           {trigger}
           {portal}
         </TriggerContext.Provider>

tests/basic.test.jsx

@@ -749,4 +749,65 @@ describe('Trigger.Basic', () => {
     document.body.removeChild(div);
     document.body.removeChild(root);
   });
+
+  it('nested Trigger should not force render when ancestor Trigger render', () => {
+    let isUpdate = false;
+    let isChildUpdate = false;
+    let isGrandsonUpdate = false;
+
+    const Grandson = () => {
+      if (isUpdate) {
+        isGrandsonUpdate = true;
+      }
+
+      return null;
+    };
+
+    const Child = React.memo(() => {
+      if (isUpdate) {
+        isChildUpdate = true;
+      }
+
+      return (
+        <Trigger
+          action={['click']}
+          popupAlign={placementAlignMap.left}
+          forceRender
+          popup={() => (
+            <strong className="x-content">
+              <Grandson />
+            </strong>
+          )}
+        >
+          <div className="target">click</div>
+        </Trigger>
+      );
+    });
+
+    class App extends React.Component {
+      render() {
+        return (
+          <Trigger
+            action={['click']}
+            popupAlign={placementAlignMap.left}
+            popup={<strong className="x-content">tooltip2</strong>}
+            className="className-in-trigger-2"
+          >
+            <div className="target">
+              <Child />
+            </div>
+          </Trigger>
+        );
+      }
+    }
+
+    const wrapper = mount(<App />);
+
+    isUpdate = true;
+
+    wrapper.setState({});
+
+    expect(isChildUpdate).toBeFalsy();
+    expect(isGrandsonUpdate).toBeFalsy();
+  });
 });