更改路由时如何防止 React 组件重新渲染？

Question

我有 React 组件：allUsersList 和 userDetail。在第一个中，我正在获取所有用户并显示它们，通过单击每个用户，我正在更改路线并转到第二个组件，但是当我单击箭头返回浏览器时，第一个组件开始获取数据并再次重新渲染.你能告诉我如何防止它进行额外的重新渲染吗？

这是 AllUsers 组件：

import React, {useEffect, useMemo} from 'react';
import { Link } from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux';
import {setAllUsers, setLoading, setPage} from '../redux/actions/actions';
import User from './User';
import '../styles/AllUsersList.css';

const AllUsersList = () => {
    const allUsers = useSelector(state => state.setAllUsersReducer);
    const page = useSelector(state => state.setPageReducer);
    const loading = useSelector(state => state.setLoadingReducer);
    const dispatch = useDispatch();
  

    const fetchAllUsers = () => {
       fetch(`${url}/${page}/15`)
            .then(res => res.json())
            .then(data => {
                dispatch(setAllUsers(data.list));
            })
            .catch(err => console.log('Error message: ', err))
    }

    useEffect(() => {
      fetchAllUsers();
    }, [page])

    const handleScroll = () => {
        dispatch(setPage());
    }

    window.onscroll = function () {
        if(window.innerHeight + document.documentElement.scrollTop === document.documentElement.offsetHeight) {
            handleScroll();
        }
    }


    return (
        <div className="allUsersList">
            {
                allUsers ? (
                    allUsers.map((user, index) => (
                        <Link key={user.id} to={`/user/${user.id}`}>
                            <User name={user.name} lastName={user.lastName} prefix={user.prefix} title={user.title} img={user.imageUrl}/>
                        </Link>
                    ))
                ) : (
                    <div> Loading... </div>
                )
            }
        </div>
    )
}

export default AllUsersList;

这是 UserDetails 组件：

import React, {useEffect} from 'react';
import {useParams} from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import { setSelectedUser, removeUser, setSelectedUsersHistory } from '../redux/actions/actions';

export const UserDetails = () => {
    const selectedUser = useSelector(state => state.setSelectedUserReducer);
    const selectedUsersHistory = useSelector(state => state.setSelectedUsersHistoryReducer);
    const dispatch = useDispatch();
    const {userId} = useParams();
    const fetchUserDetails = () => {
        fetch(`${url}/${userId}`)
            .then(res => res.json())
            .then(data => {
                 dispatch(setSelectedUser(data));
              }
            )
            .catch(err => console.log('Error message: ', err))
    }

    useEffect(() => {
        if(userId && userId!=='') fetchUserDetails();
        
        return () => {
            dispatch(removeUser())
        }
    }, [userId])


    return (
        <div className="userDetails">
            {
                Object.keys(selectedUser).length === 0 ? (
                    <div>Loading...</div>
                ) : (
                    <div>{selectedUser.name}</div>
                )
            }
        </div>
    )
}

export default UserDetails;

这里是带有路由的 App,js：

import React from 'react';
import AllUsersList from './components/AllUsersList';
import UserDetails from './components/UserDetails';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

function App() {

  return (
    <div className="App">
      <Router>
        <Switch>
          <Route path="/" exact component={AllUsersList} />
          <Route path="/user/:userId" exact component={UserDetails} />
        </Switch>
      </Router>
 
    </div>
  );
}

export default App;

Answer 1

你试过 useMemo() 吗？ https://reactjs.org/docs/hooks-reference.html#usememo

一旦呈现，它就会“记忆”您的页面。这不是每次渲染的保证，但根据我的经验，它通常确实有效。