翻译:疯狂的技术宅
原文: https://www.edureka.co/blog/i...
本文首发微信公众号:jingchengyideng
欢迎关注,天天都给你推送新鲜的前端技术文章javascript
若是你是一位有抱负的前端程序员并准备面试,那么这篇文章很适合你。本文是你学习和面试 React 所需知识的完美指南。前端
JavaScript 工具缓慢而稳定地在市场中扎根,对 React 的需求呈指数级增加。选择合适的技术来开发应用或网站变得愈来愈有挑战性。其中 React 被认为是增加最快的 Javascript 框架。java
截至今天,Github 上约有1,000名贡献者。 Virtual DOM 和可重用组件等独特功能吸引了前端开发人员的注意力。尽管它只是 MVC(模型 - 视图 - 控制器)中“视图”的库,但它对 Angular,Meteor,Vue 等全面的框架也构成了强力的挑战。下图为流行的 JS 框架的趋势:react
JS 框架的趋势程序员
如下是面试官最有可能问到的 50 个 React 面试题和答案。为方便你学习,我对它们进行了分类:面试
Real DOM | Virtual DOM |
---|---|
1. 更新缓慢。 | 1. 更新更快。 |
2. 能够直接更新 HTML。 | 2. 没法直接更新 HTML。 |
3. 若是元素更新,则建立新DOM。 | 3. 若是元素更新,则更新 JSX 。 |
4. DOM操做代价很高。 | 4. DOM 操做很是简单。 |
5. 消耗的内存较多。 | 5. 不多的内存消耗。 |
React的主要功能以下:segmentfault
React的一些主要优势是:浏览器
React的限制以下:服务器
JSX 是J avaScript XML 的简写。是 React 使用的一种文件,它利用 JavaScript 的表现力和相似 HTML 的模板语法。这使得 HTML 文件很是容易理解。此文件能使应用很是可靠,并可以提升其性能。下面是JSX的一个例子:微信
render(){ return( <div> <h1> Hello World from Edureka!!</h1> </div> ); }
Virtual DOM 是一个轻量级的 JavaScript 对象,它最初只是 real DOM 的副本。它是一个节点树,它将元素、它们的属性和内容做为对象及其属性。 React 的渲染函数从 React 组件中建立一个节点树。而后它响应数据模型中的变化来更新该树,该变化是由用户或系统完成的各类动做引发的。
Virtual DOM 工做过程有三个简单的步骤。
浏览器只能处理 JavaScript 对象,而不能读取常规 JavaScript 对象中的 JSX。因此为了使浏览器可以读取 JSX,首先,须要用像 Babel 这样的 JSX 转换器将 JSX 文件转换为 JavaScript 对象,而后再将其传给浏览器。
如下语法是 ES5 与 ES6 中的区别:
1.require 与 import
// ES5 var React = require('react'); // ES6 import React from 'react';
2.export 与 exports
// ES5 module.exports = Component; // ES6 export default Component;
3.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>; } }
4.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>; } }
5.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>; } }
主题 | React | Angular |
---|---|---|
1. 体系结构 | 只有 MVC 中的 View | 完整的 MVC |
2. 渲染 | 能够进行服务器端渲染 | 客户端渲染 |
3. DOM | 使用 virtual DOM | 使用 real DOM |
4. 数据绑定 | 单向数据绑定 | 双向数据绑定 |
5. 调试 | 编译时调试 | 运行时调试 |
6. 做者 |
组件是 React 应用 UI 的构建块。这些组件将整个 UI 分红小的独立并可重用的部分。每一个组件彼此独立,而不会影响 UI 的其他部分。
每一个React组件强制要求必须有一个 render()。它返回一个 React 元素,是原生 DOM 组件的表示。若是须要渲染多个 HTML 元素,则必须将它们组合在一个封闭标记内,例如 <form>
、<group>
、<div>
等。此函数必须保持纯净,即必须每次调用时都返回相同的结果。
能够经过如下方式将组件嵌入到一个组件中:
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') );
Props 是 React 中属性的简写。它们是只读组件,必须保持纯,即不可变。它们老是在整个应用中从父组件传递到子组件。子组件永远不能将 prop 送回父组件。这有助于维护单向数据流,一般用于呈现动态生成的数据。
状态是 React 组件的核心,是数据的来源,必须尽量简单。基本上状态是肯定组件呈现和行为的对象。与props 不一样,它们是可变的,并建立动态和交互式组件。能够经过 this.state()
访问它们。
条件 | State | Props |
---|---|---|
1. 从父组件中接收初始值 | Yes | Yes |
2. 父组件能够改变值 | No | Yes |
3. 在组件中设置默认值 | Yes | Yes |
4. 在组件的内部变化 | Yes | No |
5. 设置子组件的初始值 | Yes | Yes |
6. 在子组件的内部更改 | No | Yes |
能够用 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') );
箭头函数(=>)是用于编写函数表达式的简短语法。这些函数容许正确绑定组件的上下文,由于在 ES6 中默认下不能使用自动绑定。使用高阶函数时,箭头函数很是有用。
//General way render() { return( <MyInput onChange = {this.handleChange.bind(this) } /> ); } //With Arrow Function render() { return( <MyInput onChange = { (e)=>this.handleOnChange(e) } /> ); }
有状态组件 | 无状态组件 |
---|---|
1. 在内存中存储有关组件状态变化的信息 | 1. 计算组件的内部的状态 |
2. 有权改变状态 | 2. 无权改变状态 |
3. 包含过去、如今和将来可能的状态变化状况 | 3. 不包含过去,如今和将来可能发生的状态变化状况 |
4. 接受无状态组件状态变化要求的通知,而后将 props 发送给他们。 | 4.从有状态组件接收 props 并将其视为回调函数。 |
React 组件的生命周期有三个不一样的阶段:
一些最重要的生命周期方法是:
在 React 中,事件是对鼠标悬停、鼠标单击、按键等特定操做的触发反应。处理这些事件相似于处理 DOM 元素中的事件。可是有一些语法差别,如:
事件参数重包含一组特定于事件的属性。每一个事件类型都包含本身的属性和行为,只能经过其事件处理程序访问。
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> ); } });
合成事件是围绕浏览器原生事件充当跨浏览器包装器的对象。它们将不一样浏览器的行为合并为一个 API。这样作是为了确保事件在不一样浏览器中显示一致的属性。
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> ); } }
如下是应该使用 refs 的状况:
可使用 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> ); } }
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> ); }
受控组件 | 非受控组件 |
---|---|
1. 没有维持本身的状态 | 1. 保持着本身的状态 |
2.数据由父组件控制 | 2.数据由 DOM 控制 |
3. 经过 props 获取当前值,而后经过回调通知更改 | 3. Refs 用于获取其当前值 |
高阶组件是重用组件逻辑的高级方法,是一种源于 React 的组件模式。 HOC 是自定义组件,在它以内包含另外一个组件。它们能够接受子组件提供的任何动态,但不会修改或复制其输入组件中的任何行为。你能够认为 HOC 是“纯(Pure)”组件。
HOC可用于许多任务,例如:
纯(Pure) 组件是能够编写的最简单、最快的组件。它们能够替换任何只有 render() 的组件。这些组件加强了代码的简单性和应用的性能。
key 用于识别惟一的 Virtual DOM 元素及其驱动 UI 的相应数据。它们经过回收 DOM 中当前全部的元素来帮助 React 优化渲染。这些 key 必须是惟一的数字或字符串,React 只是从新排序元素而不是从新渲染它们。这能够提升应用程序的性能。
如下是MVC框架的一些主要问题:
Flux 是一种强制单向数据流的架构模式。它控制派生数据,并使用具备全部数据权限的中心 store 实现多个组件之间的通讯。整个应用中的数据更新必须只能在此处进行。 Flux 为应用提供稳定性并减小运行时的错误。
Redux 是当今最热门的前端开发库之一。它是 JavaScript 程序的可预测状态容器,用于整个应用的状态管理。使用 Redux 开发的应用易于测试,能够在不一样环境中运行,并显示一致的行为。
Redux 使用 “Store” 将程序的整个状态存储在同一个地方。所以全部组件的状态都存储在 Store 中,而且它们从 Store 自己接收更新。单一状态树能够更容易地跟踪随时间的变化,并调试或检查程序。
Redux 由如下组件组成:
React 中的 Action 必须具备 type 属性,该属性指示正在执行的 ACTION 的类型。必须将它们定义为字符串常量,而且还能够向其添加更多的属性。在 Redux 中,action 被名为 Action Creators 的函数所建立。如下是 Action 和Action Creator 的示例:
function addTodo(text) { return { type: ADD_TODO, text } }
Reducers 是纯函数,它规定应用程序的状态怎样因响应 ACTION 而改变。Reducers 经过接受先前的状态和 action 来工做,而后它返回一个新的状态。它根据操做的类型肯定须要执行哪一种更新,而后返回新的值。若是不须要完成任务,它会返回原来的状态。
Store 是一个 JavaScript 对象,它能够保存程序的状态,并提供一些方法来访问状态、调度操做和注册侦听器。应用程序的整个状态/对象树保存在单一存储中。所以,Redux 很是简单且是可预测的。咱们能够将中间件传递到 store 来处理数据,并记录改变存储状态的各类操做。全部操做都经过 reducer 返回一个新状态。
Flux | Redux |
---|---|
1. Store 包含状态和更改逻辑 | 1. Store 和更改逻辑是分开的 |
2. 有多个 Store | 2. 只有一个 Store |
3. 全部 Store 都互不影响且是平级的 | 3. 带有分层 reducer 的单一 Store |
4. 有单一调度器 | 4. 没有调度器的概念 |
5. React 组件订阅 store | 5. 容器组件是有联系的 |
6. 状态是可变的 | 6. 状态是不可改变的 |
Redux 的优势以下:
React 路由是一个构建在 React 之上的强大的路由库,它有助于向应用程序添加新的屏幕和流。这使 URL 与网页上显示的数据保持同步。它负责维护标准化的结构和行为,并用于开发单页 Web 应用。 React 路由有一个简单的API。
虽然 <div>
用于封装 Router 中的多个路由,当你想要仅显示要在多个定义的路线中呈现的单个路线时,可使用 “switch” 关键字。使用时,<switch>
标记会按顺序将已定义的 URL 与已定义的路由进行匹配。找到第一个匹配项后,它将渲染指定的路径。从而绕过其它路线。
Router 用于定义多个路由,当用户定义特定的 URL 时,若是此 URL 与 Router 内定义的任何 “路由” 的路径匹配,则用户将重定向到该特定路由。因此基本上咱们须要在本身的应用中添加一个 Router 库,容许建立多个路由,每一个路由都会向咱们提供一个独特的视图
<switch> <route exact path=’/’ component={Home}/> <route path=’/posts/:id’ component={Newpost}/> <route path=’/posts’ component={Post}/> </switch>
几个优势是:
<BrowserRouter>
),其中咱们将特定的子路由(<route>
)包起来。<BrowserRouter>
组件中。主题 | 常规路由 | React 路由 |
---|---|---|
参与的页面 | 每一个视图对应一个新文件 | 只涉及单个HTML页面 |
URL 更改 | HTTP 请求被发送到服务器而且接收相应的 HTML 页面 | 仅更改历史记录属性 |
体验 | 用户实际在每一个视图的不一样页面切换 | 用户认为本身正在不一样的页面间切换 |
但愿这套 React 面试题和答案能帮你准备面试。祝一切顺利!