Làm thế nào để làm cho đạo cụ bất biến để ngăn chặn sự tái xuất hiện trong React?

Question

Tôi đã tạo một ứng dụng nhỏ bằng cách sử dụng react.js. Tôi lấy 'hiệu suất' vào tài khoản quá mức.

Vì vậy, tôi có một thành phần con đơn giản có tên là "Spinner". Mục tiêu của tôi là đảm bảo thành phần này không bao giờ được hiển thị lại.

Đây là thành phần của tôi:

import React, {PureComponent} from 'react'; 

export default class Spinner extends PureComponent { 

render() { 
    return (
     <div className="spinner"> 
      <div className="bounce1"></div> 
      <div className="bounce2"></div> 
      <div className="bounce3"></div> 
     </div> 
    ) 
} 

} 

Trong thời điểm tái dựng hình với 'phản ứng-addons-Perf', thành phần luôn render, tôi đang sử dụng PureComponent vì tôi muốn thành phần đó để render chỉ một lần, tôi đọc rằng tôi có thể sử dụng đạo cụ bất biến nhưng tôi không biết làm thế nào để làm điều này có thể.

Nếu tôi làm cho một số như sau:

componentDidMount() { 
    this.renderState = false; 
} 

shouldComponentUpdate(nextProps, nextState) { 
    return (this.renderState === undefined) ? true : this.renderState; 
} 

Nó được render chỉ có một thời gian, nhưng tôi tin rằng có một cách tốt hơn.

Làm cách nào để tránh hiển thị lại? hoặc có thể Làm thế nào tôi có thể làm một đạo cụ bất biến?

Answer 1

Bạn không cần thêm logic cho componentShouldUpdate, vì bạn không muốn thành phần của mình xuất hiện trở lại.

Thêm chỉ thế này là đủ để ngăn chặn thành phần để rerender:

shouldComponentUpdate(nextProps, nextState) { 
    return false 
} 

Answer 2

Đối với các thành phần không quốc tịch mà không cần đạo cụ, chúng ta có thể sử dụng một sự kết hợp của một (stateless) thành phần Functional, và babel của React constant elements transformer để tối ưu hóa việc tạo thành phần và ngăn chặn hoàn toàn các rerenders.

1. Thêm React constant elements transformer vào hệ thống xây dựng của bạn. Theo docs biến áp sẽ:

   tời yếu tố tạo đến cấp cao nhất cho subtrees rằng hoàn toàn tĩnh, làm giảm cuộc gọi đến React.createElement và kết quả phân bổ. Quan trọng hơn, nó cho React biết rằng cây con đã không thay đổi để React hoàn toàn có thể bỏ qua nó khi điều chỉnh.

2. Thay đổi spinner thành thành phần không trạng thái.

   const Spinner =() => (
       <div className="spinner"> 
       <div className="bounce1"></div> 
       <div className="bounce2"></div> 
       <div className="bounce3"></div> 
       </div> 
   ); 
   
   export default Spinner; 
   

Answer 3

Bạn có thể làm đạo cụ của bạn không thay đổi trong phản ứng bằng cách sử dụng Immutable JS chuyển đạo cụ mảng của bạn vào Lists và phản đối đạo cụ int Maps. Với thư viện này, bạn có thể sử dụng kiểm tra đơn giản để kiểm tra sự bình đẳng giữa các mảng/đối tượng (thay vì đi qua phím/giá trị cho sự bình đẳng):

shouldComponentUpdate(nextProps) => { 
    this.props.complexObjectAsMap === nextProps.complexObjectAsMap 
} 

Nhưng kể từ khi thành phần của bạn không có bất kỳ đạo cụ - điều này không nhìn đúng câu hỏi. Trong trường hợp của bạn, tôi sẽ đi với câu trả lời Ori Drori.