繁体   English   中英

React无状态组件中'const'变量的顺序[重复]

Order of 'const' variables in React Stateless Components [duplicate]

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

这个问题在这里已经有了答案:

假设我有一个简单的 React 无状态组件,如下所示:

const myComponent = () => {
    const doStuff = () => {
        let number = 4;

        return doubleNumber(number);
    };

    const doubleNumber = number => {
        return number * 2;
    };

    return <div>Hello {doStuff()}</div>;
};

export default myComponent;

根据我收到的 eslint 错误,以及我对“const”如何工作的理解,我假设该组件不会呈现,因为 function“doStuff()”在初始化之前使用了 function“doubleNumber()”。 但是,每当我使用这个组件时,它都会按预期呈现 - 为什么它不抛出异常? 这是否意味着 React 组件中 'const' 变量的顺序可以是我们喜欢的任何顺序?

2 个回复

代码有效的原因是doStuff的主体在被调用之前不会执行。 由于doubleNumber恰好在调用doStuff之前定义,所以一切都很好,但是由于依赖倒置,代码被 linter 正确识别为易碎代码。

只有在调用doStuff时碰巧没有初始化doubleNumber时才会发生崩溃:

const doStuff = () => doubleNumber(4);
doStuff(); // ReferenceError: doubleNumber is not defined
const doubleNumber = number => number * 2;

这在这里似乎很明显,但在更复杂的情况下可能不是那么清楚。

constlet应该与 linter 的 output 无关,因为尽管它们被提升,但在初始化之前无法访问它们。

顺序可以是您喜欢的任何顺序,假设仅在依赖项可用时才进行调用,但这并不是一个好主意(这正是 linting 应该识别的内容)。

您的案例在块范围变量的 Typescript 文档中进行了描述(导航到该部分的最后一位)。

它说:

您仍然可以在声明之前捕获块范围的变量。 唯一的问题是在声明之前调用 function 是非法的。 如果以 ES2015 为目标,现代运行时将抛出错误; 但是,现在 TypeScript 是允许的,不会将其报告为错误。

给出的例子是

function foo() {
    // okay to capture 'a'
    return a;
}

// illegal call 'foo' before 'a' is declared
// runtimes should throw an error here
foo();

let a;

在您的情况下, doubleNumberdoStuff中被捕获,但是doubleNumberdoStuff之前声明,因此根据文档是可以的,就像文档示例中的变量a一样。

1 无状态组件作为函数或const

我知道使组件成为无状态的好处。 我不知道的是-使组件作为const或函数有什么区别。 我有点困惑,因为我已经看到了几个使用这两个示例的示例。 与 一个解释很好的选择会很棒 ...

2018-12-24 09:59:03 1 78   reactjs
2 React和无状态组件

我从React无状态功能组件中看到了这一评论:您可能忽略了九个胜利 : 您应该真正避免在无状态组件内部分配功能。 只是让它们超出范围并通过道具,这是一个很大的性能差异。 我想知道这是否是我的组件: 如何访问此文件之外的功能? 我应该使用哪个属性? ...

3 如何与React中的无状态组件通信?

我想创建一个包含按钮的非常简单的应用程序。 当我单击它时,应更改其名称,并将其状态更改为: isDisabled:true 。 我通过内联编写按钮,给它一个OnClick等来完成此操作,但是我想使用具有相同功能的无状态组件来尝试此操作,但是我完全陷入了困境。 import React, { ...

4 清除无状态React组件中的输入

我想在Input组件内实现一个X图标,该图标将清除输入字段。 如果我控制状态,则可以轻松完成。 但是无状态组件实际上有可能吗? 我使用react-semantic-ui,它们的有状态组件具有自动控制状态。 所以我想创建一个可以像这样使用的输入: //Controlle ...

5 什么是React中的无状态受控组件

在一次采访中,我被要求创建一个具有两个条件的自动填充组件, 它应该是受控组件,并且应该是无状态的。 但是在阅读了react文档之后,据我了解,一个组件只有在其输入具有处于状态中的单个真相源时,才是受控组件。 面试官在玩吗? ...

2017-10-02 18:48:52 3 346   reactjs
7 在无状态React组件中引用数据

我使用内部变量制作了一个无状态组件来引用输入,如下所示。 一切正常。 我要验证输入并显示通知, Must be numeric是不能转换为Must be numeric的任何内容,请输入我的输入字段。 但是,这不起作用。 如何在“警告div”的上下文中使input引用输入的值? ...

8 从无状态组件获取不同的const值

我是反应原生的新手。 抱歉,如果我的问题看起来很愚蠢。 我想在文件中写入每个http url并在需要的地方访问它们。 我怎样才能做到这一点? 例如,我是AllUrl.js文件,我想在其中写下以下网址 然后我想在需要的地方访问单个url字符串。 例如: 我该怎么做 ...

9 无状态功能组件 - React

我是 React 的新手,我正在网上做一些教程。 现在我有这样的任务:如果下面代码中的组件是一个无状态功能组件,你会写什么表达式来访问组件内的 items 属性? 我不知道什么是正确答案以及为什么:/你能帮我吗? ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM