Phản hồi cách xóa danh sách chính xác trong componentWillUnmount, tại sao tôi cần liên kết trong hàm tạo?

Question

Tôi là một chút bối rối, sự khác biệt giữa sintax đây là những gì:

constructor(props) { 
    super(props); 
    this.state = { 
     openPane: false 
    } 
    this.togglePaneHelper = this.togglePaneHelper.bind(this); 
    } 
    componentDidMount() { 
    document.body.addEventListener('click', this.togglePaneHelper); 
    } 
    componentWillUnmount() { 
    document.body.removeEventListener('click', this.togglePaneHelper); 
    } 

và một này:

constructor(props) { 
    super(props); 
    this.state = { 
     openPane: false 
    } 
    } 
    componentDidMount() { 
    document.body.addEventListener('click', this.togglePaneHelper.bind(this)); 
    } 
    componentWillUnmount() { 
    document.body.removeEventListener('click', this.togglePaneHelper); 
    } 

mối quan tâm của tôi là cú pháp thứ hai là không loại bỏ một cách chính xác các listner và nó gây ra cảnh báo này:

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the undefined component. 

Answer 1

QUAN TRỌNG:

a.bind(this) !== a.bind(this) 

Theo MDN:

Các bind() phương pháp tạo một hàm mới rằng, khi được gọi, có nó từ khoá này thiết lập với giá trị cung cấp, với một chuỗi nhất định đối số trước bất kỳ khi nào hàm mới được gọi.

Cách tiếp cận đầu tiên của bạn ghi đè this.togglePaneHelper bằng chức năng mới, bị ràng buộc. Thứ hai loại bỏ chức năng nghe sự kiện khác nhau hơn nó đã được thêm vào - cả hai addEventListener và removeEventListener phải có cùng một tham chiếu của hàm.