Javascript React回调引用模式

我经常通过react回调来面对这种情况：

const MyComponent = ({ onLoad }) => {
  useEffect => {
    // some stuff
    onLoad(/* args */);
  }, [onLoad]);

  return (<div />);
}

constmycomponent=（{onLoad}）=>{
useEffect=>{
//一些东西
onLoad（/*args*/）；
}，[onLoad]）；
返回（）；
}

问题是。我认为我的组件应该只加载一次。使用useffect，我必须在依赖项中设置onLoad，这会导致对onLoad属性的任何更改触发效果

我通常用ref来解决这个问题

const MyComponent = ({ onLoad: _onLoad }) => {
  const onLoadRef = useRef(_onLoad);
  onLoadRef.current = _onLoad;

  useEffect => {
    // some stuff
    onLoadRef.current(/* args */);
  }, []); // No dependencies anymore

  return (<div />);
}

const MyComponent=（{onLoad:_onLoad}）=>{
const onLoad ref=useRef（_onLoad）；
onLoadRef.current=\u onLoad；
useEffect=>{
//一些东西
onLoadRef.电流（/*args*/）；
}，[]）；//不再有依赖关系
返回（）；
}

---

它工作得很好，解决了很多类似的问题，但我觉得它有点难看，而且不是真正的初学者友好。我想知道是否有更好的解决方案，或者我所做的是一种反家长行为？

从上面的评论中可以看出：这是如何使用useEffect的一个很好的资源

本文特别强调了为什么需要以不同于类组件生命周期方法的方式考虑useEffect的主要原因

我们经常在组件第一次装入时进行一些设置，例如 网络呼叫或订阅。我们已经学会了用理性思考问题 使用componentDidMount（）之类的术语表示“时刻”， componentDidUpdate（）和componentWillUnmount（）。这是很自然的 在钩子中，反应和寻找1:1等价物的先验知识。我 我自己做的，我想每个人一开始都是这样做的。我经常会 在我的工作室里听到

“钩子与[某个生命周期方法]等价的是什么？”

快速的答案是，挂钩是一种范式的转变，从思维方式转变为思维方式 从“生命周期和时间”到“状态和时间” 与DOM同步”。尝试采用旧范式并应用 它只是不太好，可以阻止你

它还提供了useEffect的详细介绍，以及从类组件转换为挂钩的示例

另一个好消息来源是丹·阿布拉莫夫。我绝对推荐这本书，尽管它读起来很长。当我第一次开始使用钩子以正确的方式思考它们时，它确实帮助了我

这是本文开头的一个小摘录

但有时，当你使用effect时，这些片段并不完全吻合。 你有一种唠叨的感觉，觉得你错过了什么。看来 类似于类生命周期…但它真的是吗？你发现自己 提出以下问题：

---

从上面的评论来看：这是一个关于如何使用useEffect的好资源

本文特别强调了为什么需要以不同于类组件生命周期方法的方式考虑useEffect的主要原因

我们经常在组件第一次装入时进行一些设置，例如 网络呼叫或订阅。我们已经学会了用理性思考问题 使用componentDidMount（）之类的术语表示“时刻”， componentDidUpdate（）和componentWillUnmount（）。这是很自然的 在钩子中，反应和寻找1:1等价物的先验知识。我 我自己做的，我想每个人一开始都是这样做的。我经常会 在我的工作室里听到

“钩子与[某个生命周期方法]等价的是什么？”

快速的答案是，挂钩是一种范式的转变，从思维方式转变为思维方式 从“生命周期和时间”到“状态和时间” 与DOM同步”。尝试采用旧范式并应用 它只是不太好，可以阻止你

它还提供了useEffect的详细介绍，以及从类组件转换为挂钩的示例

另一个好消息来源是丹·阿布拉莫夫。我绝对推荐这本书，尽管它读起来很长。当我第一次开始使用钩子以正确的方式思考它们时，它确实帮助了我

这是本文开头的一个小摘录

但有时，当你使用effect时，这些片段并不完全吻合。 你有一种唠叨的感觉，觉得你错过了什么。看来 类似于类生命周期…但它真的是吗？你发现自己 提出以下问题：

---

您是否认为使用

componentDidMount

（hook:

useffect

和

[]

）可以解决此问题，而不使用

useRef

，如上面的第二个示例所示。您是对的。起初我试着这样做，但在林特身上出现了错误。我不想忽视他们，因为这会导致如此奇怪的问题。（特别是当我在其他钩子上遇到类似问题时）您绝对不应该将useEffect视为componentDidMount。它们是不同的，需要不同的思维方式。方法是像在第二个示例中那样使用useRef@ZacharyHaber-感谢您的指点；我打算通过使用

componentDidMount

，提供一个替代上下文-不应将其视为等同于您所辩护的内容，但考虑到组件是功能组件或类组件，我们可以对其行为建模的程度如何；谢谢你的链接——这也是一本有趣的书；至于@Poyoman-eslint错误显示没有列出足够的依赖项-可以忽略（

//eslint禁用下一行react hooks/deps

）负责任地-因为您打算调用它一次，而且在代码中似乎这很好。@Poyoman-在最后的评论中-我的意思不是说可以安全地忽略eslint错误-您是否认为使用

组件didmount

（hook:

useffect

with

[]

）可以解决此问题，不使用上面第二个示例中的

useRef

，您是对的。起初我试着这样做，但在林特身上出现了错误。我不想忽视他们，因为这会导致如此奇怪的问题。（特别是当我对其他钩子有类似的问题时）你绝对不应该想到