5种改善React代码和避免常见错误的方法

如何解除组件的耦合并更好地使用钩子

想象一下，我们有一个这样的屏幕。我放的5个箭头是不同的数据块，不应该全部放在一个巨大的文件中。

相反，每一个数据块都应该是一个独立的组件，我们应该有一个父组件，像这样把适当的道具传递给子组件。

(这只是为了演示，不会呈现任何东西）。

但我们的想法是，屏幕上的每一块真正可以成为独立的软件，并且有不同的行为，应该是一个独立的组件，这将防止你有一个难以阅读的庞大的组件。

上面的代码是合法的，它可以工作，但是我们把子组件放到了父组件中，我们不需要使用props来调用onClick函数。

这样做的问题是，每次重新渲染Parent时，也会重新定义Child组件，这可能会导致一些不必要的行为和奇怪的性能。

解决这个问题的方法是完全删除子组件或将其从父组件中提取出来。

为了保持连续性，让我们继续用同一个例子。看着这段代码，你会认为当我们点击按钮时，计数会递增2，但实际上它只会递增1。

这是因为setState是异步的，当我们把相同的值传递给setCounts时，它又使我们的计数只增加了1。

解决这个问题的方法其实很简单。

我们可以向setCount传递一个函数，它将始终获得当前的值，所以即使这两个调用是异步的，无论哪个先开始都会增加这个值，第二个可以使用这个更新的值来进一步增加我们的计数。

这样做的问题是，在计算函数运行后，我们再更新setUser状态，例如，这将重新渲染整个组件，迫使invoiceCalculations函数再次运行，如果它是一个具有大量逻辑的大型函数，很可能会占用相当多的资源。更不用说我们希望它只在发票状态发生变化时被调用，而不是其他。

然而，如果我们使用useMemo钩子，它将记住invoiceInfo的最后一个值，并且只有在依赖关系（发票）被更新时，它才会再次运行计算。

如果你有一个有很多属性的用户对象，你真的不希望把它们一个一个地传给你的子组件。而是将用户作为一个整体来传递。

[

medium.com