const或let in React组件

Question

假设我有一个React组件 - 哑或不 - 我想从商店中获取一些内容并将其放入变量中以使我的代码更简洁一些.我应该使用const还是让？显然,国家将发生变化.

这是我正在谈论的一个例子.同样,我想强调,当用户与我的应用程序交互时,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)

Answer 1

const是一个不会重新分配变量的信号.

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

需要思考的其他事项:

• const默认使用
• 使用let仅当需要重新绑定

• const 并不表示值是"常量"或不可变的.

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

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

• ES6 const也let被吊起来了.尽管标识符在编译时具有相同的内存引用,但在代码中声明之前无法访问它们.(但不是因为我们认为声明会在范围内被移动到顶部);)

Answer 2

constvs 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.

Answer 3

让我参考 ESLint 规则首选常量它对这个问题有很好的解释。

我唯一可以补充的是：

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

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