Question

我仍在弄清React的来龙去脉，所以请在这里与我一起忍受。

我正在使用MaterialUI制作组件，该组件包含一个网格和一个PopOver。粗略的模型可能像这样：

export const Overblik = () => {
    const [filterAnchorEl, setFilterAnchorEl] = useState<HTMLButtonElement | null>(null);

    return (
      <div>
      <IconButton onClick={handleFilterClick}></IconButton>
          <Popover
            anchorEl={filterAnchorEl}
            open={Boolean(filterAnchorEl)}
            onClose={handleFilterClose}
            anchorOrigin={{
            vertical: 'bottom',
            horizontal: 'left'
          }}><div>stuff</div></Popover>
          <Grid>[somelongListGoesHere]</Grid>
        </div>
        );
      }

现在的问题是，当我切换filterAnchorEl状态以显示弹出窗口时，标记为[somelongListGoesHere]的网格也会重新渲染，从而使弹出窗口显得呆滞。我认为我的方法一定有问题，但是关于如何更好地处理此问题的任何建议？

Answer 1

尝试将网格移动到另一个组件

 10:43:36.69 ....                                              {
10:43:36.69          'document': self,
10:43:36.69          'utility': utility,
10:43:36.69          'utility_email': self.utility.email,
10:43:36.69          'customer': self.customer,
10:43:36.69          'customer_first_name': self.customer.customer_first_name,
10:43:36.69          'customer_last_name': self.customer.customer_last_name,
10:43:36.69          'customer_email': self.customer.customer_email,
10:43:36.69          'docs': self._docs,
10:43:36.69          'state': state
10:43:36.69      } = {'customer': <Customer: Lauren Williams zporter@hicks.com>,
10:43:36.69           'customer_email': 'zporter@hicks.com',
10:43:36.69           'customer_first_name': 'Lauren',
10:43:36.69           'customer_last_name': 'Williams',
10:43:36.69           'docs': <generator object Billing._docs at 0x7fed12e1b8d0>,
10:43:36.69           'document': <Invoice: InvoiceSeries-1 Keller-Cooley  Lauren Williams zporter@hicks.com => None [175452.23 KES]>,
10:43:36.69           'state': 'paid',
10:43:36.69           'utility': <Utility: Edward Irwin>,
10:43:36.69           'utility_email': 'sparksnathan@dyer.biz'}
10:43:36.69 LOG:
10:43:36.73 .... type(context) = <class 'tuple'>
0 get_template_context dict
10:43:36.73 LOG:
10:43:36.76 .... print(f,d) = None
1 {'document': <Invoice: InvoiceSeries-1 Keller-Cooley  Lauren Williams zporter@hicks.com => None [175452.23 KES]>, 'utility': <Utility: Edward Irwin>, 'utility_email': 'sparksnathan@dyer.biz', 'customer': <Customer: Lauren Williams zporter@hicks.com>, 'customer_first_name': 'Lauren', 'customer_last_name': 'Williams', 'customer_email': 'zporter@hicks.com', 'docs': <generator object Billing._docs at 0x7fed12e1b8d0>, 'state': 'paid'}
10:43:36.76 LOG:
10:43:36.77 .... print(f,d) = None
Traceback (most recent call last):
  File "manage.py", line 21, in <module>
    main()
  File "manage.py", line 17, in main
    execute_from_command_line(sys.argv)
  File "lib/python3.7/site-packages/django/core/management/__init__.py", line 401, in execute_from_command_line
    utility.execute()
  File "lib/python3.7/site-packages/django/core/management/__init__.py", line 395, in execute
    self.fetch_command(subcommand).run_from_argv(self.argv)
  File "lib/python3.7/site-packages/django/core/management/base.py", line 328, in run_from_argv
    self.execute(*args, **cmd_options)
  File "lib/python3.7/site-packages/django/core/management/base.py", line 369, in execute
    output = self.handle(*args, **options)
  File "generate_pdfs.py", line 37, in handle
    snoop.pp('snooping ', document.generate_pdf())
  File "models.py", line 517, in generate_pdf
    document, utility, utility_email, customer, customer_first_name,customer_last_name, customer_email, docs, state = context
ValueError: not enough values to unpack (expected 9, got 2)

然后在您的组件中渲染它

const MyGrid = () => (<Grid>[somelongListGoesHere]</Grid>)

如果<IconButton onClick={handleFilterClick}></IconButton> <Popover ... /> <MyGrid />组件的道具没有变化，则不会重新渲染。您还可以像这样使用MyGrid对其进行缓存：

React.memo

React：切换PopUp重新渲染整个组件

1 个答案: