Question

如果您有一个已经导入<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <LinearLayout android:id="@+id/lin" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/icons" android:orientation="vertical" > <ImageView android:id="@+id/gridImg" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_marginBottom="@dimen/_5sdp" android:layout_marginTop="@dimen/_5sdp" android:src="@mipmap/ic_launcher" /> <CheckBox android:id="@+id/chkImage" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="right"/> </LinearLayout> </LinearLayout>的父组件文件，为什么它的任何渲染子文件也需要导入React？这只是一个安全措施，以防这些孩子被送到React尚未进口的其他地方吗？

Answer 1

在nodejs中，每个文件都是一个模块，它有自己的变量范围。将变量导入文件（例如React）时，将此变量添加到模块范围，但不添加到全局范围。

如果是webpack，您可以使用providePlugin轻松地将React变量设为全局：

new webpack.ProvidePlugin({
  React: 'react' // ReactJS module name in node_modules folder
})

之后，您可以跳过在所有模块中导入React变量。 Webpack会在需要时自行完成。

Answer 2

如果您使用JSX和babel，则必须在每个文件中导入React，因为babel-preset-react会将您的JSX代码转换为React.createElement() }调用，所以这段代码

const Foo = () => <h1>Test</h1>;

将是

var Foo = function Foo() {
  return React.createElement(
    "h1",
    null,
    "Test"
  );
};

DEMO：Babel REPL

这就是为什么React应该在适当的范围内可访问的原因，一种方法是在文件中导入React。

Answer 3

问题的根源是依赖关系管理 - 我如何，作者，描述和获取我需要的外部依赖关系＆＃34; thing＆＃34; （应用程序/组件/模块）让它完成工作？

JavaScript有一个可以注入依赖关系的全局命名空间，从中受益（或受到影响）。虽然这通常可以在短期内简化依赖关系管理（例如，您可以忽略它并期望在全局命名空间中可用的所有内容），但随着应用程序的增长和变化，它通常会导致问题。例如，给定具有多个贡献者的应用程序，可能决定将应用程序的一部分更改为不再使用特定依赖项，从而将其删除。如果应用程序的另一部分需要它，但该依赖关系并未在任何地方正式声明，则可能很容易错过。

做好依赖管理，每个离散的＆＃34;＆＃34;应该独立于任何其他东西来描述它的依赖性＆＃34;这样它可以安全地用于任何给定的环境中。这确保了每一件事情。无论它如何使用以及它的父母是什么，它都能满足它的需要。（导入＆＃34;事物＆＃34;的代码）有。

这种方法的替代方案是依赖注入。在这个模型中，＆＃34;＆＃34;＆＃34;提供了一个接口，用于将依赖项传递给＆＃34; thing＆＃34;来自消费者。这有灵活性和可测试性优势，超出了您的问题范围。：）

ClassCassException

所有这些都说，这是一个安全措施＆＃34;拥有每一件事＆＃34;导入自己的依赖项。它可以让您安全地重构代码，而无需记住提供这些依赖项的认知开销。

Answer 4

原因是为了避免不必要编译一个你没有编译jsx的JavaScript代码。例如，你有一个具有要添加的函数的文件，或者不需要编译jsx的任何函数，那么你不要将 import React从'react'放在顶部那个文件。这将节省您的编译时间。

为什么需要在父组件和子组件中多次导入React？

4 个答案: