Game of Life trong React/Redux, giúp tăng hiệu suất

Question

Tôi đang làm việc trên một phiên bản của The Game of Life trong phản ứng/redux/javascript, trong khi tôi có nó làm việc hiệu suất là khủng khiếp.

Here is a link to the running game Here's the source on githhub

Tại thời điểm này, tôi ở mọi đánh dấu (250,500,750ms thay đổi bởi người sử dụng) cập nhật tình trạng của mỗi tế bào. Cho rằng tôi đang lặp qua một mảng các đối tượng đại diện cho mỗi ô. Trong mỗi đối tượng là một tham số được gọi là trạng thái có thể là số nguyên trên 1 cho số còn lại hoặc 0 cho số người chết.

Tôi sau đó kéo ba hàng của ba ô, cho các hàng ở giữa và dưới cùng xung quanh ô được đề cập, sau đó tổng các giá trị đó (không bao gồm chính ô đó ở giữa).

Sau đó, tôi chạy số đó thông qua luồng nếu/sau đó để quyết định trạng thái mới của ô đó.

Quy trình này sau đó lặp lại cho từng ô trong ứng dụng. Một khi nó được thực hiện trạng thái mới của mỗi tế bào được gửi đi bằng cách sử dụng redux và các thành phần cập nhật khi cần thiết.

Trong chế độ xem thực tế, mỗi ô là một thành phần phản ứng nhận trạng thái của nó như là phần tử chống đỡ từ vùng chứa là lưới. Tôi đã thiết lập shoulComponentRender() để chỉ tái render ô khi trạng thái của nó thay đổi.

Tôi nghĩ từ việc lược tả ứng dụng (mà tôi không rõ ràng/giỏi) rằng đó là quá trình tính toán tất cả các giá trị làm chậm mọi thứ, nhưng tôi có thể sai và có thể là các thành phần React đang gây ra sự cố.

Bất kỳ trợ giúp/hỗ trợ nào được đánh giá cao!

Answer 1

Vì vậy, cuối cùng không bao giờ có hiệu suất đến một mức độ thỏa đáng bằng cách sử dụng các thành phần DOM và html. Vì vậy, tôi đã viết lại mã lưới để hiển thị tất cả các ô bằng cách sử dụng HTM5 Canvas và hiệu suất không còn là vấn đề nữa, trên thực tế, nó hiện khá hài lòng trên iPhone.

Answer 2

Tôi nghĩ rằng đây có thể là vấn đề. Bởi profiling chúng ta thấy:

Bạn có vụ nổ làm việc với một khoảng thời gian đều đặn, mỗi uống khoảng 85ms mà là rất không bình thường. Nhìn xuống ngăn xếp cuộc gọi có một số triggerTimer và một cuộc gọi hàm startTimer tiếp theo.

Nhìn vào mã nguồn cho các mã sau: https://github.com/gazzer82/fcc-game-of-life/blob/a4a000a6cafa5877a4a15e59cec5184076905cc4/src/containers/lower_buttons.jsx#L12.

Bạn cần trả lại từ startTimer trong điều kiện. Nếu không, triggerTimer và startTimer sẽ gọi cho nhau nhanh hết mức có thể, và sinh ra thời gian chờ mới mỗi lần.

Trước

startTimer(){ 
    var that = this; 
    if(this.props.controls.game === 'running'){ 
     this.props.stepState(); 
    } 
    setTimeout(() => this.triggerTimer(), this.props.controls.speed); 
    } 

    triggerTimer(){ 
    this.startTimer(); 
    } 

Sau

startTimer(){ 
    var that = this; 
    if(this.props.controls.game === 'running'){ 
    this.props.stepState(); 
    // Return here 
    return; 
    } 
    setTimeout(() => this.triggerTimer(), this.props.controls.speed); 
} 

triggerTimer(){ 
    this.startTimer(); 
}