React源码深度解析 高级前端工程师必备技能

提升排查问题能力， 更好地理解react 开发模式 避免陷阱， 提高应用性能

项目链接

import { useState, useEffect } from 'react';
import { Button, WingBlank, Toast } from 'antd-mobile';

function Page(props) {
    const [state, setState] = useState({})
    const [req, setReq] = useState({ key: '', pageSize: 100 })
    const [list, setList] = useState([]);
    let setKey = (v) => {
        setState({
            key: v.target.value,
            pageSize: 100
        })
    }
    useEffect(() => {
        loadData();
    }, [req])

    return (
        <div className="projectSearch-box">
           
            <div className="search">
                <div className="input">
                    <div className="icon"><img src="/assets/icon/search-icon.png" alt="" /></div>
                    <input type="text" placeholder="搜索项目" onChange={setKey} />
                </div>
                <div className="search-t" onClick={() => { setReq(state) }}>搜索</div>
            </div>
            <div className="result-t">搜索结果如下：</div>
            <WingBlank>
                {
                    list.map((item, index) => {
                        return (
                            <div className="search-pro"
                                key={index}
                            >
                                <div className="pro-name">{item.projectName}</div>
                                <div className="detail">
                                    <div className="price">参考价格:
                                        {
                                            item.referAmount == null
                                            ?
                                            <span>暂无</span>
                                            :
                                            <span>{item.referAmount}</span>    
                                        }
                                    </div>
                                </div>
                            </div>
                        )
                    })
                }
                {
                    list.length <= 0
                        ?
                        <Norecord title="暂时没有您查找的内容"></Norecord>
                        :
                        null
                }
            </WingBlank>
        </div >
    )
}
Page.getInitialProps = async ({ req, query }) => {
    return { ...query }
}
export default Page;