小言_互联网的博客

React方向的前端面试题

2021-05-31 09:26 449人阅读  评论(0)

1、React的生命周期？

React中只有类组件有生命周期可言。

其中包含三个状态：

Mounting：此时已经插入了真实的DOM；

Updating：正在被重新渲染；

Unmounting：已经移出真实的DOM。

生命周期的方法：

  1. componentWillMount：在渲染之前调用，在客户端也在服务器端；
  2. componentDidMount：在第一次渲染后调用，只在客户端；之后组件已经生成了对应的DOM结构，可以通过this.getDomNode()来访问。还可以在此时进行数据的异步请求操作；
  3. shouldComponentUpdate：它返回一个布尔值，在组件接受到一个新的props或者state时调用，不更新组件时调用；
  4. componentWillUpdate：接收到新的数据状态还未渲染时调用；
  5. componentDidUpdate：在完成更新数据的渲染之后调用；
  6. componentWillReceiveProps：在组件接收到新的props时调用；
  7. componentWillUnmount:在组件被卸载之前调用；

2、ES6的新特性？

看这里

3、有如下代码：一共有两层div,父元素的高度是400px,让里面的子元素垂直水平居中？


  
    
   
  1. 
    
    
     
    
    
    
    
    
     
    
      <!DOCTYPE html>
     
    
    
    2. 
   
  2. 
    
    
     
    
    
    
    
    
     
    
      <html lang="en">
     
    
    
    3. 
   
  3. 
    
    
     
    
    
    
    
    
     
    
      <head>
     
    
    
    4. 
   
  4. 
    
    
     
    
    
    
    
    
     
        
      <meta charset="UTF-8">
     
    
    
    5. 
   
  5. 
    
    
     
    
    
    
    
    
     
        
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
     
    
    
    6. 
   
  6. 
    
    
     
    
    
    
    
    
     
        
      <title>水平垂直居中
      </title>
     
    
    
    7. 
   
  7. 
    
    
     
    
    
    
    
    
     
        
      <style>
      
     
    
    
    8. 
   
  8. 
    
    
     
    
    
    
    
    
     
            
      #father{
     
    
    
    9. 
   
  9. 
    
    
     
    
    
    
    
    
     
                
      height:
      400px;
     
    
    
    10. 
   
  10. 
    
    
     
    
    
    
    
    
     
                
      background:teal;
     
    
    
    11. 
   
  11. 
    
    
     
    
    
    
    
    
     
                
      display:flex;
     
    
    
    12. 
   
  12. 
    
    
     
    
    
    
    
    
     
                
      justify-content: center;
     
    
    
    13. 
   
  13. 
    
    
     
    
    
    
    
    
     
                
      align-items: center;
     
    
    
    14. 
   
  14. 
    
    
     
    
    
    
    
    
     
                
     
    
    
    15. 
   
  15. 
    
    
     
    
    
    
    
    
     
    
              }
     
    
    
    16. 
   
  16. 
    
    
     
    
    
    
    
    
     
            
      #son{
     
    
    
    17. 
   
  17. 
    
    
     
    
    
    
    
    
     
                
      background:red;
     
    
    
    18. 
   
  18. 
    
    
     
    
    
    
    
    
     
    
              }
     
    
    
    19. 
   
  19. 
    
    
     
    
    
    
    
    
     
        
      </style>
     
    
    
    20. 
   
  20. 
    
    
     
    
    
    
    
    
     
    
      </head>
     
    
    
    21. 
   
  21. 
    
    
     
    
    
    
    
    
     
    
      <body>
     
    
    
    22. 
   
  22. 
    
    
     
    
    
    
    
    
     
        
      <div id="father">
     
    
    
    23. 
   
  23. 
    
    
     
    
    
    
    
    
     
    
              我是1
     
    
    
    24. 
   
  24. 
    
    
     
    
    
    
    
    
     
            
      <div id="son">
     
    
    
    25. 
   
  25. 
    
    
     
    
    
    
    
    
     
    
                  我是2
     
    
    
    26. 
   
  26. 
    
    
     
    
    
    
    
    
     
            
      </div>
     
    
    
    27. 
   
  27. 
    
    
     
    
    
    
    
    
     
        
      </div>
     
    
    
    28. 
   
  28. 
    
    
     
    
    
    
    
    
     
    
      </body>
     
    
    
    29. 
   
  29. 
    
    
     
    
    
    
    
    
     
    
      </html>
     
    
    
    30.

