const hoặc để trong React component

Question

Giả sử tôi có một thành phần React - câm hay không - và tôi muốn lấy thứ gì đó từ cửa hàng và đặt nó vào một biến để làm cho mã của tôi thêm một chút nữa. Tôi có nên sử dụng const hoặc để cho? Rõ ràng tiểu bang sẽ thay đổi.

Đây là ví dụ về những gì tôi đang nói đến. Một lần nữa, tôi muốn nhấn mạnh rằng myValues ​​S change thay đổi khi người dùng tương tác với ứng dụng của tôi.

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 vs let chủ yếu liên quan đến "thay đổi" trong khối mã. Nó chỉ quan trọng trong những tình huống như thế này:

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

Trong tình huống này, bạn sẽ cần phải sử dụng chúng ta hãy vì bạn đang thay đổi giá trị được gán vào biến myValues:

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

Nếu props.someData đang thay đổi nó sẽ kích hoạt tái render của thành phần. Vì vậy, const vs let không đến để chơi. Toàn bộ phương thức render được chạy lại.

Vì vậy, nói rằng, tôi sử dụng const trong các trường hợp bạn mô tả. Trừ khi bạn đang trực tiếp thao tác giá trị của một biến, hãy sử dụng const.

Answer 2

Hãy để tôi tham khảo quy tắc ESLint prefer-const nó có giải thích tốt về vấn đề này.

Điều duy nhất tôi có thể thêm:

thích để bắt đầu tất cả các biến với constnếu bạn không chắc chắn

ngay cả khi bạn đột biến nó sau này, trình gỡ lỗi sẽ thông báo cho bạn

Answer 3

const là tín hiệu cho biết biến số sẽ không được gán lại.

let là một dấu hiệu cho thấy biến có thể được bố trí

Những việc cần suy nghĩ:

• Sử dụng const theo mặc định
• Sử dụng let chỉ khi rebinding là cần thiết

• const không cho biết thứ với giá trị là 'hằng số' hoặc không thay đổi.

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

  Chỉ ràng buộc là không thay đổi. tức là sử dụng một nhà điều hành chuyển nhượng hoặc một postfix unary hoặc - hoặC++ điều hành trên một biến const ném một ngoại lệ TypeError

• ES6 const và let là hoisted quá. Mặc dù các số nhận dạng có cùng tham chiếu bộ nhớ từ thời gian biên dịch, chúng không thể được truy cập trước khi khai báo trong mã.(nhưng không phải như chúng tôi nghĩ rằng tuyên bố sẽ được di chuyển vật lý lên đầu trong phạm vi);)