const или let in React component

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) 

Answer 1

const против let в основном связано с «изменением» в блоке кода. Это имеет значение только в подобных ситуациях:

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

В этой ситуации вам нужно будет использовать позволить, потому что вы меняете значение, присвоенное переменной myValues:

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

Если props.someData меняется она будет срабатывать повторный рендер компонента. Так что const vs let не входит в игру. Весь метод render повторно запускается.

Таким образом, я использую const в ситуациях, которые вы описываете. Если вы напрямую не манипулируете ценностью переменной, используйте const.

Answer 2

Позвольте мне обратиться к правилу ESLint prefer-const, он имеет хорошее объяснение по этому вопросу.

Единственное, что я могу добавить:

предпочитают начинать все переменные с const, если вы не уверены

даже если вы мутировать позже, отладчик сообщит вам

Answer 3

const - это сигнал, что переменная не будет переназначена.

let является сигналом того, что переменная может быть переназначен

Дополнительные вещи, чтобы обдумать:

• Использование const по умолчанию
• Используйте let только если требуется перекомпоновка

• const не указывает при значении является «постоянным» или неизменным.

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

  Только переплет неизменен. то есть, используя оператор присваивания или одинарного или суффикса - или ++ оператор на константной переменной генерирует исключение TypeError

• ES6 const и let являются hoisted тоже. Хотя идентификаторы имеют одинаковую ссылку на память из времени компиляции, они не могут быть доступны до объявления в коде.(но не так, как мы думали, что декларация будет физически перемещена в верхнюю часть области);)