实现效果：

其他常用的水平垂直实现：

 

以上介绍有八种方式，比较常用的三种方法：

  • 固定宽度+左右margin为auto；
  • inline-block属性是无法让元素水平居中，他的关键之处要在元素的父容器中设置text-align的属性为“center”
  • 浮动+相对定位；
  • 绝对定位+left+margin-left（负值）+top 
    
    
      
     
    1. 
      
      
       
      
      
      
      
      
       
      
        .ele {
       
      
      
      2. 
     
    2. 
      
      
       
      
      
      
      
      
       
      
            position: absolute;
       
      
      
      3. 
     
    3. 
      
      
       
      
      
      
      
      
       
      
            width: 宽度值;
       
      
      
      4. 
     
    4. 
      
      
       
      
      
      
      
      
       
      
            left: 50%;
       
      
      
      5. 
     
    5. 
      
      
       
      
      
      
      
      
       
      
            top:50%;
       
      
      
      6. 
     
    6. 
      
      
       
      
      
      
      
      
       
      
            margin-left: -(宽度值/2);
       
      
      
      7. 
     
    7. 
      
      
       
      
      
      
      
      
       
      
        } 
       
      
      
      8.

  • CSS3的flex:让父元素形成弹性盒子，再然后给子元素添加margin:auto,完成元素的垂直水平居中，这种方法也常用，

  • CSS3的width:fit-content实现水平居中方法+左右margin为auto

  • 设置父元素的元素类型为table-cell类型，设置表格的垂直对齐方式为居中，再给子元素添加margin:0 auto 完成元素的垂直水平居中，这种方法不常用，

  • 不定元素宽高的情况下,子元素设置行高(line-height=height)，完成元素的垂直居中，再然后利用文本水平对齐方式text-align方法，完成水平居中，这中方法是最简单的，也是我们经常用的.

  • line-height 不是块级元素的情况下，使用它还是比较简单的
  • 绝对定位+负margin 兼容性好
  • flex 如果你不考虑兼容的情况下，建议使用它，灵活

4、数组常用的方法？

  • 1、Array.map():此方法是将数组中的每个元素调用一个提供的函数，返回了一个新数组，结果并没有改变原来的数组
  • 2、Array.forEach():此方法是将数组中的每一个元素执行并且传进提供的函数，没有返回值。原数组改变了。
  • 3、Arrat.filter():此方法是将数组的每一个元素进行判断，将满足条件的元素组成的新数组返回。
  • 4、Array.every():此方法是将所有元素进行判断返回一个布尔值，所有元素都满足判断条件，则返回true。
  • 5、Array.some():此方法是将所有元素判断返回一个布尔值，如果存在元素都满足判断条件，则返回true.
  • 6、Array.reduce():此方法是所有元素调用返回函数，返回值为最后结果，传入值必须是函数的类型；
  • 7、Array.push():此方法是往数组的后面添加新元素，此方法改变了数组的长度；
  • 8、Aarry.pop():此方法是在数组后面删除最后一个元素，并返回数组，此方法改变了数组的长度
  • 9、Array.shift():此方法是删除数组的第一个元素，并且返回数组，此方法改变了数组的长度。
  • 10、Array.unshift():此方法是将一个或者多个元素添加到数组的开头，并且返回一个新的数组；
  • 11、Array.concat():可以将多个数组拼接成一个数组；
  • 12、Array.isArray():判断一个对象是不是一个数组，返回的是布尔值。
  • 13、Array.toString():可以将数组转化为包含逗号d额字符串。将原数组变为字符串。
  • 14、Array.join():讲数组转化为以特定字符相隔的字符串。将原数组变为字符串。
  • 15、Array.splice(开始的位置，删除的个数，【要替换上去的元素】):万能的方法，可以实现增删改。

