面试题

0、生命周期

16.4 之后
  加载阶段:
    1.constructor 
    2.static getDerivedStateFromProps(nextProps, prevState)
    //里面没有this
    //必须得有return
    //修改state
    //实在不修改的话就return null
    3.render
    4.componentDidMount
  更新阶段:
    5.static getDerivedStateFromProps(nextProps, prevState)
    // nextProps, prevState 
	// state必须有
	// 没有this
	// 里面有一个return 可以修改state 不想操作return null
	6.shouldComponentUpdate(nextProps, nextState)
	    // nextProps: 表示下一个props。
		// nextState: 表示下一个state的值。
	    return true // 页面渲染
	    return false // 页面不渲染
    7.render
    8.getSnapshotBeforeUpdate(prevProps, prevState)
    9.componentDidUpdate
  卸载阶段:
    10.componentWillUnmount

1、三种水平居中：a：dispaly：flex； jusity-content：center； align-items：center；
b：父：display：grid（网格布局）； 子：margin：auto；
c：父：position：relative：子：positon：absolute；top：50%；left：50%；transform：translate（-50%，-50%）

2、css盒模型：外边距(margin) 内边距(padding) 边框(border) 实际内容(content)

3、redux工作流程：视图触发action action触发reducers reducers触发视图

4、this的定义：this代表当前正在执行的对象

5、dva：是一个状态管理工具 dva底层：redux-saga
a：四个参数 namespace（命名空间） state（值） subscriptions（订阅：初始化数据）effect（异步：用generator函数方法 *yield）reduce（修改state）

6、redux三大基本原则
(1)、单一数据源,全局只有一个store
(2)、state在页面里是只读的 触发action ->修改state
(3)、state只能在reduce里改 并且reduce 必须是纯函数

7、为什么要使用hook：复用状态逻辑

8、hook规则：
必须写在函数组件的最顶层 不能写下map if 里(原因)
hook必须写在函数组件内不能写在class组件里
自定义hook必须以use开头

9、hook为什么在最顶层：
hook是按照顺序执行的
hook首次渲染的时候会记住位置
hook第二次渲染的时候，假设第二个是错误的就会将第二个跳过
那么就会直接执行第三个，但是第三个的位置就会对应首次第二个位置，所以报错

10、useEffect 第一个参数 回调函数，第二个参数是一个数组(依赖)

11、useCallback 返回一个新函数
A：两个参数 a：箭头函数 b：依赖[] 如果依赖里面为空 那么它的内存地址不变
B：一般配合memo一起使用 例子：父组件发生改变 不想让子组件跟着触发万一子组件东西太多会卡顿！

// 子
const Person = memo(function (props) {
    console.log('执行了');
    return (<div></div>)
})
// 父
export default function Cs3() {
    const [x, setX] = useState(0)
    const onClick = () => setX(x+1)
    const fun = useCallback(() => {

    },[])
    return (
        <>
            <h1>{x}</h1>
            <Person fun={fun} />
            <Button onClick={onClick}>点我</Button>
        </>
    )
}

12、函数克里化： 部分求值 不是立即执行
比如求和：前29天只存钱 到第30天循环求和一共赚了多少钱

var cost = (function () {
  var args = [];
  return function (opt) {
    if (!opt) {
      var money = 0;
      for (var i = 0, l = args.length; i < l; i++) {
        money += args[i];
      }
      return money;
    } else {
      // [100, 200, 300]
      args.push(opt)
    }
  }
})()
cost(100); // 未真正求值
cost(200); // 未真正求值
cost(300); // 未真正求值
console.log(cost()); // 求值并输出：600

13、promise a：两个参数 resovle，reject 三个状态 then成功 cath失败 pedding进行中
b:解决了回调地狱
c：静态方法 promise.all（）promise.race（）promise.resovle（）promise.reject（） promise.allsettled（）

14、async用法 ：举例子 如果两个接口第一个请求失败下面的是不会执行的但是可以用他的cath去监听它的错误，
这样下面的 就可以执行了
原理 async == = generator + 自动执行器

function* fun2 () {
            const p1 = yield '小花'
            const p2 = yield '小白'
            const p3 = yield '小蓝'
            return [p1, p2, p3]
        }

        function spawn(genF) {
            return new Promise(resolve => {
                const gen = genF()
                // 1 nextF = () => gen.next(undefined)
                // 2 nextF = () => gen.next(小花)
                // 3 nextF = () => gen.next(小白)
                // 4 nextF = () => gen.next(小蓝)
                function step(nextF) {
                    // 1. { done: false, value: 小花 }
                    // 2. { done: false, value: 小白 }
                    // 3. { done: false, value: 小蓝 }
                    // 4. { done: true, value:[小花 小白 小蓝]}
                    let next = nextF()

                    if (next.done) {
                        return resolve(next.value)
                    }
                    // 1. () => gen.next(小花)
                    // 2. () => gen.next(小白)
                    // 3. () => gen.next(小蓝)
                    step(() => gen.next(next.value))
                }
                step(() => gen.next(undefined))
            })
        }

15、注册事件：dom0 dom2 阶段 捕获-》目标-》冒泡

16、防抖节流 防抖有效时间内执行最后一次 节流有效时间内只执行一次 例子：百度的svg举例

17、跨域：是因为浏览器的同源策略不满足 协议 端口 域名 解决：1:jsonp 2:node 走的是后台 3:CORS 设置请求头
上线以后怎么解决跨域：嗯姐格斯 nginx设置反向代理

18、index当key：
在react中key值用index是对的，但是也有问题，
在进行删除的时候react里会进行一个虚拟Dom也
就是diff比较 虚拟Dom和真实的进行比较
从而渲染出变量中发生变换的节点带着身旁的固
定节点 这时就产生了问题 因为index不具有唯一性
所以渲染就会产生错误
用时间戳实现id功能不可以，因为浏览器引擎计算时间
非常快 甚至1毫秒就可以计算多次 这样的话就id冲突

所以综上 使用 id 更好 或者使用shortid插件当作id 也可以

19、协调：改变不同元素 改变属性 如果节点一样的话就在最后插入节点 加一个key值

20、 说一下async
async 是以同步的方式去写异步的代码
跟await连用
await等于一个.then
await上一个执行完 再执行下一个 按照顺序执行
整体是一个promise
如果想让await同时执行用 await Promise.all

21、react子传父的方法
props
useImperativeHandle+forwardRef
Context
redux mobx dva
发布 订阅 -> 见CSDN 发布 订阅

22、h5新方法:
pushState replaceState websoket filerender Blob formData