Thực hành tốt nhất về các kiểu mã ES6

Question

Gần đây tôi đã bắt đầu tìm hiểu ReactJS và do đó - ES6. Tôi khá quen thuộc với ES5, nhưng một số điều không rõ ràng đối với tôi.

Ví dụ 1: Phương pháp cú pháp

sự khác biệt giữa hai phương pháp sau đây là gì?

export class InvoiceForm extends React.Component { 
    methodName1() { 
    } 

    methodName2 =() => { 

    }; 
} 

Ví dụ 2: tính Lớp bên ngoài

class Greeting extends React.Component { 
    render() { 
    return (
     <h1>Hello, {this.props.name}</h1> 
    ); 
    } 
} 

Greeting.propTypes = { 
    name: PropTypes.string 
}; 

propTypes là bên ngoài lớp. Nhưng tại sao? Tôi đến từ python và như đối với tôi, sau đây là đúng hơn

class Greeting extends React.Component { 
    static propTypes = { 
    name: PropTypes.string 
    } 
    render() { 
    return (
     <h1>Hello, {this.props.name}</h1> 
    ); 
    } 
} 

Answer 1

Sự khác biệt giữa hai phương pháp sau đây là gì?

methodName1() { } 

trên là một chức năng bình thường và this từ khóa trong chức năng này đề cập đến bối cảnh của hàm riêng của mình.

Vì vậy, nếu bạn cố gắng truy cập Phản ứng lớp Thuộc tính/các chức năng như this.setState bạn sẽ nhận được một lỗi (nếu bạn chưa sử dụng ràng buộc bất cứ nơi nào cho methodName1 như:

this.methodName1 = this.methondName1.bind(this) prefarbaly bạn muốn làm điều đó bên trong phương thức khởi tạo.

Nếu bạn muốn tìm hiểu thêm về this ràng buộc, bạn có thể nhìn thấy this Article

Tuy nhiên Trong methodName2 cú pháp thứ hai, hàm được viết bằng cú pháp chức năng mũi tên.

methodName2 =() => { 
    }; 

Một mũi tên hàm không có riêng của mình này, lập luận, siêu hay new.target. Do đó từ khóa bên trong hàm này sẽ tham chiếu đến ngữ cảnh của lớp React (React.Thành phần) như mô tả Here

Và liên quan đến câu hỏi thứ hai của bạn

tính Lớp bên ngoài

Tôi tin là nó sử dụng JSX, và JSX được hỗ trợ bởi Babel và ES6 sẽ gần như chắc chắn không bao gồm cú pháp để xác định các biến lớp. Bạn có thể đọc thêm nó Here

Answer 2

sự khác biệt giữa hai phương pháp sau đây là gì?

Phương thức đầu tiên là phương thức nguyên mẫu (this.__proto__.methodName1) không bị ràng buộc với this ngữ cảnh và hợp lệ trong ES6. Phương thức thứ hai là phương thức mẫu (this.methodName1) được liên kết với this ngữ cảnh và a part of a proposal.

propTypes nằm ngoài lớp học. Nhưng tại sao?

Vì các trường lớp không được hỗ trợ trong ES6. Vì ví dụ này sử dụng JSX và được cho là được xây dựng với Babel theo bất kỳ cách nào, nên sử dụng các tính năng ES.next và trường static propTypes = ....