2017-09-13 19 views
5

Về cơ bản, tôi đã có thành phần phản ứng khá đơn giản này. Những gì nó làm là, quấn quanh 'phản ứng liên lạc' và chỉ hiển thị nó nếu có một sự thay đổi trong tiểu bang. Để đơn giản hóa câu hỏi, tôi đã sử dụng phương thức shouldCompoenentUpdate() để luôn trả về false.React shouldComponentUpdate() = false không dừng tái render

import React from 'react'; 
 
    import Intercom from 'react-intercom'; 
 
    
 
    class IntercomWrapper extends React.Component { 
 
     shouldComponentUpdate(nextProps, nextState) { 
 
      // console.log(!!nextProps.user && nextProps.user.userId !== this.props.user.userId); 
 
      // return !!nextProps.user && nextProps.user.userId !== this.props.user.userId; 
 
      return false; 
 
     } 
 
    
 
     render() { 
 
      console.log('rendering'); 
 
      return <Intercom {...this.props} />; 
 
     } 
 
    }; 
 
    
 
    export default IntercomWrapper;

gì xảy ra là nó luôn luôn rerenders, whish không nên xảy ra.

Bất kỳ ai cũng có ý tưởng tại sao điều đó lại xảy ra?

+1

thêm console.log vào 'componentDidMount',' componentWillUpdate' và 'componentDidUpdate'see cái nào trong số chúng được kích hoạt. Nếu thành phần này chưa được kết nối và cập nhật lạiComponentUpdate sẽ không hoạt động – bennygenel

Trả lời

1

này sẽ không ngăn chặn vẽ các thành phần con:
Từ DOCS:

Trở sai không ngăn cản các thành phần trẻ từ tái render khi thay đổi trạng thái của họ. ...

Lưu ý rằng trong tương lai Phản ứng có thể đối xử với shouldComponentUpdate() như là một gợi ý chứ không phải là một chỉ thị nghiêm ngặt, và trả về false có thể vẫn kết quả trong một tái dựng hình của các thành phần.

2

Theo số docs, chỉ cần trả về false không dừng hiển thị lại. Đọc this sẽ chỉ cho bạn cách thực hiện đúng cách.

More Information

0

I figured it out cuối cùng:. Vấn đề là các thành phần gói đã nhận được sự thay đổi trạng thái, và được rerendering tất cả trẻ em vô điều kiện (đó là hành vi bình thường Đó là một vấn đề của việc sắp xếp lại các thành phần (nhận Intercom này wrapper ra khỏi thành phần <Layout> của tôi) Cảm ơn tất cả vì sự giúp đỡ! Chúc mừng!

Các vấn đề liên quan