自我介绍

简单介绍一下个人信息、介绍一下技术栈、介绍一下项目内容。

面试部分

CSS部分

1. 常用的布局方式？

2. 如何让一个元素垂直与水平居中？

3. 常用的定位有哪几种？

4. fixed定位中心是哪里？附加额外，什么情况下会影响fixed定位不按照？这个确实没怎么看到过这个面试问题

<div class="transform-box">
    <div class="fixed-box"></div>
</div>

当元素祖先的 transform 属性非 none 时，定位容器由视口改为该祖先。

5. 如何清除浮动？

6. 平时常使用tailwindcss吗？tailwindcss和日常写类名有什么区别？

7. 使用flex布局和grid布局比较多，flex与grid有什么不足的地方吗？

8. 平时浮动布局使用的多吗？float

9. css面试过程中探讨了不少tailwindcss的内容，面试官也比较爱用这个

10. css动画用的多吗？最开始手搓css动画，后面使用animate.css，再后来使用的一些React的动画库，GSAP有了解没怎么用过

JS部分

1. 平时使用ES5多，还是使用ES6多？

2. ES6都有哪些新特性？

3. async与await 是为了解决什么问题？

4. Promise的缺点是什么？

5. 在没有Promise的时候，应该怎么处理异步函数？

6. 遗忘并回忆······

浏览器原理

1. 浏览器的事件循环机制知道吗？简单说一下

2. 在浏览器输入一个URL之后，发生了什么？

3. 平时使用过浏览器控制台吗？都使用过什么功能？

4. 浏览器的缓存方式有什么

5. 强缓存与协商缓存有了解吗？（确实看面经的时候扫了一眼，没看，真就是只扫了一眼）

6. 遗忘并回忆······

计网部分

1. TCP/IP协议是几层网络模型？分别是什么？

2. 七层是理论上的，而实际应用使用的是几层网络模型？

3. 遗忘并回忆······

还有数据传输，寻找IP地址，ipv4已经用尽，局域网下机器A通过什么找到机器B，记不住了

这部分属于是被狠狠拷打了

React部分

1. 平时使用hooks还是使用老式的类式组件？

2. 都使用过什么hooks？

3. 使用过什么集中式状态管理吗？

4. 有没有使用过Context上下文？简单说一下

5. 平时使用过ts是吧？常使用ts中的什么关键字？

6. type 与interface有什么区别？

7. 你感觉ts比js好在哪里？

遗忘并回忆······

闲聊

1. 你有没有部署过项目呀？

2. 假如说我前端部署在一个域名下，后端部署在另一个域名下，这就存在一个跨域问题，如何通过nginx解决这个问题

3. git工具用的熟不熟？有没有遇到过冲突？遇到冲突怎么解决的？

4. 你们平时开发的团队大概是多少人的团队？什么样子的配置？有没有测试？

手写代码部分(20-25min)

手写一个TodoList 组件，比较简单

/**
 * todolist
 */
type TodoItem = {
    id: number,
    content: string,
    idEditable: boolean,
    onEdit: (id) => void,
    onDelete: (id) => void,
}

const ListItem = ({ id, content, idEditable, onEdit, onDelete }: TodoItem) => {
  const [text,setText] = useState('');

  const handleChange = e => setText(e.target.value);
  
  return (
        <div>
            {
                idEditable ? <input type="text" value={value} onChange={handleChange}/>
                    : <div className="content">{content}</div>
            }
            <div>
                <button onClick={() => edit(id)}>编辑</button>
                <button onClick={() => delete (id)}>删除</button>
            </div>
        </div>
    )
}

const TodoList = () => {
    const [listData, dispatch] = useReducer((state, palyod) => {
        // if else 比较多的话可以使用 switch
        if (palyod.type === 'add') {
            return [...state, { ...palyod, id: state.length + 1 }];
        }
        if (palyod.type === 'edit') {
            return state.map(item => {
                if (item.id === palyod.id) {
                    return { ...item, content: palyod.content }
                }
            })
        }
        if (palyod.type === 'delete') {
            return state.filter(item => item.id !== palyod.id)
        }
    }, [])

    const [contentVal, setContenVal] = useState<string>('')

    const handleClick = () => {
        dispatch({
            type: 'add',
            palyod: contentVal
        })
    }

    const handleEdit = (e, id) => {
        dispatch({
            type: 'edit',
            payload: {
                id,
                content: e.target.value
            },
        })
    }

    const handleDelete = (id) => {
        dispatch({
            type: 'delete',
            id
        })
    }

    return (
        <div>
            <div className="ipt">
                <input type="text" value={contentVal} onChange={e => setContenVal(e.target.value)} />
                <button onClick={handleClick}>确认</button>
            </div>
            <div className="list">
                {
                    listData.map(list => <ListItem {...list} key={list.id} edit={handleEdit} delete={handleDelete} />)
                }
            </div>
        </div>
    )
}

反问部分