2024年最新【React入门实践(1)，web前端简单面试题

总结一下

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

前端面试题汇总

JavaScript

性能

linux

前端资料汇总

前端工程师岗位缺口一直很大，符合岗位要求的人越来越少，所以学习前端的小伙伴要注意了，一定要把技能学到扎实，做有含金量的项目，这样在找工作的时候无论遇到什么情况，问题都不会大。

（1）查询栏的展开收起 【React入门实践】复杂搜索表单的【展开-收起】功能_Sabrina_cc的博客-CSDN博客

（2）页面列表显示数据 【React入门实践】结合Ant-Design 从0带你手把手开发包含【列表】和【搜索栏】的简单【用户管理】页面_Sabrina_cc的博客-CSDN博客

（3）列表对应不同标签显示，以及操作的分情况显示

（3）查看详情 – 需要通过点击事件传参查询该用户详情信息显示

（4）冻结/解冻账号 –  开关操作

（5）创建账号 – 弹框新建并校验 新建后刷新列表

2. 分析接口文档

---

（1）冻结、解冻接口

改接口只需要传入账号相应的id即可，后端实现置反操作。前端只需要处理好显示即可

（2）查看详情接口

（3）分配角色接口

（4）创建用户接口

3. 参照UI编写前端页面

---

（1）页面整体布局

Search是查询部分；CollectionCreateForm是新建部分弹框；DetailForm是详情弹框部分；RoleForm是角色分配弹框部分；StandardTable是列表部分；

return (

<PageHeaderLayout title=“列表” className={‘commonList’}>

{visible && (

<CollectionCreateForm

setVisible={setVisible}

visible={visible}

dispatch={dispatch}

init={init}

toggleForm={toggleForm}

/>

)}

{detailVisible && (

<DetailForm

setDetVisible={setDetVisible}

detailVisible={detailVisible}

dispatch={dispatch}

init={init}

userId={userId}

toggleDetail={toggleDetail}

detailData={detailData}

/>

)}

{roleVisible && (

<RoleForm

setRoleVisible={setRoleVisible}

roleVisible={roleVisible}

dispatch={dispatch}

init={init}

userId={userId}

userRole={userRole}

toggleRole={toggleRole}

/>

)}

<Card

style={{ marginTop: 1 }}

bordered={false}

bodyStyle={{ padding: ‘8px 32px 32px 32px’ }}

<Button

type=“primary”

onClick={() => toggleForm(-1)}

className={styles.new}

创建账号

<StandardTable

loading={loading}

data={listData}

columns={columns}

onChange={handleStandardTableChange}

/>

)

（2）列表及复杂操作

其中，角色的显示：接口返回值为roles:[1,2] 数组，分别表示‘前台用户’和‘后台技术服务’，在此需要进行前端字符串拼接，并且最大显示五个字符。‘手机号’‘企业名称’同理。

const columns = useMemo(

() => [

{

title: ‘序号’,

dataIndex: ‘_id’

},

{

title: ‘用户名’,

dataIndex: ‘username’

},

{

title: ‘角色’,

width: 80,

dataIndex: ‘roles’, //[‘1’,‘2’] [‘1’]

// render: (value: any) => (

// <>

// {value === 1 && <>前台用户</>}

// {value === 2 && <>后台技术服务</>}

// </>

// )

render: (value: any) => {

var str = ‘’

if (value.length == 1) {

value.forEach((element: number) => {

if (element === 1) {

str = ‘前台用户’

} else {

str = '后台技术服务 ’

}

})

} else {

value.forEach((element: number) => {

// console.log(element)

if (element === 1) {

str = str + ‘前台用户,’

} else {

str = str + '后台技术服务 ’

}

})

}

if (str.length <= 5) {

return str

} else {

return {str.substring(0, 5) + ‘…’}

}

}

},

{

title: ‘企业名称’,

dataIndex: ‘firmName’,

render: (record: any) => {

if (record.length <= 5) {

return record

} else {

return (

{record.substring(0, 5) + ‘…’}

)

}

}

},

{

title: ‘手机号码’,

dataIndex: ‘mobile’,

render: (record: any) => {…},

{

title: ‘邮箱’,

dataIndex: ‘email’,

render: (record: any) => {…}

},

{

title: ‘地址’,

dataIndex: ‘address’,

width: 100,

render: (record: any) => {…}

},

{

title: ‘认证状态’,

dataIndex: ‘status’,

render: (value: any) => (

<>

{value === 3 && 未提交}

{value === 0 && 待审核}

{value === 1 && 不通过}

{value === 2 && 通过}

</>

)

},

{

title: ‘账号状态’,

dataIndex: ‘isFreeze’,

render: (value: any) => (

<>

{value == 0 && 正常}

{value == 1 && 冻结}

</>

)

},

{

title: ‘操作’,

render: (value: any) => (

<>

{value.isFreeze == 1 && (

<Popconfirm

title=“确定解冻账号吗”

onConfirm={() => {

changeFreeze(value.id)

}}

// onConfirm={changeFreeze(value.id)}

style={{ width: 400 }}

解冻账号

)}

{value.isFreeze == 0 && (

<Popconfirm

title=“确定冻结账号吗”

onConfirm={() => {

changeFreeze(value.id)

}}

冻结账号

)}

<a type=“primary” onClick={() => toggleDetail(value.id)}>

查看详情

{value.isFreeze == 0 && }

{value.isFreeze == 0 && (

<a

type=“primary”

onClick={() => toggleRole(value.id, value.roles)}

分配角色

)}

</>

)

}

],

[changeFreeze, toggleDetail, toggleRole]

)

操作的显示：isFreeze控制显示是‘冻结’还是‘解冻’，并对应changeFreeze(value.id)函数实现功；查看详情是每种用户都有的操作，并绑定函数toggleDetail(value.id)；对于非冻结的用户才可以进行角色分配功能，对应onClick={() => toggleRole(value.id, value.roles)}

4. 冻结与解冻功能

---

// 账号解冻与冻结

const changeFreeze = useCallback(

(index: any) => {

dispatch({

type: ‘usermanage/changeFreeze’,

params: [{ id: index }]

}).then((v: any) => {

if (v.code === 200) {

message.success(v.message)

init()

}

})

},

[dispatch, init]

)

changeFreeze: async ({ params: [remoteValue] }, { dispatch }) => {

const data = await dispatch({

type: ‘usermanage/get’,

params: [‘/api/manage/user/freeze/’ + remoteValue.id]

})

return data

}

5. 新建功能

---

（1）点击‘创建账号’弹出弹框

在page页面同目录下 新建页面new.tsx,并在主页面引入import CollectionCreateForm from ‘./new’

function NewPage({

visible,setVisible,toggleForm,dispatch,userId,itemData,init,form

}: any) {

const { getFieldDecorator, validateFields } = form

return (

<Modal

title={‘新增’}

visible={visible}

onCancel={toggleForm}

footer={[

<Button

key=“back”

onClick={() => {

setVisible(false)

}}

取消

,

保存

总结一下

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

前端面试题汇总

JavaScript

性能

linux

前端资料汇总

前端工程师岗位缺口一直很大，符合岗位要求的人越来越少，所以学习前端的小伙伴要注意了，一定要把技能学到扎实，做有含金量的项目，这样在找工作的时候无论遇到什么情况，问题都不会大。