React面试总结

1、对虚拟dom的理解

        先从虚拟dom的来源说起：在前端初期阶段，前端页面的主要功能时展示，js只是进行一些div隐藏显示的操作；发展到后来页面的交互越来越多，就出现了模板处理模式：把数据和模板融合生成的html片段，渲染至页面；当页面渲染一个list的时候，修改了list里的一条数据那么就会把整块的dom卸载掉，新的数据在和模块进行融合生成新的html片段渲染至页面，就存在不必要的dom更新，为了避免这种不必要的dom更新提出了虚拟dom，虚拟dom的diff其实实在js层的计算，它比直接操作dom的性能消耗小，会在数据更新后生成新的虚拟dom，与旧的虚拟dom进行对比，对不同的节点进行渲染到页面上。

        react的diff算法：会对比根节点的标签类型，类型不同子节点会被全部替换掉，当类型相通会对比其他属性来进行更新，接着对比子节点的标签类型。

        作为延伸可以讲一讲key的作用。

2、react开发过程的优化

        避免在render减少新建变量，传递参数是减少传参数量

        使用shouldComponentUpdate优化组件渲染

        合理使用key

3、某个页面input输入卡顿

        考虑时input标签上的onchange方法多次被调用，考虑修改成onblur

        或者使用防抖和节流

        防抖：固定时间内输入只执行一次

        节流：固定时间内以第一次为主，超过时间后在进行请求

4、类组件使用的过程中，父组件刷新子组件也会刷新，怎么避免这种不必要的刷新

        使用shouldComponentUpdate 去控制 判断nextprops中本页面使用的props没有变化的时候返回false

5、usestate 为什么返回的数组，而不是object

       返回数组的话，可以根据顺序解构取到的同事进行重命名

        如果是对象的话，需要和返回的属性名相同，多次使用的话还需要定义别名

6、commonjs和es6的module的区别        

CommonJS

• 对于基本数据类型，属于复制。即会被模块缓存。同时，在另一个模块可以对该模块输出的变量重新赋值。
• 对于复杂数据类型，属于浅拷贝。由于两个模块引用的对象指向同一个内存空间，因此对该模块的值做修改时会影响另一个模块。
• 当使用require命令加载某个模块时，就会运行整个模块的代码。
• 当使用require命令加载同一个模块时，不会再执行该模块，而是取到缓存之中的值。也就是说，CommonJS模块无论加载多少次，都只会在第一次加载时运行一次，以后再加载，就返回第一次运行的结果，除非手动清除系统缓存。
• 循环加载时，属于加载时执行。即脚本代码在require的时候，就会全部执行。一旦出现某个模块被"循环加载"，就只输出已经执行的部分，还未执行的部分不会输出。

ES6模块

• ES6模块中的值属于【动态只读引用】。
• 对于只读来说，即不允许修改引入变量的值，import的变量是只读的，不论是基本数据类型还是复杂数据类型。当模块遇到import命令时，就会生成一个只读引用。等到脚本真正执行时，再根据这个只读引用，到被加载的那个模块里面去取值。
• 对于动态来说，原始值发生变化，import加载的值也会发生变化。不论是基本数据类型还是复杂数据类型。
• 循环加载时，ES6模块是动态引用。只要两个模块之间存在某个引用，代码就能够执行。

 7、使用redux存数据的时候，页面刷新怎么保存数据

        使用sessionStorge 或者localStroge

8、内嵌的react页面如何与客户端交互

        当客户端打开react页面的时候，会打开一个webview,这个时候会把以下页面使用的方法绑定在全局变量window上，比如ios会暴露一个setparam的方法需要上送一个function code 和参数，在js中调取window.setparam,把回调函数也绑定在window上

9、webpack如何修改css文件中图片路径为绝对路径

{
    test:/\.css/,
    use:[
        {
            loader: MiniCssExtranctPlugin.loader,
            opations:{
                publicPath:"src/style/images"
            }
        },
       'css-loader'
    ]
}

10、webpack打包的hash有几种策略

11、从自身角度出发如何减轻交付工作