京东前端社招面经

社招一面

部门-零售相关的部门

1.自我介绍

2.简单问了简历上的东西（无八股文）

hook 和普通组件什么区别
最近用webpack做了什么
发布流程
灰度的实现

手写题

三道题，半小时内写出来两到即可（期间可以查询资料）

css或者canvas 方式实现
基于现有代码现改造

tsx 复制代码

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>
      <Header
        title="懒加载逻辑"
        description={[
          '实现图片懒加载逻辑，图片在进入可视区域前及退出可视区域后展示占位图片。',
        ]}
      />
      <div className="lazy">
        <div className="container">
          {images.map((image, index) => (
            <img src={image} alt={index.toString()} />
          ))}
        </div>
      </div>
    </div>
  );
}

基于现有代码改造

ts 复制代码

import { Form, Input, Upload, Button } from 'antd';
import 'antd/dist/antd.css';
import { Header } from '../App';

export default function App() {
  return (
    <div>
      <Header
        title="文件上传逻辑"
        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值上传