持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第15天，点击查看活动详情

自定义Hook

自定义Hook：是一个函数，其名称以'use'开头,函数内部可以调用其他Hook

实例：//注释掉的内容为没有进行封装不需要用到异步的数据
import React, { useState, useEffect } from 'react'
// const data = [
//     { id: 1, age: 20, name: '张三' },
//     { id: 2, age: 21, name: '李四' },
//     { id: 3, age: 22, name: '王五' },
//     { id: 4, age: 23, name: '赵六' },
//     { id: 5, age: 24, name: '周七' },
//     { id: 6, age: 25, name: '钱八' }
// ]
// export const useList = () => {
//     const [list, setList] = useState(null);
//     useEffect(() => {
//         setList(data)
//     }, [])
//     return {
//         list,
//         setList
//     }
// }
export const useList = () => {
    const [list, setList] = useState(null);
    useEffect(() => {
        req('/list').then(res => {
            setList(res.data)
        }).catch(e => {
            console.log(e)
        })
    }, [])
    return {
        list,
        setList
    }
}
function req() {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve({
            code: 200,
            data: [
                { id: 1, age: 20, name: '张三' },
                { id: 2, age: 21, name: '李四' },
                { id: 3, age: 22, name: '王五' },
                { id: 4, age: 23, name: '赵六' },
                { id: 5, age: 24, name: '周七' },
                { id: 6, age: 25, name: '钱八' }
            ]
        }),2000)
    })
}


//调用：
import React from 'react'
import { useList } from './useHook.js'
export const UseCustomHookDemo = () => {
    const { list } = useList();
    return (
        <div>
            <h3>自定义Hook调用</h3>
            {
                list ?
                    (
                        <ol>
                            {
                                list.map(item => (
                                    <li key={item.id}>姓名：{item.name},年龄:{item.age}</li>
                                ))
                            }
                        </ol>
                    ) :
                    ('loading...')
            }
        </div>
    )
}

前端工程化常用问题

1.工程化主要工具有哪些，特点是什么(webpack、 grunt、 glup、 git)

2.Webpack 常用命令

Webpack 生产环境和开发环境区别，搭建方式(多页面)

4.什么组件化开发，优缺点分别是什么

5.React的特点(优点)，开发模式

Jsx 语法规则，注意的内容，优点

7.React组件(概念、组件类型、每种类型的区别)

组件生命周期、生命周期优化(key、 diff)
组件的状态(原理、setState 的使用)

10.组件props属性，及和state区别

11.组件属性ref (ref 属性和refs对象理解，ref 内部实现原理，需要注意的事项，ref 箭头

函数和useRef使用)

组件传值(父子，子父，子子、不相关的组件)

13.样式绑定

React 事件绑定，this 对象使用
Router3 和router4的区别
Router4有哪些router类型，需要注意的内容是什么，运行原理是什么，router传值(原

理，例子，用法)

Redux原理、包含几部分及作用，具体实例详细讲解(购物车，管理平台)
Redux里中间件有哪些，使用什么地方

19.Redux做购物车实例

20.高阶组件(概念，封装方式，举报)

21.调接口(fetch: 返回的promise对象，异步实现过程，原理。根据不同需要fetch应放

在生命周期的那个函数里，promise 对象的常用方法: fetch， catch， all,， then )

22. Ant介绍

全局样式改变，布局原理，常用组件
Hock，什么hocks，注意事项，原理，和生命周期的关系

(1)常用的hocks:useEffect(第二参数的用法，触发或者替换哪几个生命周期函数)、

useState、useReducer、 useCallback、 useRef 自定义的hock ( 阿里面试题封装)

Hook封装、前端工程化常用问题

自定义Hook

前端工程化常用问题