Vấn đề điều hướng có thể xảy ra trong ứng dụng React Native/Redux

Question

Trong khi điều hướng trong ứng dụng React Native lớn bằng cách sử dụng Redux tất cả các cảnh được truy cập (cảnh từ ngăn điều hướng) đang được gắn kết. Tất cả những cảnh này nhận được các đạo cụ và được kết xuất theo thứ tự mà chúng được truy cập khi bất kỳ hành động nào được gửi đi từ thành phần cảnh cuối cùng. Nó gây ra đóng băng và sự chậm trễ có thể nhìn thấy giữa việc gửi đi và hiển thị cảnh cuối cùng.

Để điều hướng, tôi đang sử dụng react-native-router-flux nhưng vấn đề tương tự cũng xảy ra với Native Native Original Navigator.

video Possible navigation issues in React Native/Redux app

Mã react-redux-navigation-test

Sẽ được tốt đẹp để biết làm thế nào để ngăn chặn đạo cụ đi qua để không tập trung các thành phần từ các chuỗi điều hướng.

Hiện tại tôi đang kiểm tra trong shouldComponentCập nhật mỗi thành phần nếu cột này được lấy nét (có thể nhìn thấy) và trả về false trong trường hợp ngược lại.

Có giải pháp nào tốt hơn không?

Answer 1

Tôi chưa sử dụng phản ứng-bản địa-bộ định tuyến-thông lượng, tuy nhiên tôi có kinh nghiệm với ứng dụng React Native và Redux khá lớn. Tôi đã nhận thấy rằng đôi khi nếu dữ liệu bạn đang làm việc với đủ lớn nó có thể gây ra sự chậm trễ đáng chú ý, nhưng những người chủ yếu là hạn chế để làm việc trong phát triển. Khi ứng dụng được xây dựng, nó thường nhanh hơn đáng kể. Có vẻ như Redux làm những việc hơi khác một chút trong chế độ phát triển và sản xuất.

Về các cảnh trong ngăn điều hướng vẫn đang được gắn kết, đó là do thiết kế. Ngay cả khi bạn navigator.push đến màn hình khác, những màn hình trước đó vẫn được gắn cho đến khi chúng được bật ra khỏi số currentRouteStack hoặc được thay thế từ currentRouteStack.

Ngoài ra, có thể đáng chú ý là trình mô phỏng của bạn ở chế độ Hoạt ảnh chậm. Bạn không chắc chắn nếu bạn đã làm điều đó vì lợi ích của video hay không, nhưng sự chậm trễ chuyển hướng một phần là do đó. Chỉ cần một người đứng đầu trong trường hợp đó là không có mục đích.

Tôi sẽ kiểm tra xem ứng dụng dường như hoạt động như thế nào sau khi bạn đã tạo và ứng dụng không ở chế độ phát triển trước khi khắc phục sự cố hiệu suất nhiều hơn nữa. Có thể không phải là vấn đề đối với sản phẩm ứng dụng cuối cùng.

Answer 2

Tôi khuyên bạn nên tính toán khoảng cách cảnh giữa cảnh hiện tại và cảnh đang được hiển thị bằng chỉ mục điều hướng trong phương thức hiển thị cảnh và tiêu đề. Nếu khoảng cách> 1 trả về null.

Điều này sẽ ngăn hiển thị toàn bộ lịch sử điều hướng. Nó không có ý nghĩa với tôi rằng loại hành vi này không có sẵn trong hộp, nhưng có nó.

Answer 3

Tôi sẽ đi ra ngoài một chi ở đây nhưng bạn có đang sử dụng một trong các phương pháp dưới đây để ngăn hiển thị lại không?

• PureComponents (thêm vào trong Phản ứng 15,3 I think)
• thủ với nông so sánh đạo cụ và nhà nước với phương pháp shouldComponentUpdate.

Theo mặc định React sẽ hiển thị lại tất cả các thành phần khi cập nhật trừ khi bạn xử lý chính xác thẻ shouldComponentUpdate.

tôi đang làm một cái gì đó tương tự và không có những vấn đề này ở tất cả các

Answer 4

Vấn đề thực sự là toàn bộ menu ngăn xếp được kết nối với các cửa hàng (vì các thành phần không phải là chưa lắp ráp, trừ khi bạn sử dụng resetto hoặc resetnavigation)

Đối với những gì nó có giá trị ở đây là những gì tôi làm ngay bây giờ. Tôi đã được làm việc với một thực hiện Redux chút thay đổi phản ứng mà bỏ qua bản cập nhật cho những cảnh mà không phải là theo quan điểm (xem dưới đây)

Để sử dụng nó, bạn cần phải:

Store đường cho cây một thành phần trong bối cảnh

Chúng tôi tạo ra một wrapper cho điều này

const CurrentRoute = React.createClass({ 
childContextTypes : { currentRoute: PropTypes.object }, 
getChildContext() { 
return { currentRoute: this.props.route } 
}, 
render() { return this.props.children; } 
}) 

Và sử dụng nó trong làm cho cảnh

<CurrentRoute route={route}><CurrentScene navigate={navigate} route={route} index={index} /></CurrentRoute> 

Sau đó, bạn có thể truy cập tuyến mà thành phần đã được hiển thị.

Store menu ngăn xếp trong một singleton Chúng tôi sử dụng mã này trong cảnh configure

let routeStack = []; 
export const updateRouteStack = stack => routeStack = stack; 

Sau đó, bạn có thể sử dụng chút thay đổi chức năng phản ứng-Redux kết nối này, nó sẽ bỏ qua bản cập nhật nếu thành phần được kết xuất trong thành phần khác cây sau đó hiện được hiển thị (hoặc cách triển khai tương tự) https://github.com/reactjs/react-redux/compare/master...ganmor:master

Có thể gói này nhưng tôi chưa có thời gian để xem xét. Nếu bất cứ ai cảm thấy thích làm điều đó .. Hy vọng rằng sẽ giúp

Answer 5

Chúng tôi đã giải quyết nó bằng cách đơn giản gói tất cả các màn hình trong một thành phần.

Chúng tôi có một thành phần ScreenView bao bọc toàn bộ màn hình và chuyển cho chúng một tham số "restrictRerendersToRoutes".

Màn hình này được kết nối với tiểu bang và chúng tôi cập nhật CurrentScrene ở trạng thái của chúng tôi và hiển thị nó ở chế độ xem màn hình này.

Sau đó, chúng tôi chỉ đơn giản là hạn chế rerenders khi màn hình ở chế độ nền với thực hiện shouldComponentUpdate này:

shouldComponentUpdate(nextProps) { 
    if (!_.empty(this.props.restrictRerendersToRoutes)) { 
     return !!this.props.restrictRerendersToRoutes 
     .find((routeKey) => routeKey === nextProps.currentScene.name); 
    } 

    return true; 
    }