ElemeFE / element-react

Element UI
https://elemefe.github.io/element-react/index
MIT License
2.83k stars 444 forks source link

Popover: Unnecessary re-renders when document clicked #1027

Open will-shaw opened 4 years ago

will-shaw commented 4 years ago

Description

All Popovers in the page re-render on document clicked, even if none are visible. Should only render Popovers which are open and have a true state change.

Reproduce Steps

  1. Wrap a button with a Popover
  2. In React DevTools enable the Highlight updates when components render option.
  3. Click anywhere in the page and watch the button be re-rendered, regardles of whether the Popover is visible.
  4. For extra proof use the Profiler flamegraph to record this action.

Error Trace (if possible)

Not error; optimisation.

Solution

Within document click listener, add early return if showPopper is already false in order to prevent setting state to false again.

Additional Information

ElementReact version: 1.4.34