React2021基础面试题

1、什么是React？

1. React是Facebook在2011年开发的前端JavaScript库。
2. 它遵循基于组件的方法，该方法有助于构建可重用的UI组件。
3. 它用于开发复杂的交互式Web和移动UI。
4. 即使仅在2015年才开源，它还是支持它的最大社区之一。

2、React的一些主要优点。

1. 它提高了应用程序的性能
2. 它可以方便地在客户端和服务器端使用
3. 由于有了JSX，代码的可读性提高了
4. React易于与其他框架（如Meteor ['mi:tiə]，Angular等）集成
5. 使用React，编写UI测试用例变得非常容易

3、React的局限性是什么？ 

1. React只是一个库，而不是一个成熟的框架
2. 它的图书馆很大，需要花费一些时间来理解
3. 对于新手程序员而言，理解起来可能有点困难
4. 由于使用内联模板和JSX，编码变得复杂

4、setState 是异步还是同步？

1. 合成事件中是异步
2. 钩子函数中的是异步
3. 原生事件中是同步
4. setTimeout中是同步

5、为什么state值不能修改，而用this.setState去修改？ 

setState是异步的，是否调用render进行再次渲染。setState本质是通过一个队列实现state更新的，执行setState时，会将要更新的state合并后放入状态队列，而不会立即更新。如果没有通过this.setState,而是直接this.state修改，会导致这个修改没有放入队列中，下次执行this.setState合并队列时，就会忽略这次的修改，从而导致数据没有更新。 简单点说，就是setState就是放入队列，而this.state会跳过队列，从而导致有可能这次的修改值会被忽略掉 。

 

6、什么是JSX？ 

JSX是JavaScript XML的简写。这是React使用的一种文件，它利用JavaScript的表现力以及类似模板语法的HTML。这使得HTML文件非常容易理解。该文件使应用程序健壮并提高其性能。

以下是JSX的示例：

render(){
    return(            
       
           
          
 Hello World
       
    );
} 

7. 为什么浏览器无法读取JSX？

浏览器只能处理 JavaScript 对象，而不能读取常规 JavaScript 对象中的 JSX。所以为了使浏览器能够读取 JSX，首先，需要用像 Babel 这样的 JSX 转换器将 JSX 文件转换为 JavaScript 对象，然后再将其传给浏览器。

8、React 中 keys 的作用是什么？

Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。

render() {
  return ({ this.state.todoItem.map(({item, key}) => {
    return {item}
  })})
}

9、区分Real DOM（真实DOM）和Virtual DOM （虚拟DOM）

Real DOM	Virtual DOM
更新缓慢。	更新更快。
可以直接更新 HTML。	无法直接更新 HTML。
如果元素更新，则创建新DOM。	如果元素更新，则更新 JSX 。
DOM操作代价很高。	DOM 操作非常简单。
消耗的内存较多。	很少的内存消耗。

10. React与Angular有何不同？

主题	React	Angular
体系结构	只有 MVC 中的 View	完整的 MVC
渲染	可以在服务器端渲染	客户端渲染
DOM	使用 virtual DOM	使用 real DOM
数据绑定	单向数据绑定	双向数据绑定
调试	编译时调试	运行时调试
作者	Facebook	Google

11.vue与react的区别？

1. react是严格上针对mvc的view层，vue则是mvvm模式
2.  操作dom的方式不同，vue是通过指令操作dom，而react通过js进行操作
3. 数据绑定不同，vue实现的是双向绑定，而react是单向数据流
4. react的state内容不可以直接修改，需要通过setState去修改，vue的state不是必须的，数据主要有data属性在vue对象中管理的
5. React是通过JSX渲染模板。而Vue是通过一种拓展的HTML语法进行渲染； Vue本质是MVVM框架，由MVC发展而来；React是前端组件化框架，由后端组件化发展而来； 
6. Vue作者：尤雨溪   React作者：Facebook

 

 

 

 

前端面试题推荐网站：http://www.uyi2.com/questionRep