5、forEach和map的异同？

  • 相同：都是数组可以调用的方法；都是可以遍历数组元素，并且在回调的函数里对它们做一些改变
  • 区别：map返回新数组，没有改变原来的数组；forEach返回了新数组，并且改变了原来的数组。

map不会改变原数组，只是给原数组创建了一个引用，并且将改变后的引用作为返回值返回

6、http状态码举例？

http状态码分类：（5种）

1**：信息，服务器收到请求，需要请求者继续执行操作；

2**：成功，操作被成功接收并处理；

3**：重定向，需要进一步的操作来完成请求；

4**：客户端错误，请求包含发错误或无法完成请求；

5**:服务器错误，在请求过程中中服务器发生错误；

比较典型的：

  • 200:请求成功；
  • 203：NonAuthoritative Information。非授权信息。但是请求成功。返回的meta数据不在原始的服务器而是存储在一个副本里。
  • 204：No Content.无内容。服务器成功处理，但是没有返回数据内容，在没有更新网页的前提下，可以确保网页显示当前 数据文档信息。
  • 301：资源（网页）等被转移到其他的URL；
  • 302：Found.临时移动。与301类似。但是资源只是被临时移动。客户端应该继续使用原来的请求地址。
  • 400：Bad Request.客户端的请求参数语法错误，后端无法解析。
  • 401：Unauthorized:当前客户端的用户需要身份认证。
  • 403：Forbidden。服务端能理解此请求但是拒绝了。
  • 404：请求的资源（网页）不存在；
  • 405：Method Not Allowed。客户的请求方式不支持，禁止。
  • 406：Not Acceptable。服务器无法根据客户端的请求特性完成请求。
  • 415：Unsupported Media Type。服务器不支持客户端的请求附带的媒体格式。
  • 500：内部的服务器错误，无法完成请求。
  • 503：Sevice Unavailable。由于超载或系统难维护，服务器暂时无法处理请求。

7、position的几个取值和区别？

  • static:静态。正常文档流中。
  • relative:相对定位。在正常文档流中，相对于当前元素之前的位置来定位。
  • absolute：绝对定位。脱离了正常的文档流。相对于离它最近的一个父元素（是相对定位的一个元素）来定位。
  • fixed：固定定位。没有脱离文档流。相对于浏览器的左上角来定位。

8、React中父子组件，兄弟组件的通信？

父子组件：

父组件中：<Child  msg={this.state.msg}>

子组件中用this.props.msg获取。

 

9、对react的高阶组件的理解？

用自己的语言来叙述。

Higher-Order Components

高阶组件是一个函数（而不是组件），它接受一个组件作为参数，返回一个新的组件。这个新的组件会使用你传给它的组件作为子组件 .返回新组件时可以回传一些原参数的扩展值。

详情请看这里。

10、对token的理解？token为什么不用显式的写在参数中？

理解：

  • Token 的中文有人翻译成 “令牌”，意思就是，你拿着这个令牌，才能过一些关卡。
  • taoken的验证流程：

客户端使用用户名跟密码请求登录；

服务器收到请求，去验证用户名和密码；

验证成功后，服务器签发一token，再把这个token发送给客户端；

客户端收到token后把它存储起来，比如放在cookie里面或者local storage里；

客户端每次向服务器发起请求资源的时候都要带着服务器签发的token；

  • 服务器收到请求，然后去验证客户端请求里面的token，若验证成功，就向客户端返回请求的数据。
  • token的作用：

   防止表单重复提交

Anti CSRF 攻击（跨站点请求伪造）

  • 原理

两者在原理上都是通过session token来实现。客户端请求页面时，服务器会随机生成一个随机数token，并且将token放置到session中，然后将token发给客户端（一般通过构造hidden表单）。下次客户端提交请求时，token会随着表单一起提交到服务端。

然后，如果应用于“Anti CSRF攻击“，则服务器会对token值进行验证，判断是否和session中的token值相等，若相等，则可以证明请求有效，不是伪造的。不过，如果，应用于“防止表单重复提交”，服务器端第一次验证相同后，会将session的token重新更新，若用户重复提交，第二次的验证判断将失败，因为用户携带token与服务器端的session里面的token不一致。

