小编wkr*_*ger的帖子

在反应课上，我会写这样的东西

class Myclass extends React.Component {
  handleUpdate = info => {
    //do the update
  }

  render() {
    return (
      <SomeMarkup>
        <SomeComponent onUpdate={this.handleUpdate} />
      </SomeMarkup>
    )
  }
}

如果使用函数，我可以只写以下内容

function MyFunction() {
  function handleUpdate(info) {
    // do the update
  }
  return (
    <SomeMarkup>
      <SomeComponent onUpdate={handleUpdate} />
    </SomeMarkup>
  )
}

...但是我会在每次渲染时重新声明一个函数。有没有什么技巧可以记住渲染之间的处理函数？或者我应该将处理程序移出渲染范围？（将它移出渲染范围需要我明确传递更多参数，因为我不会直接访问函数范围。）

下面的示例是一个简化的摘录，其中子组件根据鼠标行为发出事件。然后 React 应该根据发出的事件更新 DOM。

function SimpleSample() {
  const [addons, setAddons] = React.useState<any>({
    google: new GoogleMapsTile('google'),
  })
  const [tooltip, setTooltip] = React.useState<null | { text: string[]; x; y }>(null)
  React.useEffect(() => {
    // ...
  }, [])
  const mapEventHandle = React.useCallback(
    (event: MapEvents) => {
      console.log('event', event.type, tooltip) // LOG 1
      if (event.type === MapEventType.mouseoverPopup_show) {
        setTooltip({ text: event.text, x: event.coordinates[0], y: event.coordinates[1] })
      } else if (event.type === MapEventType.mouseoverPopup_move) {
        if (tooltip) setTooltip({ ...tooltip, x: event.coordinates[0], y: event.coordinates[1] })
      } else …

假设我有以下场景：

• 程序最大化并打开“Explorer”选项卡和 2 个编辑器选项卡
• （即在 Windows 上）我想查看一些网站，因此我将一半屏幕分配给浏览器，一半分配给 VS Code。

我想要一个隐藏资源管理器、减小未聚焦选项卡的大小并聚焦主编辑器选项卡的热键。是否存在这样的想法（或者任何插件可以做到这一点？）。