react面试题_react面试题2020 - CSDN
精华内容
参与话题
  • 必须要会的 50 个React 面试题

    千次阅读 多人点赞 2019-03-25 16:03:54
    如果你是一位有抱负的前端程序员并准备面试,那么这篇文章很适合你。本文是你学习和面试 React 所需知识的完美指南。

    翻译:疯狂的技术宅
    原文:https://www.edureka.co/blog/interview-questions/react-interview-questions/

    如果你是一位有抱负的前端程序员并准备面试,那么这篇文章很适合你。本文是你学习和面试 React 所需知识的完美指南。

    JavaScript 工具缓慢而稳定地在市场中扎根,对 React 的需求呈指数级增长。选择合适的技术来开发应用或网站变得越来越有挑战性。其中 React 被认为是增长最快的 Javascript 框架。

    截至今天,Github 上约有1,000名贡献者。 Virtual DOM 和可重用组件等独特功能吸引了前端开发人员的注意力。尽管它只是 MVC(模型 - 视图 - 控制器)中“视图”的库,但它对 Angular,Meteor,Vue 等全面的框架也构成了强力的挑战。下图为流行的 JS 框架的趋势:

    JS 框架的趋势
    JS 框架的趋势

    React 面试题

    以下是面试官最有可能问到的 50 个 React 面试题和答案。为方便你学习,我对它们进行了分类:

    • 基本知识
    • React 组件
    • React Redux
    • React 路由

    基本知识

    1. 区分Real DOM和Virtual DOM

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

    2. 什么是React?

    • React 是 Facebook 在 2011 年开发的前端 JavaScript 库。
    • 它遵循基于组件的方法,有助于构建可重用的UI组件。
    • 它用于开发复杂和交互式的 Web 和移动 UI。
    • 尽管它仅在 2015 年开源,但有一个很大的支持社区。

    3. React有什么特点?

    React的主要功能如下:

    1. 它使用**虚拟DOM **而不是真正的DOM。
    2. 它可以用服务器端渲染
    3. 它遵循单向数据流或数据绑定。

    4. 列出React的一些主要优点。

    React的一些主要优点是:

    1. 它提高了应用的性能
    2. 可以方便地在客户端和服务器端使用
    3. 由于 JSX,代码的可读性很好
    4. React 很容易与 Meteor,Angular 等其他框架集成
    5. 使用React,编写UI测试用例变得非常容易

    5. React有哪些限制?

    React的限制如下:

    1. React 只是一个库,而不是一个完整的框架
    2. 它的库非常庞大,需要时间来理解
    3. 新手程序员可能很难理解
    4. 编码变得复杂,因为它使用内联模板和 JSX

    6. 什么是JSX?

    JSX 是J avaScript XML 的简写。是 React 使用的一种文件,它利用 JavaScript 的表现力和类似 HTML 的模板语法。这使得 HTML 文件非常容易理解。此文件能使应用非常可靠,并能够提高其性能。下面是JSX的一个例子:

    render(){
        return(        
            <div>
                <h1> Hello World from Edureka!!</h1>
            </div>
        );
    }
    

    7. 你了解 Virtual DOM 吗?解释一下它的工作原理。

    Virtual DOM 是一个轻量级的 JavaScript 对象,它最初只是 real DOM 的副本。它是一个节点树,它将元素、它们的属性和内容作为对象及其属性。 React 的渲染函数从 React 组件中创建一个节点树。然后它响应数据模型中的变化来更新该树,该变化是由用户或系统完成的各种动作引起的。

    Virtual DOM 工作过程有三个简单的步骤。

    1. 每当底层数据发生改变时,整个 UI 都将在 Virtual DOM 描述中重新渲染。
      Virtual DOM 1

    2. 然后计算之前 DOM 表示与新表示的之间的差异。
      Virtual DOM 2

    3. 完成计算后,将只用实际更改的内容更新 real DOM。
      Virtual DOM 3

    8. 为什么浏览器无法读取JSX?

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

    9. 与 ES5 相比,React 的 ES6 语法有何不同?

    以下语法是 ES5 与 ES6 中的区别:

    1. require 与 import
    // ES5
    var React = require('react');
     
    // ES6
    import React from 'react';
    
    1. export 与 exports
    // ES5
    module.exports = Component;
     
    // ES6
    export default Component;
    
    1. component 和 function
    // ES5
    var MyComponent = React.createClass({
        render: function() {
            return
    			<h3>Hello Edureka!</h3>;
        }
    });
     
    // ES6
    class MyComponent extends React.Component {
        render() {
            return
    			<h3>Hello Edureka!</h3>;
        }
    }
    
    1. props
    // ES5
    var App = React.createClass({
        propTypes: { name: React.PropTypes.string },
        render: function() {
            return
    			<h3>Hello, {this.props.name}!</h3>;
        }
    });
    
    // ES6
    class App extends React.Component {
        render() {
            return
    			<h3>Hello, {this.props.name}!</h3>;
        }
    }
    
    1. state
    // ES5
    var App = React.createClass({
        getInitialState: function() {
            return { name: 'world' };
        },
        render: function() {
            return
    	        <h3>Hello, {this.state.name}!</h3>;
        }
    });
    
    // ES6
    class App extends React.Component {
        constructor() {
            super();
            this.state = { name: 'world' };
        }
        render() {
            return
    	        <h3>Hello, {this.state.name}!</h3>;
        }
    }
    

    10. React与Angular有何不同?

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

    React 组件

    11. 你理解“在React中,一切都是组件”这句话。

    组件是 React 应用 UI 的构建块。这些组件将整个 UI 分成小的独立并可重用的部分。每个组件彼此独立,而不会影响 UI 的其余部分。

    12. 解释 React 中 render() 的目的。

    每个React组件强制要求必须有一个 render()。它返回一个 React 元素,是原生 DOM 组件的表示。如果需要渲染多个 HTML 元素,则必须将它们组合在一个封闭标记内,例如 <form><group><div> 等。此函数必须保持纯净,即必须每次调用时都返回相同的结果。

    13. 如何将两个或多个组件嵌入到一个组件中?

    可以通过以下方式将组件嵌入到一个组件中:

    class MyComponent extends React.Component{
        render(){
            return(          
    			<div>
                	<h1>Hello</h1>
                    <Header/>
                </div>
            );
        }
    }
    class Header extends React.Component{
        render(){
            return
    			<h1>Header Component</h1>   
       };
    }
    ReactDOM.render(
        <MyComponent/>, document.getElementById('content')
    );
    

    14. 什么是 Props?

    Props 是 React 中属性的简写。它们是只读组件,必须保持纯,即不可变。它们总是在整个应用中从父组件传递到子组件。子组件永远不能将 prop 送回父组件。这有助于维护单向数据流,通常用于呈现动态生成的数据。

    15. React中的状态是什么?它是如何使用的?

    状态是 React 组件的核心,是数据的来源,必须尽可能简单。基本上状态是确定组件呈现和行为的对象。与props 不同,它们是可变的,并创建动态和交互式组件。可以通过 this.state() 访问它们。

    16. 区分状态和 props

    条件 State Props
    1. 从父组件中接收初始值 Yes Yes
    2. 父组件可以改变值 No Yes
    3. 在组件中设置默认值 Yes Yes
    4. 在组件的内部变化 Yes No
    5. 设置子组件的初始值 Yes Yes
    6. 在子组件的内部更改 No Yes

    17. 如何更新组件的状态?

    可以用 this.setState()更新组件的状态。

    class MyComponent extends React.Component {
        constructor() {
            super();
            this.state = {
                name: 'Maxx',
                id: '101'
            }
        }
        render()
            {
                setTimeout(()=>{this.setState({name:'Jaeha', id:'222'})},2000)
                return (              
    				<div>
                    	<h1>Hello {this.state.name}</h1>
    					<h2>Your Id is {this.state.id}</h2>
                    </div>
                );
            }
        }
    ReactDOM.render(
        <MyComponent/>, document.getElementById('content')
    );
    

    18. React 中的箭头函数是什么?怎么用?

    箭头函数(=>)是用于编写函数表达式的简短语法。这些函数允许正确绑定组件的上下文,因为在 ES6 中默认下不能使用自动绑定。使用高阶函数时,箭头函数非常有用。

    //General way
    render() {    
        return(
            <MyInput onChange = {this.handleChange.bind(this) } />
        );
    }
    //With Arrow Function
    render() {  
        return(
            <MyInput onChange = { (e)=>this.handleOnChange(e) } />
        );
    }
    

    19. 区分有状态和无状态组件。

    有状态组件 无状态组件
    1. 在内存中存储有关组件状态变化的信息 1. 计算组件的内部的状态
    2. 有权改变状态 2. 无权改变状态
    3. 包含过去、现在和未来可能的状态变化情况 3. 不包含过去,现在和未来可能发生的状态变化情况
    4. 接受无状态组件状态变化要求的通知,然后将 props 发送给他们。 4.从有状态组件接收 props 并将其视为回调函数。

    20. React组件生命周期的阶段是什么?

    React 组件的生命周期有三个不同的阶段:

    1. *初始渲染阶段:*这是组件即将开始其生命之旅并进入 DOM 的阶段。
    2. *更新阶段:*一旦组件被添加到 DOM,它只有在 prop 或状态发生变化时才可能更新和重新渲染。这些只发生在这个阶段。
    3. *卸载阶段:*这是组件生命周期的最后阶段,组件被销毁并从 DOM 中删除。

    21. 详细解释 React 组件的生命周期方法。

    一些最重要的生命周期方法是:

    1. componentWillMount**()** – 在渲染之前执行,在客户端和服务器端都会执行。
    2. componentDidMount**()** – 仅在第一次渲染后在客户端执行。
    3. componentWillReceiveProps**()** – 当从父类接收到 props 并且在调用另一个渲染器之前调用。
    4. shouldComponentUpdate**()** – 根据特定条件返回 true 或 false。如果你希望更新组件,请返回true 否则返回 false。默认情况下,它返回 false。
    5. componentWillUpdate**()** – 在 DOM 中进行渲染之前调用。
    6. componentDidUpdate**()** – 在渲染发生后立即调用。
    7. componentWillUnmount**()** – 从 DOM 卸载组件后调用。用于清理内存空间。

    22. React中的事件是什么?

    在 React 中,事件是对鼠标悬停、鼠标单击、按键等特定操作的触发反应。处理这些事件类似于处理 DOM 元素中的事件。但是有一些语法差异,如:

    1. 用驼峰命名法对事件命名而不是仅使用小写字母。
    2. 事件作为函数而不是字符串传递。

    事件参数重包含一组特定于事件的属性。每个事件类型都包含自己的属性和行为,只能通过其事件处理程序访问。

    23. 如何在React中创建一个事件?

    class Display extends React.Component({    
        show(evt) {
            // code   
        },   
        render() {      
            // Render the div with an onClick prop (value is a function)        
            return (            
                <div onClick={this.show}>Click Me!</div>
            );    
        }
    });
    

    24. React中的合成事件是什么?

    合成事件是围绕浏览器原生事件充当跨浏览器包装器的对象。它们将不同浏览器的行为合并为一个 API。这样做是为了确保事件在不同浏览器中显示一致的属性。

    25. 你对 React 的 refs 有什么了解?

    Refs 是 React 中引用的简写。它是一个有助于存储对特定的 React 元素或组件的引用的属性,它将由组件渲染配置函数返回。用于对 render() 返回的特定元素或组件的引用。当需要进行 DOM 测量或向组件添加方法时,它们会派上用场。

    class ReferenceDemo extends React.Component{
         display() {
             const name = this.inputDemo.value;
             document.getElementById('disp').innerHTML = name;
         }
    render() {
        return(        
              <div>
                Name: <input type="text" ref={input => this.inputDemo = input} />
                <button name="Click" onClick={this.display}>Click</button>            
                <h2>Hello <span id="disp"></span> !!!</h2>
              </div>
        );
       }
     }
    

    26. 列出一些应该使用 Refs 的情况。

    以下是应该使用 refs 的情况:

    • 需要管理焦点、选择文本或媒体播放时
    • 触发式动画
    • 与第三方 DOM 库集成

    27. 如何模块化 React 中的代码?

    可以使用 export 和 import 属性来模块化代码。它们有助于在不同的文件中单独编写组件。

    //ChildComponent.jsx
    export default class ChildComponent extends React.Component {
        render() {
            return(           
                  <div>
                  	<h1>This is a child component</h1>
                  </div>
            );
        }
    }
     
    //ParentComponent.jsx
    import ChildComponent from './childcomponent.js';
    class ParentComponent extends React.Component {    
        render() {        
            return(           
                 <div>               
                    <App />          
                 </div>       
            );  
        }
    }
    

    28. 如何在 React 中创建表单

    React 表单类似于 HTML 表单。但是在 React 中,状态包含在组件的 state 属性中,并且只能通过 setState() 更新。因此元素不能直接更新它们的状态,它们的提交是由 JavaScript 函数处理的。此函数可以完全访问用户输入到表单的数据。

    handleSubmit(event) {
        alert('A name was submitted: ' + this.state.value);
        event.preventDefault();
    }
     
    render() {
        return (        
            <form onSubmit={this.handleSubmit}>
                <label>
                    Name:
                    <input type="text" value={this.state.value} onChange={this.handleSubmit} />
                </label>
                <input type="submit" value="Submit" />
            </form>
        );
    }
    

    29. 你对受控组件和非受控组件了解多少?

    受控组件 非受控组件
    1. 没有维持自己的状态 1. 保持着自己的状态
    2.数据由父组件控制 2.数据由 DOM 控制
    3. 通过 props 获取当前值,然后通过回调通知更改 3. Refs 用于获取其当前值

    30. 什么是高阶组件(HOC)?

    高阶组件是重用组件逻辑的高级方法,是一种源于 React 的组件模式。 HOC 是自定义组件,在它之内包含另一个组件。它们可以接受子组件提供的任何动态,但不会修改或复制其输入组件中的任何行为。你可以认为 HOC 是“纯(Pure)”组件。

    31. 你能用HOC做什么?

    HOC可用于许多任务,例如:

    • 代码重用,逻辑和引导抽象
    • 渲染劫持
    • 状态抽象和控制
    • Props 控制

    32. 什么是纯组件?

    纯(Pure) 组件是可以编写的最简单、最快的组件。它们可以替换任何只有 render() 的组件。这些组件增强了代码的简单性和应用的性能。

    33. React 中 key 的重要性是什么?

    key 用于识别唯一的 Virtual DOM 元素及其驱动 UI 的相应数据。它们通过回收 DOM 中当前所有的元素来帮助 React 优化渲染。这些 key 必须是唯一的数字或字符串,React 只是重新排序元素而不是重新渲染它们。这可以提高应用程序的性能。

    React Redux

    34. MVC框架的主要问题是什么?

    以下是MVC框架的一些主要问题:

    • 对 DOM 操作的代价非常高
    • 程序运行缓慢且效率低下
    • 内存浪费严重
    • 由于循环依赖性,组件模型需要围绕 models 和 views 进行创建

    35. 解释一下 Flux

    flux
    Flux 是一种强制单向数据流的架构模式。它控制派生数据,并使用具有所有数据权限的中心 store 实现多个组件之间的通信。整个应用中的数据更新必须只能在此处进行。 Flux 为应用提供稳定性并减少运行时的错误。

    36. 什么是Redux?

    Redux 是当今最热门的前端开发库之一。它是 JavaScript 程序的可预测状态容器,用于整个应用的状态管理。使用 Redux 开发的应用易于测试,可以在不同环境中运行,并显示一致的行为。

    37. Redux遵循的三个原则是什么?

    1. ***单一事实来源:***整个应用的状态存储在单个 store 中的对象/状态树里。单一状态树可以更容易地跟踪随时间的变化,并调试或检查应用程序。
    2. ***状态是只读的:***改变状态的唯一方法是去触发一个动作。动作是描述变化的普通 JS 对象。就像 state 是数据的最小表示一样,该操作是对数据更改的最小表示。
    3. ***使用纯函数进行更改:***为了指定状态树如何通过操作进行转换,你需要纯函数。纯函数是那些返回值仅取决于其参数值的函数。

    Store

    38. 你对“单一事实来源”有什么理解?

    Redux 使用 “Store” 将程序的整个状态存储在同一个地方。因此所有组件的状态都存储在 Store 中,并且它们从 Store 本身接收更新。单一状态树可以更容易地跟踪随时间的变化,并调试或检查程序。

    39. 列出 Redux 的组件。

    Redux 由以下组件组成:

    1. Action – 这是一个用来描述发生了什么事情的对象。
    2. Reducer – 这是一个确定状态将如何变化的地方。
    3. Store – 整个程序的状态/对象树保存在Store中。
    4. View – 只显示 Store 提供的数据。

    40. 数据如何通过 Redux 流动?

    Data Flow in Redux

    41. 如何在 Redux 中定义 Action?

    React 中的 Action 必须具有 type 属性,该属性指示正在执行的 ACTION 的类型。必须将它们定义为字符串常量,并且还可以向其添加更多的属性。在 Redux 中,action 被名为 Action Creators 的函数所创建。以下是 Action 和Action Creator 的示例:

    function addTodo(text) {
           return {
                    type: ADD_TODO,    
                     text
        }
    }
    

    42. 解释 Reducer 的作用。

    Reducers 是纯函数,它规定应用程序的状态怎样因响应 ACTION 而改变。Reducers 通过接受先前的状态和 action 来工作,然后它返回一个新的状态。它根据操作的类型确定需要执行哪种更新,然后返回新的值。如果不需要完成任务,它会返回原来的状态。

    43. Store 在 Redux 中的意义是什么?

    Store 是一个 JavaScript 对象,它可以保存程序的状态,并提供一些方法来访问状态、调度操作和注册侦听器。应用程序的整个状态/对象树保存在单一存储中。因此,Redux 非常简单且是可预测的。我们可以将中间件传递到 store 来处理数据,并记录改变存储状态的各种操作。所有操作都通过 reducer 返回一个新状态。

    44. Redux与Flux有何不同?

    Flux Redux
    1. Store 包含状态和更改逻辑 1. Store 和更改逻辑是分开的
    2. 有多个 Store 2. 只有一个 Store
    3. 所有 Store 都互不影响且是平级的 3. 带有分层 reducer 的单一 Store
    4. 有单一调度器 4. 没有调度器的概念
    5. React 组件订阅 store 5. 容器组件是有联系的
    6. 状态是可变的 6. 状态是不可改变的

    45. Redux 有哪些优点?

    Redux 的优点如下:

    • 结果的可预测性 - 由于总是存在一个真实来源,即 store ,因此不存在如何将当前状态与动作和应用的其他部分同步的问题。
    • 可维护性 - 代码变得更容易维护,具有可预测的结果和严格的结构。
    • 服务器端渲染 - 你只需将服务器上创建的 store 传到客户端即可。这对初始渲染非常有用,并且可以优化应用性能,从而提供更好的用户体验。
    • 开发人员工具 - 从操作到状态更改,开发人员可以实时跟踪应用中发生的所有事情。
    • 社区和生态系统 - Redux 背后有一个巨大的社区,这使得它更加迷人。一个由才华横溢的人组成的大型社区为库的改进做出了贡献,并开发了各种应用。
    • 易于测试 - Redux 的代码主要是小巧、纯粹和独立的功能。这使代码可测试且独立。
    • 组织 - Redux 准确地说明了代码的组织方式,这使得代码在团队使用时更加一致和简单。

    React 路由

    46. 什么是React 路由?

    React 路由是一个构建在 React 之上的强大的路由库,它有助于向应用程序添加新的屏幕和流。这使 URL 与网页上显示的数据保持同步。它负责维护标准化的结构和行为,并用于开发单页 Web 应用。 React 路由有一个简单的API。

    47. 为什么React Router v4中使用 switch 关键字 ?

    虽然 <div> ** 用于封装 Router 中的多个路由,当你想要仅显示要在多个定义的路线中呈现的单个路线时,可以使用 “switch” 关键字。使用时,<switch>** 标记会按顺序将已定义的 URL 与已定义的路由进行匹配。找到第一个匹配项后,它将渲染指定的路径。从而绕过其它路线。

    48. 为什么需要 React 中的路由?

    Router 用于定义多个路由,当用户定义特定的 URL 时,如果此 URL 与 Router 内定义的任何 “路由” 的路径匹配,则用户将重定向到该特定路由。所以基本上我们需要在自己的应用中添加一个 Router 库,允许创建多个路由,每个路由都会向我们提供一个独特的视图

    <switch>
        <route exact path=’/’ component={Home}/>
        <route path=’/posts/:id’ component={Newpost}/>
        <route path=’/posts’   component={Post}/>
    </switch>
    

    49. 列出 React Router 的优点。

    几个优点是:

    1. 就像 React 基于组件一样,在 React Router v4 中,API 是 ‘All About Components’。可以将 Router 可视化为单个根组件(<BrowserRouter>),其中我们将特定的子路由(<route>)包起来。
    2. 无需手动设置历史值:在 React Router v4 中,我们要做的就是将路由包装在 <BrowserRouter> 组件中。
    3. 包是分开的:共有三个包,分别用于 Web、Native 和 Core。这使我们应用更加紧凑。基于类似的编码风格很容易进行切换。

    50. React Router与常规路由有何不同?

    主题 常规路由 React 路由
    参与的页面 每个视图对应一个新文件 只涉及单个HTML页面
    URL 更改 HTTP 请求被发送到服务器并且接收相应的 HTML 页面 仅更改历史记录属性
    体验 用户实际在每个视图的不同页面切换 用户认为自己正在不同的页面间切换

    希望这套 React 面试题和答案能帮你准备面试。祝一切顺利!


    欢迎关注微信公众号:jingchengyideng,每天第一时间阅读最新技术文章。

    展开全文
  • react常见面试题

    千次阅读 2018-09-26 21:34:15
    1、redux中间件 中间件提供第三方插件的模式,自定义拦截 action -&gt; reducer 的过程。变为 action -&gt; middlewares -&gt; reducer 。这种机制可以让我们改变数据流,实现如异步 action ,action ...

    1、redux中间件

    中间件提供第三方插件的模式,自定义拦截 action -> reducer 的过程。变为 action -> middlewares -> reducer 。这种机制可以让我们改变数据流,实现如异步 action ,action 过滤,日志输出,异常报告等功能。
    常见的中间件:
    redux-logger:提供日志输出
    redux-thunk:处理异步操作
    redux-promise:处理异步操作,actionCreator的返回值是promise

    2、redux有什么缺点

    1.一个组件所需要的数据,必须由父组件传过来,而不能像flux中直接从store取。
    2.当一个组件相关数据更新时,即使父组件不需要用到这个组件,父组件还是会重新render,可能会有效率影响,或者需要写复杂的shouldComponentUpdate进行判断。

    3、react组件的划分业务组件技术组件?

    根据组件的职责通常把组件分为UI组件和容器组件。
    UI 组件负责 UI 的呈现,容器组件负责管理数据和逻辑。
    两者通过React-Redux 提供connect方法联系起来。

    4、react生命周期函数

    这个问题要考察的是组件的生命周期
    一、初始化阶段:
    getDefaultProps:获取实例的默认属性
    getInitialState:获取每个实例的初始化状态
    componentWillMount:组件即将被装载、渲染到页面上
    render:组件在这里生成虚拟的DOM节点
    componentDidMount:组件真正在被装载之后[AJAX请求]
    二、运行中状态:
    componentWillReceiveProps:组件将要接收到属性的时候调用
    shouldComponentUpdate:组件接受到新属性或者新状态的时候(可以返回false,接收数据后不更新,阻止render调用,后面的函数不会被继续执行了)
    componentWillUpdate:组件即将更新不能修改属性和状态
    render:组件重新描绘
    componentDidUpdate:组件已经更新
    三、销毁阶段:
    componentWillUnmount:组件即将销毁

    5、react性能优化是哪个周期函数?

    shouldComponentUpdate 这个方法用来判断是否需要调用render方法重新描绘dom。因为dom的描绘非常消耗性能,如果我们能在shouldComponentUpdate方法中能够写出更优化的dom diff算法,可以极大的提高性能。

    6、为什么虚拟dom会提高性能?

    虚拟dom相当于在js和真实dom中间加了一个缓存,利用dom diff算法避免了没有必要的dom操作,从而提高性能。
    具体实现步骤如下:
    用 JavaScript 对象结构表示 DOM 树的结构;然后用这个树构建一个真正的 DOM 树,插到文档当中
    当状态变更的时候,重新构造一棵新的对象树。然后用新的树和旧的树进行比较,记录两棵树差异
    把2所记录的差异应用到步骤1所构建的真正的DOM树上,视图就更新了。

    7、diff算法?

    把树形结构按照层级分解,只比较同级元素。
    给列表结构的每个单元添加唯一的key属性,方便比较。
    React 只会匹配相同 class 的 component(这里面的class指的是组件的名字)
    合并操作,调用 component 的 setState 方法的时候, React 将其标记为 dirty.到每一个事件循环结束, React 检查所有标记 dirty 的 component 重新绘制.
    选择性子树渲染。开发人员可以重写shouldComponentUpdate提高diff的性能。

    8、react性能优化方案

    (1)重写shouldComponentUpdate来避免不必要的dom操作。
    (2)使用 production 版本的react.js。
    (3)使用key来帮助React识别列表中所有子组件的最小变化。

    9、简述flux 思想

    Flux 的最大特点,就是数据的”单向流动”。
    1.用户访问 View
    2.View 发出用户的 Action
    3.Dispatcher 收到 Action,要求 Store 进行相应的更新
    4.Store 更新后,发出一个”change”事件
    5.View 收到”change”事件后,更新页面

    10、React项目用过什么脚手架?Mern? Yeoman?

    Mern:MERN是脚手架的工具,它可以很容易地使用Mongo, Express, React and NodeJS生成同构JS应用。它最大限度地减少安装时间,并得到您使用的成熟技术来加速开发。

    11、 Reactjs component 中 prop 和 state 的区别

    1. props放初始化数据,一直不变的,state就是放要变的。
    2. 需要理解的是,props是一个父组件传递给子组件的数据流,这个数据流可以一直传递到子孙组件。而 state代表的是一个组件内部自身的状态(可以是父组件、子孙组件)
    3. 改变一个组件自身状态,从语义上来说,就是这个组件内部已经发生变化,有可能需要对此组件以及组件所包含的子孙组件进行重渲染。
    4. 两者的变化都有可能导致组件重渲染
    5. state:如果component的某些状态需要被改变,并且会影响到component的render,那么这些状态就应该用state表示。例如:一个购物车的component,会根据用户在购物车中添加的产品和产品数量,显示不同的价格,那么“总价”这个状态,就应该用state表示。
    6. props:如果component的某些状态由外部所决定,并且会影响到component的render,那么这些状态就应该用props表示。例如:一个下拉菜单的component,有哪些菜单项,是由这个component的使用者和使用场景决定的,那么“菜单项”这个状态,就应该用props表示,并且由外部传入。

    11、调用 setState 之后发生了什么?

    在代码中调用setState函数之后,React 会将传入的参数对象与组件当前的状态合并,然后触发所谓的调和过程(Reconciliation)。经过调和过程,React 会以相对高效的方式根据新的状态构建 React 元素树并且着手重新渲染整个UI界面。在 React 得到元素树之后,React 会自动计算出新的树与老树的节点差异,然后根据差异对界面进行最小化重渲染。在差异计算算法中,React 能够相对精确地知道哪些位置发生了改变以及应该如何改变,这就保证了按需更新,而不是全部重新渲染。

    12、React 中 refs 的作用是什么?

    Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄。我们可以为元素添加ref属性然后在回调函数中接受该元素在 DOM 树中的句柄,该值会作为回调函数的第一个参数返回

    13、React 中 keys 的作用是什么?

    Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。在开发过程中,我们需要保证某个元素的 key 在其同级元素中具有唯一性。在 React Diff 算法中 React 会借助元素的 Key 值来判断该元素是新近创建的还是被移动而来的元素,从而减少不必要的元素重渲染。此外,React 还需要借助 Key 值来判断元素与本地状态的关联关系,因此我们绝不可忽视转换函数中 Key 的重要性。

    14、shouldComponentUpdate 的作用是啥以及为何它这么重要?

    shouldComponentUpdate 允许我们手动地判断是否要进行组件更新,根据组件的应用场景设置函数的合理返回值能够帮我们避免不必要的更新。

    15、在生命周期中的哪一步你应该发起 AJAX 请求?

    我们应当将AJAX 请求放到 componentDidMount 函数中执行,主要原因有下:
    React 下一代调和算法 Fiber 会通过开始或停止渲染的方式优化应用性能,其会影响到 componentWillMount 的触发次数。对于 componentWillMount 这个生命周期函数的调用次数会变得不确定,React 可能会多次频繁调用 componentWillMount。如果我们将 AJAX 请求放到 componentWillMount 函数中,那么显而易见其会被触发多次,自然也就不是好的选择。
    如果我们将 AJAX 请求放置在生命周期的其他函数中,我们并不能保证请求仅在组件挂载完毕后才会要求响应。如果我们的数据请求在组件挂载之前就完成,并且调用了setState函数将数据添加到组件状态中,对于未挂载的组件则会报错。而在 componentDidMount 函数中进行 AJAX 请求则能有效避免这个问题。

     

    展开全文
  • 已经开源 地址:...React 中 keys 的作用是什么? Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。 render () { return ( <ul> {this.state.to...
        

    已经开源

    地址:https://github.com/nanhupatar...
    关注我们团队:
    图片描述

    React 中 keys 的作用是什么?

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

    render () {
      return (
        <ul>
          {this.state.todoItems.map(({item, key}) => {
            return <li key={key}>{item}</li>
          })}
        </ul>
      )
    }

    在开发过程中,我们需要保证某个元素的 key 在其同级元素中具有唯一性。在 React Diff 算法中 React 会借助元素的 Key 值来判断该元素是新近创建的还是被移动而来的元素,从而减少不必要的元素重渲染。此外,React 还需要借助 Key 值来判断元素与本地状态的关联关系,因此我们绝不可忽视转换函数中 Key 的重要性。

    调用 setState 之后发生了什么?

    在代码中调用 setState 函数之后,React 会将传入的参数对象与组件当前的状态合并,然后触发所谓的调和过程(Reconciliation)。经过调和过程,React 会以相对高效的方式根据新的状态构建 React 元素树并且着手重新渲染整个 UI 界面。在 React 得到元素树之后,React 会自动计算出新的树与老树的节点差异,然后根据差异对界面进行最小化重渲染。在差异计算算法中,React 能够相对精确地知道哪些位置发生了改变以及应该如何改变,这就保证了按需更新,而不是全部重新渲染。

    react 生命周期函数

    • 初始化阶段:

      • getDefaultProps:获取实例的默认属性
      • getInitialState:获取每个实例的初始化状态
      • componentWillMount:组件即将被装载、渲染到页面上
      • render:组件在这里生成虚拟的 DOM 节点
      • componentDidMount:组件真正在被装载之后
    • 运行中状态:

      • componentWillReceiveProps:组件将要接收到属性的时候调用
      • shouldComponentUpdate:组件接受到新属性或者新状态的时候(可以返回 false,接收数据后不更新,阻止 render 调用,后面的函数不会被继续执行了)
      • componentWillUpdate:组件即将更新不能修改属性和状态
      • render:组件重新描绘
      • componentDidUpdate:组件已经更新
    • 销毁阶段:

      • componentWillUnmount:组件即将销毁

    shouldComponentUpdate 是做什么的,(react 性能优化是哪个周期函数?)

    shouldComponentUpdate 这个方法用来判断是否需要调用 render 方法重新描绘 dom。因为 dom 的描绘非常消耗性能,如果我们能在 shouldComponentUpdate 方法中能够写出更优化的 dom diff 算法,可以极大的提高性能。

    参考react 性能优化-sf

    为什么虚拟 dom 会提高性能?(必考)

    虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存,利用 dom diff 算法避免了没有必要的 dom 操作,从而提高性能。

    用 JavaScript 对象结构表示 DOM 树的结构;然后用这个树构建一个真正的 DOM 树,插到文档当中当状态变更的时候,重新构造一棵新的对象树。然后用新的树和旧的树进行比较,记录两棵树差异把 2 所记录的差异应用到步骤 1 所构建的真正的 DOM 树上,视图就更新了。

    参考 如何理解虚拟 DOM?-zhihu

    react diff 原理(常考,大厂必考)

    • 把树形结构按照层级分解,只比较同级元素。
    • 给列表结构的每个单元添加唯一的 key 属性,方便比较。
    • React 只会匹配相同 class 的 component(这里面的 class 指的是组件的名字)
    • 合并操作,调用 component 的 setState 方法的时候, React 将其标记为 dirty.到每一个事件循环结束, React 检查所有标记 dirty 的 component 重新绘制.
    • 选择性子树渲染。开发人员可以重写 shouldComponentUpdate 提高 diff 的性能。

    参考:React 的 diff 算法

    React 中 refs 的作用是什么?

    Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄。我们可以为元素添加 ref 属性然后在回调函数中接受该元素在 DOM 树中的句柄,该值会作为回调函数的第一个参数返回:

    class CustomForm extends Component {
      handleSubmit = () => {
        console.log("Input Value: ", this.input.value)
      }
      render () {
        return (
          <form onSubmit={this.handleSubmit}>
            <input
              type='text'
              ref={(input) => this.input = input} />
            <button type='submit'>Submit</button>
          </form>
        )
      }
    }

    上述代码中的 input 域包含了一个 ref 属性,该属性声明的回调函数会接收 input 对应的 DOM 元素,我们将其绑定到 this 指针以便在其他的类函数中使用。另外值得一提的是,refs 并不是类组件的专属,函数式组件同样能够利用闭包暂存其值:

    function CustomForm ({handleSubmit}) {
      let inputElement
      return (
        <form onSubmit={() => handleSubmit(inputElement.value)}>
          <input
            type='text'
            ref={(input) => inputElement = input} />
          <button type='submit'>Submit</button>
        </form>
      )
    }

    如果你创建了类似于下面的 Twitter 元素,那么它相关的类定义是啥样子的?

    <Twitter username='tylermcginnis33'>
      {(user) => user === null
        ? <Loading />
        : <Badge info={user} />}
    </Twitter>
    import React, { Component, PropTypes } from 'react'
    import fetchUser from 'twitter'
    // fetchUser take in a username returns a promise
    // which will resolve with that username's data.
    class Twitter extends Component {
      // finish this
    }

    如果你还不熟悉回调渲染模式(Render Callback Pattern),这个代码可能看起来有点怪。这种模式中,组件会接收某个函数作为其子组件,然后在渲染函数中以 props.children 进行调用:

    import React, { Component, PropTypes } from 'react'
    import fetchUser from 'twitter'
    class Twitter extends Component {
      state = {
        user: null,
      }
      static propTypes = {
        username: PropTypes.string.isRequired,
      }
      componentDidMount () {
        fetchUser(this.props.username)
          .then((user) => this.setState({user}))
      }
      render () {
        return this.props.children(this.state.user)
      }
    }

    这种模式的优势在于将父组件与子组件解耦和,父组件可以直接访问子组件的内部状态而不需要再通过 Props 传递,这样父组件能够更为方便地控制子组件展示的 UI 界面。譬如产品经理让我们将原本展示的 Badge 替换为 Profile,我们可以轻易地修改下回调函数即可:

    <Twitter username='tylermcginnis33'>
      {(user) => user === null
        ? <Loading />
        : <Profile info={user} />}
    </Twitter>

    展示组件(Presentational component)和容器组件(Container component)之间有何不同

    • 展示组件关心组件看起来是什么。展示专门通过 props 接受数据和回调,并且几乎不会有自身的状态,但当展示组件拥有自身的状态时,通常也只关心 UI 状态而不是数据的状态。
    • 容器组件则更关心组件是如何运作的。容器组件会为展示组件或者其它容器组件提供数据和行为(behavior),它们会调用 Flux actions,并将其作为回调提供给展示组件。容器组件经常是有状态的,因为它们是(其它组件的)数据源。

    类组件(Class component)和函数式组件(Functional component)之间有何不同

    • 类组件不仅允许你使用更多额外的功能,如组件自身的状态和生命周期钩子,也能使组件直接访问 store 并维持状态
    • 当组件仅是接收 props,并将组件自身渲染到页面时,该组件就是一个 '无状态组件(stateless component)',可以使用一个纯函数来创建这样的组件。这种组件也被称为哑组件(dumb components)或展示组件

    (组件的)状态(state)和属性(props)之间有何不同

    • State 是一种数据结构,用于组件挂载时所需数据的默认值。State 可能会随着时间的推移而发生突变,但多数时候是作为用户事件行为的结果。
    • Props(properties 的简写)则是组件的配置。props 由父组件传递给子组件,并且就子组件而言,props 是不可变的(immutable)。组件不能改变自身的 props,但是可以把其子组件的 props 放在一起(统一管理)。Props 也不仅仅是数据--回调函数也可以通过 props 传递。

    何为受控组件(controlled component)

    在 HTML 中,类似 <input>, <textarea><select> 这样的表单元素会维护自身的状态,并基于用户的输入来更新。当用户提交表单时,前面提到的元素的值将随表单一起被发送。但在 React 中会有些不同,包含表单元素的组件将会在 state 中追踪输入的值,并且每次调用回调函数时,如 onChange 会更新 state,重新渲染组件。一个输入表单元素,它的值通过 React 的这种方式来控制,这样的元素就被称为"受控元素"。

    何为高阶组件(higher order component)

    高阶组件是一个以组件为参数并返回一个新组件的函数。HOC 运行你重用代码、逻辑和引导抽象。最常见的可能是 Redux 的 connect 函数。除了简单分享工具库和简单的组合,HOC 最好的方式是共享 React 组件之间的行为。如果你发现你在不同的地方写了大量代码来做同一件事时,就应该考虑将代码重构为可重用的 HOC。

    为什么建议传递给 setState 的参数是一个 callback 而不是一个对象

    因为 this.props 和 this.state 的更新可能是异步的,不能依赖它们的值去计算下一个 state。

    除了在构造函数中绑定 this,还有其它方式吗

    你可以使用属性初始值设定项(property initializers)来正确绑定回调,create-react-app 也是默认支持的。在回调中你可以使用箭头函数,但问题是每次组件渲染时都会创建一个新的回调。

    (在构造函数中)调用 super(props) 的目的是什么

    在 super() 被调用之前,子类是不能使用 this 的,在 ES2015 中,子类必须在 constructor 中调用 super()。传递 props 给 super() 的原因则是便于(在子类中)能在 constructor 访问 this.props。

    应该在 React 组件的何处发起 Ajax 请求

    在 React 组件中,应该在 componentDidMount 中发起网络请求。这个方法会在组件第一次“挂载”(被添加到 DOM)时执行,在组件的生命周期中仅会执行一次。更重要的是,你不能保证在组件挂载之前 Ajax 请求已经完成,如果是这样,也就意味着你将尝试在一个未挂载的组件上调用 setState,这将不起作用。在 componentDidMount 中发起网络请求将保证这有一个组件可以更新了。

    描述事件在 React 中的处理方式。

    为了解决跨浏览器兼容性问题,您的 React 中的事件处理程序将传递 SyntheticEvent 的实例,它是 React 的浏览器本机事件的跨浏览器包装器。

    这些 SyntheticEvent 与您习惯的原生事件具有相同的接口,除了它们在所有浏览器中都兼容。有趣的是,React 实际上并没有将事件附加到子节点本身。React 将使用单个事件监听器监听顶层的所有事件。这对于性能是有好处的,这也意味着在更新 DOM 时,React 不需要担心跟踪事件监听器。

    createElement 和 cloneElement 有什么区别?

    React.createElement():JSX 语法就是用 React.createElement()来构建 React 元素的。它接受三个参数,第一个参数可以是一个标签名。如 div、span,或者 React 组件。第二个参数为传入的属性。第三个以及之后的参数,皆作为组件的子组件。

    React.createElement(
        type,
        [props],
        [...children]
    )

    React.cloneElement()与 React.createElement()相似,不同的是它传入的第一个参数是一个 React 元素,而不是标签名或组件。新添加的属性会并入原有的属性,传入到返回的新元素中,而就的子元素奖杯替换。

    React.cloneElement(
      element,
      [props],
      [...children]
    )

    React 中有三种构建组件的方式

    React.createClass()、ES6 class 和无状态函数。

    react 组件的划分业务组件技术组件?

    • 根据组件的职责通常把组件分为 UI 组件和容器组件。
    • UI 组件负责 UI 的呈现,容器组件负责管理数据和逻辑。
    • 两者通过 React-Redux 提供 connect 方法联系起来。

    简述 flux 思想

    Flux 的最大特点,就是数据的"单向流动"。

    1. 用户访问 View
    2. View 发出用户的 Action
    3. Dispatcher 收到 Action,要求 Store 进行相应的更新
    4. Store 更新后,发出一个"change"事件
    5. View 收到"change"事件后,更新页面

    React 项目用过什么脚手架(本题是开放性题目)

    creat-react-app Yeoman 等

    了解 redux 么,说一下 redux 把

    • redux 是一个应用数据流框架,主要是解决了组件间状态共享的问题,原理是集中式管理,主要有三个核心方法,action,store,reducer,工作流程是 view 调用 store 的 dispatch 接收 action 传入 store,reducer 进行 state 操作,view 通过 store 提供的 getState 获取最新的数据,flux 也是用来进行数据操作的,有四个组成部分 action,dispatch,view,store,工作流程是 view 发出一个 action,派发器接收 action,让 store 进行数据更新,更新完成以后 store 发出 change,view 接受 change 更新视图。Redux 和 Flux 很像。主要区别在于 Flux 有多个可以改变应用状态的 store,在 Flux 中 dispatcher 被用来传递数据到注册的回调事件,但是在 redux 中只能定义一个可更新状态的 store,redux 把 store 和 Dispatcher 合并,结构更加简单清晰
    • 新增 state,对状态的管理更加明确,通过 redux,流程更加规范了,减少手动编码量,提高了编码效率,同时缺点时当数据更新时有时候组件不需要,但是也要重新绘制,有些影响效率。一般情况下,我们在构建多交互,多数据流的复杂项目应用时才会使用它们

    redux 有什么缺点

    • 一个组件所需要的数据,必须由父组件传过来,而不能像 flux 中直接从 store 取。
    • 当一个组件相关数据更新时,即使父组件不需要用到这个组件,父组件还是会重新 render,可能会有效率影响,或者需要写复杂的 shouldComponentUpdate 进行判断。
    展开全文
  • 2019年前端求职面试题-主攻react

    千次阅读 2020-07-31 17:29:53
    以下是多家面试机构的提问集合。 1.css 相关的问题。 @1:盒子模型的理解 盒子是由自身的长宽高,加上padding和border加上margin。怪异盒模型加大padding和margin都不会改变自身的大小。正常盒模型加大padding和...

    —新的一年结束了,开始了求职之路。以下是多家面试机构的提问集合。

    1.css 相关的问题。

    @1:盒子模型的理解

    盒子是由自身的长宽高,加上padding和border加上margin。怪异盒模型加大padding和margin都不会改变自身的大小。正常盒模型加大padding和margin会改变自身的大小。

    @2:浏览器的兼容问题

    例如flex的兼容。
    .box{
    
        display: -webkit-flex;  /* 新版本语法: Chrome 21+ */
        display: flex;          /* 新版本语法: Opera 12.1, Firefox 22+ */
        display: -webkit-box;   /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
        display: -moz-box;      /* 老版本语法: Firefox (buggy) */
        display: -ms-flexbox;   /* 混合版本语法: IE 10 */   
    
     }
    
    .flex1 {            
        -webkit-flex: 1;        /* Chrome */  
        -ms-flex: 1             /* IE 10 */  
        flex: 1;                /* NEW, Spec - Opera 12.1, Firefox 20+ */
        -webkit-box-flex: 1     /* OLD - iOS 6-, Safari 3.1-6 */  
        -moz-box-flex: 1;       /* OLD - Firefox 19- */       
    }

    @3:未知宽高的盒子垂直水平居中的几种方案。

    1.方法1使用弹性盒
    .box{
        display:flex;
        justify-content:center;
        align-items:center;
    }
    2.方法2使用定位
    .box{
        position:relative;
        
    }
    .son{
        position:absolute;
        lef:50%;
        top:50%;
        transform: translate(-50%,-50%);
    }

    @4:1px的解决方法

    1,使用伪类处理1px像素问题。
    .box{
        position: relative;
        border: none;
    }
    
    .box:after{  //  单边框
        content: '';
        position: absolute;
        bottom: 0;
        background: #DCDCDC;
        width: 100%;
        height: 1px;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
    }
    
    .box:after{  //   四条边框
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      border: 1px solid #000;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      width: 200%;
      height: 200%;
      -webkit-transform: scale(0.5);
      transform: scale(0.5);
      -webkit-transform-origin: left top;
      transform-origin: left top;
    }

    @5:上下margin值叠加解决方案

    1.给子元素一个float属性,就不会造成叠加。

    2.给外层元素一个,overflow:hidden

    3.子元素不用margin,给外层元素设置padding,来展示一样的效果。

    4.分别在两个子元素之间加一个有高度的空标签。

    @6:H5C3新特性总结

    @7:移动端浏览器兼容

    @8:浅谈video标签在移动端的运用

    @9:rem的理解

    2.js相关的问题。

    @1:闭包的理解

    作用:闭包是为了解决变量私有化。可以读取其他函数内的变量。缺点:长期驻留内存,内存消耗大。不能释放。

    @2:构造函数和实例和原型对象的理解

    实例有一个内部指针,指向原型对象。原型对象通过constructor属性指向相关的构造函数。构造函数通过prototype属性指向原型对象。

    @3:es6的认知

    》箭头函数 》变量的声明let const 》解构赋值 》模板字符串 》promise 》扩展运算符。

    _拓展:1.解构赋值在什么情况下才会使用到默认值?

    关注点在于解构出来的是null还是undefined?,为null的时候,解构还是null,为undefined的时候,就会用到默认值。

    (原理的是,解构赋值会严格的按照===undefined的判断,然后就是null和undefined自身的区别了。)

     

    @4:foreach和map的区别

    foreach的返回值为undefined,map返回值为新数组。原数组不发生改变。

    @5:聊聊call和apply和bind的区别和使用场景

    区别:callapply的用法几乎一样,唯一的不同就是传递的参数不同,call只能一个参数一个参数的传入。
    apply则只支持传入一个数组,哪怕是一个参数也要是数组形式。最终调用函数时候这个数组会拆成一个个参数分别传入。
    至于bind方法,他是直接改变这个函数的this指向并且返回一个新的函数,之后再次调用这个函数的时候this都是指向bind绑定的第一个参数。bind传餐方式跟call方法一致。

    使用场景:

    1. 当我们使用一个函数需要改变this指向的时候才会用到call`apply`bind
    2. 如果你要传递的参数不多,则可以使用fn.call(thisObj, arg1, arg2 ...)
    3. 如果你要传递的参数很多,则可以用数组将参数整理好调用fn.apply(thisObj, [arg1, arg2 ...])
    4. 如果你想生成一个新的函数长期绑定某个函数给某个对象使用,则可以使用const newFn = fn.bind(thisObj); newFn(arg1, arg2...)

    @6:ES6新的数组去重方法

    es6里新添加了两个很好用的东西,set和Array.from。

    set是一种新的数据结构,它可以接收一个数组或者是类数组对象,自动去重其中的重复项目。

    set返回的是一个对象,可以通过Array.from来转化为数组。

    @7:深拷贝浅拷贝的认知和实现的方法

    认知:

    深拷贝是复制引用类型对象,当前对象不会随着改变而发生变化。

    浅拷贝是拷贝引用类型的地址。当前对象会随着改变而发生变化。

    方法:

    浅拷贝:Object-assign()

    深拷贝:先使用json.stringify()在使用json.parse

    @8:函数阻塞问题

    @9:防抖函数

    @10:ansy awite 和promise的区别

    @11:怎么处理多个同时触发的异步请求

    @12:JS的节流、函数防抖 原理及使用场景

    @13:遍历对象的多种方法列举

    3.react相关的问题。

    @1:生命周期

     

    1.使用伪表达式来阐述。
      constructor(){
       1.定义一些初始的变量。
       2.定义初始绑定的函数。
      }
    
      componentWillMount(){
        1.加载页面开始渲染要看到的效果。
      }
    
      componentDidMount(){
        1. 在这里可以编写异步请求。
        2. 可以拿到dom节点。
      }
    
      shouldComponentUpdate(){
        1.控制因为某些不重要的state改变,而不去渲染页面。return false;可以提高性能。
      }
    
      render() {
        1.功能必不可少,吐出dom节点。
      }
    
      componentWillUnmount(){
        1.可以在这里销毁某些函数,和插件。
      }
    
      componentWillReceiveProps(){
        //props发生改变,子组件会在此周期行数接收到变化。
        1.考察问题:父组件的props的改变,子组件一定会在此函数接收到吗?
    
            @1:如果父组件的props是基本类型的,子组件一定会在次周期函数接收到变化的值。
            @2:如果父组件的Props是引用类型的。并且只有一层例如{key:value},比如是一个对象的key:value任何变化也会接收到。但是如果改变的是多层数据的key:value值就不会接收变化的。例如[[{key:vale}]]
      }

    @2:react的单向数据流和双向数据绑定

    单向数据流中的‘单向’-- 数据从父组件到子组件这个流向叫单向。

    
    一个基础的不能再基础的数据双向绑定 因为react不同于vue 没有v-model指令 所以怎么实现呢?
    
    import React from "react"
    import ReactDOM from "react-dom"
    
    export default class DataBind extends Comonent{
        constructor(){
            super()
            this.state = {
                value: "wzy"
            }
        }
        handleChange(e){
            this.setState({
                value : e.target.value
            )
        }
        
        render(){
            return(
                <div>
                    <input value={this.state.value} onChange={this.handleChange.bind(this)}><input/>
                    <p>{this.state.value}<p/>
                <div/>
            )
        }
        
    }

    @3:redux的流程图

    @4:setState是为什么是异布的?

    保证内部数据统一,setState异布更新状态使得并发更新组件成为可能。

    @5:vue和react的区别

    @6:diff算法的认知

    @7:react16.8版本的了解(hook/生命周期)

    @8:connect高阶组件工作的原理和认知

    @9:react的性能优化

    shouldComponentUpdate生命周期的手动控制/包裹节点使用react.Fragments/遍历渲染节点加入唯一的k值/在constructor里面定义初始的函数/使用高阶组件来封装某个功能块/如果是纯粹的展示组件可以,采用函数式组件。

    @10:react router懒加载实现

    @11:react包和react-dom包分别是干啥的。

    1.react软件包仅包含定义React组件所需的功能。它通常与React渲染器一起使用,例如react-dom用于Web或react-native本机环境

    2.react-dom包充当React的DOM和服务器渲染器的入口点。它打算与reactnpm 附带的通用React软件包配对。

    @12:react虚拟dom是什么。

    <div id="abc"><span>hello world !</span></div>(真实dom节点)

    ['DIV',{ id : 'abc'},['span',{},'bye bye']](虚拟dom来描述真实dom)

    虚拟DOM本质上就是一个JS对象,用它来描述真实DOM,之所以能够提高性能,本质上是因为js去比较js对象不太消耗性能,而去比较真实的DOM会很消耗性能。

    4. 前端的拓展,webpack||node||模块化理解||http

    @1:webpack插件解析:HtmlWebpackPlugin是干什么的以及如何使用它

    @2:浏览器缓存机制

    @3:原生的xmlhttpresquest和fetch的区别。axios的了解

    @4:怎么解决http队头阻塞。

    1. 并发TCP连接(浏览器一个域名采用6-8个TCP连接,并发HTTP请求)
    2. 域名分片(多个域名,可以建立更多的TCP连接,从而提高HTTP请求的并发)

    2. HTTP2方式

    http2使用一个域名单一TCP连接发送请求,请求包被二进制分帧,不同请求可以互相穿插,避免了http层面的请求队头阻塞。
    但是不能避免TCP层面的队头阻塞。

    @5:前端判断用户登录状态方法。

    方法一:

    登录成功后,后端返回一个 cookie,根据这个 cookie 的有无来判断;退出登录时,后端会删除这个 cookie;

    方法二:

    登录成功后,前端设置 cookie,比如'isLogin = true',根据isLogin的值去判断;退出登录时删除 cookieisLogin 或设置  'isLogin = false'。

    方法三:

    1. 前台发送登录请求
    2. 后台返回 token,前台得到后台返回的 token,将其写入到 localStorage 中,后续请求中都携带 token
    3. 后台判断 token 是否过期,如果过期就对前台的请求响应过期标识或者状态码
    4. 前台得到过期标识后,清除 localStorage 中的 token,然后重定向到 login 路由

    @6:mvvm的设计模式的理解(react/vue/angular)。

    1.首先要了解到mvc设计模式。

    mvc即model-view-controller(模型-视图-控制器)

    model:应用程序中处理数据逻辑的一部分,通常用来模型对象对数据库的存存取等操作

    view:视图部分,通常指jsp、html等用来对用户展示的一部分

    controller:控制层通常用来处理业务逻辑,负责从试图读取数据,并向模型发送数据

    2.mvvm的出现是基于mvc设计的改造不是创新,弱化了controller层。

    mvvm即Model-View-ViewModel

    ViewMode看作是Model和View的连接桥,View可以通过事件绑定Model,Model可以通过数据绑定View,通过ViewMode可以实现数据和视图的完全分离

    5.个人遇到的坑和解决方案。

    @1:使用antd的时候,展开table设置任意展开点出现了问题

    解决方法是expandedRowKeys和rowKey的属性可以随意设置展开点。

    6.个人学习的途径和遇到问题的处理方式。

    1.平时会查阅掘金和csdn博客来看一些前端最新的动态。

    2.遇到新的知识点可以在github上下载一些demo。运行成功后写一些类似的功能。

    3.平时遇到的一些错误会到StackOverflow查阅。

    4.工作中发现的特殊问题会记载到csdn博客中。

    展开全文
  • React 1) React 中 keys 的作用是什么? Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。 render () { return ( &lt;ul&gt; {this.state.todoItems.map(({item,i}) =&...
  • 面试 | 必须要会的50个React面试题

    千次阅读 2020-10-16 16:41:43
    本文是你学习和面试 React 所需知识的完美指南。 JavaScript 工具缓慢而稳定地在市场中扎根,对 React 的需求呈指数级增长。选择合适的技术来开发应用或网站变得越来越有挑战性。其中 React 被认为是增长最快的 ...
  • React 常见的面试题

    万次阅读 2017-04-11 15:57:03
    之所以标题是《 React 常见的面试题》,其实只是想起一个比《在 React 里面,你可以知道也可以不知道的事, 但是你会发现他们确实很有用》要简单明了的标题而已。http://johannlai.com/2017/04/09/R
  • React 面试题 & 回答

    千次阅读 2019-03-26 17:49:23
    本项目的面试题来源于sudheerj/reactjs-interview-questions这个项目。一时兴起就动起了翻译的念头,由于本人的 React 功力尚浅,翻译的内容难免有误或不妥的地方,望请各位见谅。如果你喜欢这个项目,请 Star,更...
  • 关于React面试题及答案汇总

    万次阅读 2018-04-12 16:50:43
    1、redux中间件中间件提供第三方插件的模式,自定义拦截action -&gt; reducer 的过程。变为 action -&gt; middlewares -&gt; reducer。这种机制可以让我们改变数据流,实现如异步 action ,action 过滤...
  • React经典面试题

    万次阅读 多人点赞 2018-12-20 17:37:19
    React经典面试题 1、react生命周期及相关用法 react生命周期分为初始化阶段、运行阶段、销毁阶段。 (1) 初始化阶段: componentWillMount:实例挂载之前 Render:渲染组件 componentDidMount:实例挂载完成。一般在...
  • 一份react 面试题

    千次阅读 2018-09-24 23:58:05
    声明:题目是群里面看到的,并不完全。答案自己手撸 1、下面打印出b的值是?if(true){let b = 2} alert(b). let不存在变量提升,且作用域只在代码块,输出undefined 2、const name = 'jack';...
  • 2020前端面试题react

    千次阅读 2020-01-24 11:58:39
    一个简单的react面试题: 将下面的jsx语法,写成react语法: return( <div> <ul className="list-li"> <li>JavaScript</li> <li>html</li> </u...
  • React面试必会--React的Diff算法

    万次阅读 2016-10-13 10:17:07
    使用React或者RN开发APP如果不知道Diff算法的话简直是说不过去啊。毕竟“知其然,知其所以然”这句老话从远古喊到现代了。以下内容基本是官网文章的一个总结、压缩。这次要谦虚一下,毕竟深入研究RN的时间不多,如果...
  • 一份react-native面试题

    千次阅读 2017-12-21 00:53:10
    1、下面打印出b的值是?if(true){let b = 2} alert(b).  let不存在变量提升,且作用域只在代码块,输出undefined 2、const name = 'jack';... const person = {[name] : true, [age] : true}....
  • React一到三年面试题以及进阶题分享

    万次阅读 2020-08-05 10:30:31
    笔者是众多React开发者之一,...React面试题正文: React是什么开发模式的框架? 答案:React其实只属于V,视图 请讲讲React的特点。 答案:React的特定及缺点以及关键版本介绍 请说出React的关键版本区别。 答案...
  • 前端面试题(二)vue和react的区别

    千次阅读 2020-04-23 16:12:48
    相同点 1 都支持服务器端渲染 2 都有Virtual DOM(虚拟dom),组件化开发,都有’props’的概念,这是properties的简写。...4 都有支持native的方案,ReactReact native,Vue的weex 5 构建工具 React和Vue都有自己的构...
  • React Native面试题及常用知识

    万次阅读 2018-04-20 09:38:13
    React Native面试题MONDAY. MARCH 26, 2018 - 2 MINSREACT NATIVE本文原创首发于公众号:ReactNative开发圈,转载需注明出处。本文会不定期不断更新,想查看最新版本请移步至...
  • 完全征服React Native

    万人学习 2018-10-22 21:38:05
    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识...
  • ReactReact Native面试题

    万次阅读 2017-10-11 12:59:11
    ReactReact Native面试题伴随着MVVM框架和移动端跨平台开发越来越火,作为移动端的你准备好了吗?基础部分(答案自行百度,简答只做提示) 1.React Native相对于原生的ios和Android有哪些优势? 简答:react ...
  • 前端三年到五年面试题分享

    万次阅读 多人点赞 2020-08-05 10:31:31
    今天给大家分享一些三年到五年前端的面试题 1. 达达京东到家 笔试: 都是些基础选择题,考察计算机网络,事件循环机制,闭包,this 这些。 一面: 三次握手和四次挥手详细介绍 TCP 有哪些手段保证可靠交付 ...
1 2 3 4 5 ... 20
收藏数 8,706
精华内容 3,482
关键字:

react面试题