上面的session应用相对安全，但也是繁琐，同事当多页面请求时，必须采用多token同时生成的方法，这样占用更多资源，执行效率会降低。因此，也可以用cookie存储验证信息的方法来替代session token。比如，应对“重复提交”时，当第一次提交后便把已经提交的信息写到cookie中，当第二次提交时，由于cookie已经有提交记录，因此第二次提交会失败。不过，cookie有个致命弱点，如果cookie被劫持（XSS攻击很容易得到用户法人cookie）那么有一次的game over，黑客将直接实现CSRF攻击，安全和高效是相对的，具体问题，具体分析。

请求头携带token的原因：

在使用JSON Web Token作为单点登录的验证媒介时，为保证安全性，建议将JWT的信息存放在HTTP的请求头中，并使用https对请求链接进行加密传输

11、csrf和xxs的了解？

名称解释：

[1] XSS 攻击：跨站脚本攻击(Cross Site Scripting)，恶意攻击者往 Web 页面里插入恶意 Script 代码，当用户浏览该页之时，嵌入其中 Web 里面的 Script 代码会被执行，从而达到恶意攻击用户的目的。

[2] CSRF 攻击：CSRF（Cross-site request forgery）跨站请求伪造，也被称为“One Click Attack”或者 Session Riding，通常缩写为 CSRF 或者 XSRF，是一种对网站的恶意利用。尽管听起来像跨站脚本（XSS），但它与 XSS 非常不同，XSS 利用站点内的信任用户，而 CSRF 则通过伪装来自受信任用户的请求来利用受信任的网站。与 XSS 攻击相比，CSRF 攻击往往不大流行（因此对其进行防范的资源也相当稀少）和难以防范，所以被认为比 XSS 更具危险性。

12、嵌套的高阶组件的实现思想？

每一个高阶组件函数执行之后中所返回的组件，刚好可以作为下一个高阶组件的参数继续执行，而并不会影响基础组件中所获得的新能力。

13、用promise写一个简单的字符串单个打印字母的函数？


  
    
   
  1. 
    
    
     
    
    
    
    
    
     
    
      // 一般的回调函数解决
     
    
    
    2. 
   
  2. 
    
    
     
    
    
    
    
    
     
    
      function printStr(callback){
     
    
    
    3. 
   
  3. 
    
    
     
    
    
    
    
    
     
        
      setTimeout(
      function(){
     
    
    
    4. 
   
  4. 
    
    
     
    
    
    
    
    
     
    
              callback(
      'abcdefg');
     
    
    
    5. 
   
  5. 
    
    
     
    
    
    
    
    
     
    
          },
      1000);
     
    
    
    6. 
   
  6. 
    
    
     
    
    
    
    
    
     
    
      };
     
    
    
    7. 
   
  7. 
    
    
     
    
    
    
    
    
     
     
     
    
    
    8. 
   
  8. 
    
    
     
    
    
    
    
    
     
    
      printStr(
      function(data){
     
    
    
    9. 
   
  9. 
    
    
     
    
    
    
    
    
     
        
      for(
      let item 
      of data){
     
    
    
    10. 
   
  10. 
    
    
     
    
    
    
    
    
     
            
      console.log(
      'item',item);
     
    
    
    11. 
   
  11. 
    
    
     
    
    
    
    
    
     
    
          }
     
    
    
    12. 
   
  12. 
    
    
     
    
    
    
    
    
     
    
      })
     
    
    
    13. 
   
  13. 
    
    
     
    
    
    
    
    
     
    
      // promise 实现
     
    
    
    14. 
   
  14. 
    
    
     
    
    
    
    
    
     
    
      function printStr2(str){
     
    
    
    15. 
   
  15. 
    
    
     
    
    
    
    
    
     
        
      var p=
      new 
      Promise(
      function(resolve,reject){
     
    
    
    16. 
   
  16. 
    
    
     
    
    
    
    
    
     
            
      //做一些异步操作
     
    
    
    17. 
   
  17. 
    
    
     
    
    
    
    
    
     
        
     
    
    
    18. 
   
  18. 
    
    
     
    
    
    
    
    
     
            
      setTimeout(
      function(){
     
    
    
    19. 
   
  19. 
    
    
     
    
    
    
    
    
     
              
      for(
      let item 
      of str){
     
    
    
    20. 
   
  20. 
    
    
     
    
    
    
    
    
     
    
                      resolve(item)
     
    
    
    21. 
   
  21. 
    
    
     
    
    
    
    
    
     
    
                 }
     
    
    
    22. 
   
  22. 
    
    
     
    
    
    
    
    
     
    
              },
      1000)    
     
    
    
    23. 
   
  23. 
    
    
     
    
    
    
    
    
     
    
          })
     
    
    
    24. 
   
  24. 
    
    
     
    
    
    
    
    
     
        
      return p;
     
    
    
    25. 
   
  25. 
    
    
     
    
    
    
    
    
     
    
      }
     
    
    
    26. 
   
  26. 
    
    
     
    
    
    
    
    
     
    
      let str1=
      "abcdefg";
     
    
    
    27. 
   
  27. 
    
    
     
    
    
    
    
    
     
    
      printStr2(str1).then(
      (item)=>{
     
    
    
    28. 
   
  28. 
    
    
     
    
    
    
    
    
     
        
      console.log(
      'item',item)
     
    
    
    29. 
   
  29. 
    
    
     
    
    
    
    
    
     
    
      })
     
    
    
    30.

