面试:沥泉科技

时长：1h 20min 一面

自我介绍

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

面试部分

CSS部分

常用的布局方式？
如何让一个元素垂直与水平居中？
常用的定位有哪几种？
fixed定位中心是哪里？附加额外，什么情况下会影响fixed定位不按照？这个确实没怎么看到过这个面试问题

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

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

如何清除浮动？
平时常使用tailwindcss吗？tailwindcss和日常写类名有什么区别？
使用flex布局和grid布局比较多，flex与grid有什么不足的地方吗？
平时浮动布局使用的多吗？float
css面试过程中探讨了不少tailwindcss的内容，面试官也比较爱用这个
css动画用的多吗？最开始手搓css动画，后面使用animate.css，再后来使用的一些React的动画库，GSAP有了解没怎么用过

JS部分

平时使用ES5多，还是使用ES6多？
ES6都有哪些新特性？
async与await 是为了解决什么问题？
Promise的缺点是什么？
在没有Promise的时候，应该怎么处理异步函数？
遗忘并回忆······

浏览器原理

浏览器的事件循环机制知道吗？简单说一下
在浏览器输入一个URL之后，发生了什么？
平时使用过浏览器控制台吗？都使用过什么功能？
浏览器的缓存方式有什么
强缓存与协商缓存有了解吗？（确实看面经的时候扫了一眼，没看，真就是只扫了一眼）
遗忘并回忆······

计网部分

TCP/IP协议是几层网络模型？分别是什么？
七层是理论上的，而实际应用使用的是几层网络模型？
遗忘并回忆······

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

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

React部分

平时使用hooks还是使用老式的类式组件？
都使用过什么hooks？
使用过什么集中式状态管理吗？
有没有使用过Context上下文？简单说一下
平时使用过ts是吧？常使用ts中的什么关键字？
type 与interface有什么区别？
你感觉ts比js好在哪里？

遗忘并回忆······

闲聊

你有没有部署过项目呀？
假如说我前端部署在一个域名下，后端部署在另一个域名下，这就存在一个跨域问题，如何通过nginx解决这个问题
git工具用的熟不熟？有没有遇到过冲突？遇到冲突怎么解决的？
你们平时开发的团队大概是多少人的团队？什么样子的配置？有没有测试？

手写代码部分(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>
    )
}

反问部分

目录 | Outline

#面试:沥泉科技

#自我介绍

#面试部分

#CSS部分

#JS部分

#浏览器原理

#计网部分

#React部分

#闲聊

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

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

#反问部分

面试:沥泉科技

自我介绍

面试部分

CSS部分

JS部分

浏览器原理

计网部分

React部分

闲聊

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

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

反问部分