2016-11-27 1 views
14

React 컴포넌트 - 바보인가 아닌가 -를 말하면 상점에서 무엇인가 잡고 변수에 넣어 코드를 좀 더 간결하게 만들고 싶습니다. const 나 let을 사용해야합니까? 분명히 상태가 바뀔 것입니다.const 또는 let in 반응 컴포넌트

다음은 내가 말하는 것에 대한 예입니다. 다시 말해, 사용자가 내 앱과 상호 작용할 때 myValues가 변경된다는 점을 강조하고 싶습니다. let

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) 

답변

12

const는 코드 블록에서 "변화"와 함께 할 대부분이다.

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

props.someData 경우가 트리거 변화 : 당신은 당신이 변수 myValues에 할당 된 값을 변경하기 때문에하자 사용해야합니다이 상황에서

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

: 그것은 단지이 같은 상황에서 중요한 컴퍼넌트의 재 렌더링 그래서 const 대 let은 게임에 오지 않습니다. 전체 render 메서드가 다시 실행됩니다.

그렇게 말하면, 설명하는 상황에서 const을 사용합니다. 가변 변수를 직접 조작하지 않는 한 const을 사용하십시오.

1

ESLint 규칙 prefer-const을 참조하겠습니다.이 문제에 대한 좋은 설명이 있습니다.

유일한 것은 내가 추가 할 수 있습니다

가 확실하지 않은 경우 const모든 변수를 시작하는 것을 선호

당신이 나중에 돌연변이 경우에도, 디버거가 당신에게 알려줄 것입니다

16

const은 변수가 다시 할당되지 않을 신호 인 입니다.

let

변수가 깊이 생각해

추가 일을 재 할당 할 수 있다는 신호입니다 : 리 바인딩이 필요한 경우에만

  • 사용 let 기본적으로

    • 사용 const
    • const은 th를 나타내지 않습니다. 값이 '상수'이거나 불변 인 경우

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

      바인딩 만 변경할 수 없습니다. 즉 할당 연산자 나 단항 또는 접미사를 사용 - const를 변수 또는 ++ 연산자 것은

    • ES6 constlet이 너무 hoisted를됩니다 TypeError 예외를 발생시킵니다. 식별자는 컴파일 타임의 메모리 참조가 같지만 코드에서 선언하기 전에 액세스 할 수 없습니다.(그러나 선언문이 범위에서 맨 위로 물리적으로 옮겨 갈 것이라고 생각하지는 않았다))

  • 관련 문제