React Native Stylesheet.create 是如何工作的？

Question

这里是创建方法的代码。

  create<+S: ____Styles_Internal>(obj: S): $ReadOnly<S> {
    // TODO: This should return S as the return type. But first,
    // we need to codemod all the callsites that are typing this
    // return value as a number (even though it was opaque).
    if (__DEV__) {
      for (const key in obj) {
        if (obj[key]) {
          Object.freeze(obj[key]);
        }
      }
    }
    return obj;
  },

这个函数是如何工作的，

Answer 1

create<+S: ____Styles_Internal>(obj: S): $ReadOnly<S> {

定义一个名为create 的函数，该函数有一个名为obj 的参数。它是类型注释的，使用Flow，含义如下：

• 参数obj是S类型，用obj: S表示
• 其中S 是____Styles_Internal 的类型或子类型，由<+S: ____Styles_Internal> 表示。 + 是 variance sigil，表示接受 covariant 类型（作为子类型的类型以及类型本身）
• 返回类型是obj 的只读版本，用$ReadOnly<S> 表示

    if (__DEV__) {
      for (const key in obj) {
        if (obj[key]) {
          Object.freeze(obj[key]);
        }
      }
    }

for...in 迭代enumerable properties，如果属性的值为真，则该值被Object.freeze 冻结。该值通常是一个对象（请参阅 React Native 的样式表文档中的 examples），因此冻结它会阻止对象被更改。这些事情只发生在__DEV__ 变量为true，表示代码在开发环境中运行。

我没有编写代码，所以我只能推测它为什么会这样：

• 根据代码作者的commit 消息，此行为可能仅在开发中发生，因为它可能会破坏生产应用程序：

我真的不知道我们是否有/需要任何比登陆它更安全的方式来推出它。如果传递给 StyleSheet.create 的对象在之后发生突变，它可能会中断，但这不是我见过的任何做法。

• 我不知道为什么要测试是否冻结是真实的。
• 我不确定为什么对象需要冻结，但我怀疑这是为了消除变化样式对象的意外副作用，因为 React 可能会通过引用比较渲染之间的样式对象。

    return obj;
  },

返回对象。

进一步阅读

• Covariance and contravariance
• Subtyping