Question

我基本上有这个：

function MyComponent(props) {
  useStateAttribute('foo', 1)
  useStateAttribute('bar', 2)

  useEffect(globalClick)

  function globalClick() {
    window.addEventListener('click', handle)

    return () => window.removeEventListener('click', handle)

    function handle() {
      set('foo', get('foo') + 1)
    }
  }
}

function set(key, val) {
  // How to get component's context?!?
  something
    .currentlyActiveComponent
    .myCustomStateObject[key] = val
  triggerRerender() // how? (without calling a setState function)
}

function get(prop) {
  return something
    .currentlyActiveComponent[prop]
}

function useStateAttribute(name, defaultValue) {
  something
    .thisActiveComponent[name] = 
      something
        .thisActiveComponent[name]
          || defaultValue
}

我想知道如何为“当前组件”正确配置自定义“范围”，然后在异步事件（如单击处理程序）中引用该自定义范围，而不只是使用常规的方式setState 。因此，如果您看上面的内容，可以使用get和set方法，它们可以引用当前组件的“作用域”，并且可以作用于我们自定义的“状态”。

据我所知，React在调用您的组件进行“渲染”时，基本上是这样做的：

GlobalContext.currentComponentContext = new Context()
renderComponent(Component)
GlobalContext.currentComponentContext = null

这允许useX钩子秘密访问被黑的临时全局变量。我也了解您可以通过在组件顶部创建函数范围并使用它来创建一个自定义范围。

function MyComponent(props) {
  let set = useMyScope()
  let get = useMyScope()

  useStateAttribute('foo', 1)
  useStateAttribute('bar', 2)

  useEffect(globalClick)

  function globalClick() {
    window.addEventListener('click', handle)

    return () => window.removeEventListener('click', handle)

    function handle() {
      set('foo', get('foo') + 1)
    }
  }
}

然后get和set可以访问本地上下文（~~~我不确定它如何完全起作用），然后在您致电get或{ {1}}在异步处理程序中，它将有权访问该函数的作用域，因此也可以访问您的“自定义状态”。

但是我不想这么做，因为我知道React可以通过结合使用全局变量和“光纤”以及其他我不确定的技巧，以某种方式创造性地避开了这一需求他们如何工作。我想学习此方法以及如何做到这一点，这是我的示例的目的。

基本上，我的示例想对组件的状态进行操作，并在状态更改时触发重新渲染（不使用setState，我不知道它在内部如何工作）。我想学习这是如何工作的。在不遵循常规方法的情况下如何做到这一点，所以我可以更好地学习React的内部知识。

如何在点击处理程序中访问React组件上下文，而不求助于JavaScript作用域

0 个答案: