const 或 let 在 React 组件中

Question

假设我有一个 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)

原文由 Sam 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

const vs let 主要与代码块中的“更改”有关。它只在这样的情况下很重要：

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

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

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

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

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

原文由 erik-sn 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

需要考虑的其他事项：

• 默认使用 const
• 仅在需要重新绑定时使用 let
• const 并不表示值是“常量”或不可变的。

   const foo = {};
  foo.bar = 10;
  console.log(foo.bar); // --> 10

只有绑定是不可变的。即在 const 变量上使用赋值运算符或一元或后缀 - 或 ++ 运算符会引发 TypeError 异常

• ES6 const 和 let 也被 提升。尽管标识符在编译时具有相同的内存引用，但在代码中声明之前无法访问它们。 （但不像我们认为的那样，声明会被物理地移动到范围的顶部）；）

原文由 yadhu 发布，翻译遵循 CC BY-SA 3.0 许可协议