京东前端社招面经
京东前端社招面经
社招一面
部门-零售相关的部门
1.自我介绍
2.简单问了简历上的东西(无八股文)
3. hook 和普通组件什么区别
4. 最近用webpack做了什么
5. 发布流程
6. 灰度的实现
手写题
三道题,半小时内写出来两到即可(期间可以查询资料)
7. css或者canvas 方式实现
8. 基于现有代码现改造
import { Header } from '../App';
import './index.css';export default function App() {const images = ['https://img10.360buyimg.com/pop/s1180x940_jfs/t1/184419/8/18902/98852/6114bd1bEa22d6dbb/1cfa09c57dbf3817.jpg.webp','https://img20.360buyimg.com/pop/s1180x940_jfs/t1/205839/27/1042/77199/61160925E45a2be3d/3b4bd86cb2fd472a.jpg.webp','https://img12.360buyimg.com/pop/s1180x940_jfs/t1/200666/3/2407/80779/611cbdbfE67561765/802cf07557ad00c6.jpg.webp','https://imgcps.jd.com/ling4/10027090396947/5LiK5Lqs5pud6YCb5paw5ZOB/5paw5ZOB5LiK5paw/p-5bd8253082acdd181d02fa0f/57f31d66/cr/s/q.jpg','https://imgcps.jd.com/img-cubic/creative_server_cia/v2/2000366/100014464418/FocusFullshop/CkRqZnMvdDEvMTc3NzY3LzM1LzEyNTI4LzMzMTA1NS82MGU2YmM0YkVlN2I0Njk4MC9mMjM0ZjEyZDJmOTVhMWNkLnBuZxIJNS10eV8wXzU2MAI47ot6QhoKFuiWh-ivuuWonOWll-ijhS_npLznm5IQAEIZChXlpb3otKflpKfotY_lvIDlkK_kuK0QAUIQCgznq4vljbPmiqLotK0QAkIKCgbkvJjpgIkQB1iiu87K9AI/cr/s/q.jpg','https://imgcps.jd.com/ling4/100019631248/55S15Zmo5aW954mp5LiK5paw/55u06ZmNK-WFjeaBryDpgJ_miqI/p-5bd8253082acdd181d02f9ff/fd432d8f/cr/s/q.jpg','https://img12.360buyimg.com/pop/s1180x940_jfs/t1/180522/35/19462/91219/6119e5b7E7213c052/39f9d9bffadeabc2.jpg.webp','https://img13.360buyimg.com/pop/s1180x940_jfs/t1/204538/27/418/100695/6110eb81E40c33891/98a22a2cf9021e4e.jpg.webp',];return (<div><Headertitle="懒加载逻辑"description={['实现图片懒加载逻辑,图片在进入可视区域前及退出可视区域后展示占位图片。',]}/><div className="lazy"><div className="container">{images.map((image, index) => (<img src={image} alt={index.toString()} />))}</div></div></div>);
}
- 基于现有代码改造
import { Form, Input, Upload, Button } from 'antd';
import 'antd/dist/antd.css';
import { Header } from '../App';export default function App() {return (<div><Headertitle="文件上传逻辑"description={['点击上传按钮,用户选择文件夹,预览区显示文件夹下所有文件,文件名称带有目录结构,此时不上传文件。','点击提交按钮,提交文本框中内容,并上传预览区内全部文件。',]}/><Form labelAlign="left" labelCol={{ span: 4 }} style={{ margin: 24 }}><Form.Item label="文本框"><Input defaultValue="test" /></Form.Item><Form.Item label="文件选择"><Upload><Button>上传</Button></Upload></Form.Item><Form.Item wrapperCol={{ offset: 4 }}><Button type="primary">提交</Button></Form.Item></Form></div>);
}
目的是upload组件默认会在选择文件时上传,希望在选择文件时不上传而是在提交的时候上传
其实就是在upload组件加一个参数
beforeUpload={(file) => {
return false;
}}
就行阻止默认上传 然后在提交时获取form值上传