React ES6에서 세 가지 변수 정의를 사용하는 것이 더 낫습니다. 왜?

Question

배열을 arr을 선언 이러한 세 가지 방법을 고려

// One 
const arr = [7,8,9]; 
class WatchStore extends Component { 
    constructor(props) { 
    super(props); 
    } 
    ...... 
} 

// Two 
class WatchStore extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     arr: [7,8,9], 
    } 
    } 
    ...... 
} 

// Three 
class WatchStore extends Component { 
    constructor(props) { 
    super(props); 
    } 
    componentDidMount() { 
    this.arr = [7,8,9]; 
    } 
    ...... 
} 

가장 "올바른"간주 가장 좋은 방법은이 무엇입니까? arr은 렌더링 할 필요가 없으며 임시 캐시 일뿐입니다.

Answer 1

의미 상으로 두 번째는 다른 두 번째와 다릅니다. 당신이 언급 한 바와 같이 그 이유는 다음과 같습니다

arr

렌더링 할 필요가 없습니다, 그냥 일시적인 캐시입니다.

만 이제까지 적극적으로 변경되는 경우 상태에서 항목을 넣어 구성 요소의 상태로 중요하다. 초기 렌더링 후에 변경하지 않더라도 의미 론적 문제입니다. 상태와 관련이없는 경우 (구성 요소의 표시에 의미있는 방식으로 변경되지 않으므로) 상태로 들어선 안됩니다.

첫 번째 및 세 번째는 의견 수렴이 필요합니다. 내가 사용하고자하는 엄지 손가락 규칙은 변수를 으로 제한하는 것입니다. 첫 번째 예제에서 클래스 외부와 같이 더 높은 범위에서 선언 된 것이 있지만 클래스 외부에서 사용되지 않는 경우에는 거기에 선언하지 마십시오. 이는 불필요한 스코프 오염을 제거하기 때문에 모범 사례입니다. 여기에 실제로 적용되지는 않더라도 따르는 습관이 좋습니다. 따라서 을 생성자에 설정하면 수명주기 후크이 아닌 을 설정하면 가장 정확한 ""이됩니다. 이는 arr이 상태가 아니라 구성 요소 자체와 관련된 아이디어를 의미 론적으로 전달하고 arr을 가능한 가장 좁은 범위.

Joshua Rubin이 지적했듯이, 수명주기 후크를 사용하지 마십시오. 그럴 필요는 없습니다. 왜냐하면 생성자에서 직접 완벽하게 설정할 수 있기 때문입니다.

Answer 2

arr이 변경되지 않으면이를 구성 요소 상태로 저장할 필요가 없으며 구성 요소를 복잡하게하는 불필요한 수명주기 후크 componentDidMount에 배치 할 필요가 없습니다. 그것은 One을 떠난다 - 그것은 적어도 매우 명백하다.

도 arr이 필요하지 않은 경우 생성자에서 this.arr을 생성자로 설정할 수 있습니다. 논의를 위해 arr의 정의가 다른이 구성 요소의 인스턴스를 여러 개 생성하려면 해당 구성 요소를 소품을 통해 생성자에 전달하고 this.arr을 값을 구성 요소 값으로 설정하는 것이 좋습니다.