IT技术 - React 组件中的 const 或 let - 吾爱随笔录

React 组件中的 const 或 let

IT技术 reactjs ecmascript-6

2021-04-22 01:59:57

假设我有一个 React 组件——无论是否愚蠢——我想从商店中获取一些东西并将其放入一个变量中，以使我的代码更简洁一些。我应该使用const还是let？显然状态会改变。

这是我正在谈论的一个例子。再次强调，当用户与我的应用程序交互时，myValues 会发生变化。

class MyComponent extends Component {

    render() {

        // Here, should I use const or let?
        const myValues = this.props.someData;

        return(
            <div>

            {myValues.map(item => (
                    <SomeOtherComponent key={item.id} data={item} />
                ))}

            </div>
        );
    };
}

function mapStateToProps(state) {
    return {
        someData: state.someValuesComingFromApi
    }
}

export default connect(mapStateToProps)(MyComponent)

4个回答

const是变量不会被重新分配的信号。

let是变量可能被重新分配的信号

需要考虑的其他事项：

const默认使用
使用let仅当需要重新绑定
const 并不表示值是“恒定的”或不可变的。
```
const foo = {};
foo.bar = 10;
console.log(foo.bar); // --> 10
```
只有绑定是不可变的。即在 const 变量上使用赋值运算符或一元或后缀 -- 或 ++ 运算符会引发 TypeError 异常
ES6const也let被吊起来了。尽管标识符在编译时具有相同的内存引用，但在代码中声明之前无法访问它们。（但不是我们认为声明会被物理移动到范围的顶部）；）

+1 表示“const 并不表示值是‘常量’或不可变的。” - 当你刚刚学习 React 时，这感觉很奇怪，但从技术上讲是有道理的

2021-06-14 01:59:57

constvslet主要与代码块中的“更改”有关。只有在这样的情况下才重要：

const myValues = this.props.someData;
if (*some condition*) {
  myValues = [];
}

在这种情况下，您需要使用 let 因为您正在更改分配给变量的值myValues：

let myValues = this.props.someData;
if (*some condition*) {
  myValues = [];
}

如果props.someData正在更改，它将触发组件的重新渲染。所以 const 与 let 没有发挥作用。整个render方法重新运行。

也就是说，我const在您所描述的情况下使用。除非您直接操作变量的值，否则请使用const.

我有一个疑问，如果我们要更改分配给变量的值，我们使用 :let myValues而不是 const myValues。那么为什么不使用var myValues呢？对不起，愚蠢的问题（如果是的话），我是反应的新手。

2021-05-25 01:59:57

@AnishArya 人们普遍认为var不应再使用它，因为如果您不小心，它可能会导致令人惊讶的结果。声明为var具有函数作用域的变量，即。可以在声明它的函数内部访问。这可能会使习惯于具有块作用域的编程语言（Java、C#、C++ 等）的开发人员望而却步。声明为let或const具有块作用域的变量，即。只能在声明它的块内访问。参见softwareengineering.stackexchange.com/questions/274342/...

2021-06-06 01:59:57

让我参考 ESLint rule prefer-const它对这个问题有很好的解释。

我唯一可以补充的是：

如果您不确定，更喜欢用所有变量开始const

即使您稍后对其进行变异，调试器也会通知您

常量

是 contant 的缩写，表示变量的值不会改变。
让

是相反的，这意味着变量的值会改变
无功

两者之间只是中立。

其它你可能感兴趣的问题

上一篇如何使用 React Hooks 专注于下一次渲染下一篇如何让react-router以 404 状态代码响应？