当React Native Reanimated节点得到评估时

React Native Reanimated is a reimplementation of React Native’s Animated library. It is powerful and removes many limitations the latter has. However, it lacks good documentation and is difficult for beginners to start. In the past couple of weeks, I spent some time playing with this library to see when an animated node gets evaluated / updated in different scenarios. After many experiments, I figured several things out. Let’s have a look at them.

React Native复活是React Native的Animated库的重新实现。 它功能强大，消除了后者的许多限制。 但是，它缺少好的文档，并且对于初学者来说很难上手。 在过去的几周中，我花了一些时间使用此库，以查看动画节点在不同情况下何时得到评估/更新。 经过多次实验，我发现了一些问题。 让我们看看它们。

在Animated.useCode中 (In Animated.useCode)

Based on the official documentation, Animated.useCode hook is used in this way

根据官方文档，以这种方式使用Animated.useCode挂钩

As you can see, the first parameter in useCode hook is a factory function that should return an optional animated node or an array of nodes. Sometimes we want the node or the array of nodes to be evaluated, so that we can update the value used in the view to have the latest value. For example, in the code below, in useCode hook, we set the current value of opacity to the opacity returned from a timer and the opacity value is used to control the opacity of a view.

如您所见， useCode挂钩中的第一个参数是工厂函数，该函数应返回可选的动画节点或节点数组。 有时我们希望对节点或节点数组进行求值，以便我们可以将视图中使用的值更新为最新值。 例如，在下面的代码中，在useCode挂钩中，我们将不透明度的当前值设置为计时器返回的不透明度，并且不透明度值用于控制视图的不透明度。

So it is very important to know under what circumstances, the node inside useCode hook gets evaluated.

因此，了解在何种情况下useCode挂钩内的节点得到评估非常重要。

After some experiments, I found that the node inside useCode is evaluted / updated when

经过一些实验，我发现useCode内的节点在

1. The component is mounted

   组件已安装

Let’s see the example below

让我们看下面的例子

Every time when the above component is mounted, you can see the log

每次安装上述组件时，您都可以看到日志

console log in useCode 0

in your console and it means that

在您的控制台中，这意味着

The node inside useCode hook is evaluated when the React component is mounted

在安装React组件时评估useCode挂钩内的节点

2. The value of the input node is updated

2. 输入节点的值被更新

Let’s see the example below

让我们看下面的例子

After the above component is mounted, you find that you can only see one new log every time you click on the button.

装入上述组件后，您发现每次单击该按钮时只能看到一个新日志。

console log in useCode 1 1 

or

要么

console log in useCode 1 0

in the console and we do not see the debug information in useCode 2.

在控制台中，我们在useCode 2中看不到调试信息。

This is what happens after the button is clicked

这是单击按钮后发生的情况

1. The component state is updated to true or false
   组件状态已更新为true或false
2. The value of destValue is updated to 1 or 0
   destValue的值更新为1或0
3. In useCode 1, the node is evaluated with the updated value of destValue
   在useCode 1中，使用更新的destValue值评估节点

So, it means

所以，这意味着

The node inside useCode hook is evaluated when the React component is mounted

在安装React组件时评估useCode挂钩内的节点

3. The value of a useCode dependency is updated

3 。 useCode依赖项的值已更新

Let’s see the example below

让我们看下面的例子

After the above component is mounted, you find that you can see that a new log is printed in the console every time you click on the button.

装入上述组件之后，您会发现，每次单击该按钮时，您都可以看到在控制台中打印了一个新日志。

console log in useCode 0

It means that

代表着

The node inside useCode hook is evaluated when one of dependencies is updated

当依赖项之一更新时，将评估useCode挂钩内的节点

不在Animated.useCode中 (Not in Animated.useCode)

Sometimes, we may want to have a node outside Animated.useCode to get evaluated. Like the example below, we want the node inside getCustomOpacityValue function to get evaluated every time the React component is re-rendered.

有时，我们可能希望在Animated.useCode之外有一个节点来进行评估。 像下面的示例一样，我们希望每次重新渲染React组件时都对getCustomOpacityValue函数中的节点进行评估。

But, if you try the code above, you will find that the node inside getCustomOpacityValue is not evaluated after the React component is re-rendered after the ‘toggled’ state is changed by clicking on the toggle button.

但是，如果您尝试上面的代码，您会发现在通过单击切换按钮更改“切换”状态后重新渲染React组件后，不会评估 getCustomOpacityValue中的节点。

So when will the node in getCustomOpacityValue function get evaluated?

那么什么时候才能对getCustomOpacityValue函数中的节点进行评估？

Let’s have a look at the example below

让我们看下面的例子

This time, we connect the customOpacityValue to a view property and if you try again, you will see that the node inside getCustomOpacityValue function get evaluated every time you click on the toggle button. It means that

这次，我们将customOpacityValue连接到view属性，如果再次尝试，您将发现每次单击切换按钮时，getCustomOpacityValue函数中的节点都会得到评估。 代表着

The node outside useCode hook will get evaluated when the React component is mounted or re-rendered only if the node is connected to a view.

仅当节点连接到视图时，在安装或重新渲染React组件时，useCode挂钩外部的节点才会得到评估。

翻译自: https://medium.com/@spencerfeng/when-react-native-reanimated-nodes-get-evaluated-9374f7481441