动态推导及其杀死useEffect的方法

标题有点“点击诱饵”，但想法并没有错。

我并不认为 useEffect 是一个不好的 hook，实际上恰恰相反。但在作为派生机的 React 中，使用 useEffect 进行状态同步并不是最好的选择，核心团队也不推荐。

但是等等，如果我有需要同步状态的情况？

是的，这是非常罕见的情况，也许有更好的解决方案选项，但想象一下我们在应用程序中有一个帖子，并且当用户单击“喜欢”按钮时，我们希望有一个本地状态来处理乐观更新，但它与外部状态（来自后端）同步，以真正了解是否发生了类似情况。

可变的派生

在这种情况下，我们需要一个可以同时进行状态和推导的原语。从概念上讲，我们可以将其视为可变推导。 Ryan Carniato 有一篇关于它的很好的博客文章，但是存在一些与 React 管理反应性的方式相关的限制，但是这个新的原语将是推导和状态：
派生作为默认行为，获取最后更新的事实来源（来自服务器的数据道具）。
说明用户何时单击“喜欢”按钮。此更改是临时的，将在下一次依赖项更改时被覆盖。

当然，我们在 React 上没有它，但我们可以想象这样的原语。它的优点：

• 它从 useEffect 中又删除了一个用例。
• 它清楚地表明我们有一个可以作为状态处理的推导。

使用MemoState

const [internalState, setInternalState] = useMemoState(() => data, [data]);

钩子像普通的useMemo一样接受两个参数，第一个参数是memo函数，通常会在第一次执行，返回值将是状态。第二个参数是众所周知的依赖项数组，用于跟踪值并在必要时重新计算备忘录。它返回一个包含两个值的元组，即状态/备忘录值和临时更改状态的设置器。

使用钩子就像这个例子：

function MemoState ({ data }: { data: State}) {
  const [internalState, setInternalState] = useMemoState(() => data, [data]);

  return (
    

      
name: {internalState?.title}
      
{internalState?.like ? "liked post" : "not liked post"}
       {
        // likePost();
        setInternalState(state => ({
          ...state,
          like: !state.like
        }))
      }}>Like Button
    
  )
}

通过这种方式，您可以消除这里对 useEffect 的需求，确切地知道这个钩子正在做什么和能够做什么，并填补这个概念空白，我们的问题同时需要一个状态和一个派生。讽刺的是，它因此消除了对效果的需要。

我们如何在 React 中做类似的事情？

为了遵循 React 规则并保持钩子安全，我们需要使用 useEffect 在今天的 React 中创建类似的东西。我不认为将来会做出这样的钩子，但谁知道呢，对吧？

为了避免在这里使用 useEffect，我们需要使用一些外部代码（例如迷你状态库）来处理它，或者如果我们想保留严格的 React 原语，则使用 useRef 来保持值的同步。

这种方法的问题在于它违反了 React 规则，并且文档不建议这样做。因为它在没有效果的情况下工作的唯一方法是在组件渲染期间同步引用，一点也不安全。

因此，为了保持简单和安全，hook 的示例如下：

const [internalState, setInternalState] = useMemoState(() => data, [data]);

以上是动态推导及其杀死useEffect的方法的详细内容。更多信息请关注PHP中文网其他相关文章！