14、普通函数和箭头函数的区别？

 

  • 箭头函数没有arguments,如果要用，可以用 rest 参数代替 (注意在node环境下是有arguments的)
  • 函数体内部的this指向不同

箭头函数的this指向上层对象，不能通过call，apply，bind来改变。箭头函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

普通函数的this是调用它的对象决定的，也可以通过call，apply，bind来改变this的指向。 

  • 箭头函数没有构造函数，不能用new关键字。
  • 箭头函数没有原型属性（prototype），不能继承
  • 箭头函数的单个参数，可以省略外部的小括号，以及return.

15、px,em,rem三个的区别？

  • px

px像素（Piexl）。相对长度单位。像素px是相对于显示器屏幕的分辨率而言的。

px的特点：

  1. IE无法调整那些以px为单位的字体的大小
  2. 国外的大部分网站能够调整的原因是他们使用了em或者rem作为字体单位；
  3. 火狐能够调整px、em、rem，但是96%以上的中国用户使用的是ie内核的浏览器。
  • em

em是相对长度单位。针对于当前对象内文本的字体尺寸，若当前对行内文本字体大小武规定，则相对于浏览器默认的字体尺寸。

em的特点：

  1. em的值不是固定的；
  2. em会继承父级元素的字体大小。

注意：

任意的浏览器的默认字体高度都是16px，所有未经过调整的浏览器都符合：1em=16px。那么12px=0.75em，10px=635em。为了简化font-size的换算，需要在css中的body选择器中声明"font-size:62.5%;",这就使得em的值变为：1em=16px*62.5%=10px，这样12px是1.2em，也就是只要将原来的px数值除以10，然后换上em作为单位就行了。

总结：

  1. body的选择器中声明font-size:62.5%;
  2. 将原来的px除以10，然后换上em为单位；
  3. 重新计算那些被放大的字体的em数值，避免字体大小重复声明。
  • rem

rem是CSS3的新增的一个长度单位（root em,根em），这个单位引起了广泛关注。这个单位和em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但是她相对的只是HTML根元素。这个单位可谓是集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素内的fon-size的大小，就可以实现成比例的调整所有字体的大小，又可以避免字体大小逐层符合的连锁反应。目前，除了IE8以及更早的版本外，所有的浏览器均已支持rem。对于不支持它的浏览器，应对的方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子：

p{font-size:14px; font-size:0.875rem;}

注意：选择使用什么字体单位主要由你的项目来决定；如果你的用户都是用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就是用px，或两者都使用。

px于rem的选择？

对于只需要适配少部分手机设备，而且分辨率对页面影响不大的，使用px即可；

对于需要是各种移动设备的，使用rem，例如，只需要适配Iphone和ipad等分辨率差别较大的设备


转载：https://blog.csdn.net/ilkcyc/article/details/113807046
查看评论
* 以上用户言论只代表其个人观点，不代表本网站的观点或立场