React 实现列表页和列表详情页功能

1.简介

本篇文章将会基于react 实现列表页和列表详情的功能，后续会完善更多的功能细节。

2.实现

一、列表页 && 详情页

a.app.js

 入口类，实现路由功能

import './App.css';
import {BrowserRouter, Route, Routes} from 'react-router-dom';
import {UserList} from "./page/user-list";
import {UserDetail} from "./page/user-detail";

function App() {
    return (
        <div className="App">
            <BrowserRouter>
                <Routes>
                        <Route exact path="/users" element={<UserList/>}/>
                        <Route exact path="/user/:id" element={<UserDetail/>}/>
                </Routes>
            </BrowserRouter>
        </div>
    );
}

export default App;

b.user-list.js

列表页

import {useRequest} from "../hook/http";
import {useEffect} from "react";
import {Link} from "react-router-dom"

export const UserList = () => {
    // 这个是自定义请求hook(可以看之前文章)，state为请求执行状态和结果，doRequest会发起请求
    const {state, doRequest} = useRequest();


    useEffect(() => {
        // 可以mock下数据
        doRequest('http://vicyor.com/crm/users', {page: 1, pageSize: 20}, {}, 'POST');
    }, []);

    return (
        <div>
            <h1>user list</h1>
            <ul>
                {state.isLoading === false && state.val.map(user => (
                    <li key={user.id}><Link to={`/user/${user.id}`}>{user.name}</Link></li>
                ))}
            </ul>
        </div>
    )


}

c.user-detail.js

import {useEffect} from "react";
import {useRequest} from "../hook/http";

export const UserDetail = ({match}) =>{
    const {state, doRequest} = useRequest();
    useEffect(()=> {
        doRequest('http://vicyor.com/user/1', {}, {}, 'POST')
    },[])

    return (<div>
        {state.val && `username:${state.val.name}`}
    </div>)
}

使用效果

二、列表页 && 详情抽屉

a.user-list-detail.js

export const UserList = () => {

    const {state, doRequest} = useRequest();


    useEffect(() => {
        doRequest('http://vicyor.com/crm/users', {page: 1, pageSize: 20}, {}, 'POST')
    }, []);

    return (
        <div>
            <h1>user list</h1>
            <ul>
                {state.isLoading === false && state.val.map(user => (
                    <li key={user.id}>{user.name}</li>
                    <UserDetail userId = user.id/>
                ))}
            </ul>
        </div>
    );


}



export const UserDetail = ({userId}) =>{
    // 抽屉是否打开
    const [isOpen, setIsOpen]  = useState(false);
    
    const toggleDrawer = () =>{
        setIsOpen(!isOpen);
    };

    
    // 加载详情数据
    const {state, doRequest} = useRequest();
    useEffect(()=> {
        doRequest(`http://vicyor.com/user/${userId}`, {}, {}, 'POST')
    },[])

    return (
    <div>
        <button onClick = {toggleDrawer}>{isOpen ? 关闭详情 : 查看详情}</button>
        {isOpen && 
            // 抽屉
            <div style={{ backgroundColor: 'grey', width: '200px', height: '200px' }}>        
                {state.val && `username:${state.val.name}`}
            </div>}
    </div>);
}

b.app.js

function App() {
    return (
      <UserList/>
    );
}

export default App;

三、列表页借助useMemo优化

1.user-list.js

        使用useMemo hook替换useEffect, 给用户列表添加缓存，减少请求次数。

export const UserList = () => {

    const {state, doRequest} = useRequest();

    const [key,setKey] = useState('');
    
    // 使用useMemo,若key搜索过，则会返回之前的结果
    useMemo(()=>{
        doRequest(`http://vicyor.com/crm/key=${key}`, {}, {}, 'POST')
    },[key])
  

    return (
        <div>
            <h1>user list</h1>
            搜索: <input type = 'text' 
                   value = 'key' 
                   onChange = {event => setKey(event.target.value)})>
             <ul>
                {state.isLoading === false && state.val.map(user => (
                    <li key={user.id}>{user.name}</li>
                    <UserDetail userId = user.id/>
                ))}
            </ul>
        </div>
    );


}