每日前端夜话0x40
每日前端夜话,陪你聊前端。
每天晚上18:00准时推送。
正文共:7469 字 4图
预计阅读时间: 15 分钟
由于内容过多,文章分两次推送,请持续关注。
翻译:疯狂的技术宅 原文: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 框架的趋势
以下是面试官最有可能问到的 50 个 React 面试题和答案。为方便你学习,我对它们进行了分类:
Real DOM | Virtual DOM |
---|---|
1. 更新缓慢。 | 1. 更新更快。 |
2. 可以直接更新 HTML。 | 2. 无法直接更新 HTML。 |
3. 如果元素更新,则创建新DOM。 | 3. 如果元素更新,则更新 JSX 。 |
4. DOM操作代价很高。 | 4. DOM 操作非常简单。 |
5.消耗太多的内存。 | 5. 很少的内存消耗。 |
React的主要功能如下:
React的一些主要优点是:
React的限制如下:
JSX 是J avaScript XML 的简写。是 React 使用的一种文件,它利用 JavaScript 的表现力和类似 HTML 的模板语法。这使得 HTML 文件非常容易理解。此文件能使应用非常可靠,并能够提高其性能。下面是JSX的一个例子:
1render(){
2 return(
3 <div>
4 <h1> Hello World from Edureka!!</h1>
5 </div>
6 );
7}
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
浏览器只能处理 JavaScript 对象,而不能读取常规 JavaScript 对象中的 JSX。所以为了使浏览器能够读取 JSX,首先,需要用像 Babel 这样的 JSX 转换器将 JSX 文件转换为 JavaScript 对象,然后再将其传给浏览器。
以下语法是 ES5 与 ES6 中的区别:
1// ES5
2var React = require('react');
3
4// ES6
5import React from 'react';
1// ES5
2module.exports = Component;
3
4// ES6
5export default Component;
1// ES5
2var MyComponent = React.createClass({
3 render: function() {
4 return
5 <h3>Hello Edureka!</h3>;
6 }
7});
8
9// ES6
10class MyComponent extends React.Component {
11 render() {
12 return
13 <h3>Hello Edureka!</h3>;
14 }
15}
1// ES5
2var App = React.createClass({
3 propTypes: { name: React.PropTypes.string },
4 render: function() {
5 return
6 <h3>Hello, {this.props.name}!</h3>;
7 }
8});
9
10// ES6
11class App extends React.Component {
12 render() {
13 return
14 <h3>Hello, {this.props.name}!</h3>;
15 }
16}
1// ES5
2var App = React.createClass({
3 getInitialState: function() {
4 return { name: 'world' };
5 },
6 render: function() {
7 return
8 <h3>Hello, {this.state.name}!</h3>;
9 }
10});
11
12// ES6
13class App extends React.Component {
14 constructor() {
15 super();
16 this.state = { name: 'world' };
17 }
18 render() {
19 return
20 <h3>Hello, {this.state.name}!</h3>;
21 }
22}
主题 | 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>
等。此函数必须保持纯净,即必须每次调用时都返回相同的结果。
可以通过以下方式将组件嵌入到一个组件中:
1class MyComponent extends React.Component{
2 render(){
3 return(
4 <div>
5 <h1>Hello</h1>
6 <Header/>
7 </div>
8 );
9 }
10}
11class Header extends React.Component{
12 render(){
13 return
14 <h1>Header Component</h1>
15 };
16}
17ReactDOM.render(
18 <MyComponent/>, document.getElementById('content')
19);
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()
更新组件的状态。
1class MyComponent extends React.Component {
2 constructor() {
3 super();
4 this.state = {
5 name: 'Maxx',
6 id: '101'
7 }
8 }
9 render()
10 {
11 setTimeout(()=>{this.setState({name:'Jaeha', id:'222'})},2000)
12 return (
13 <div>
14 <h1>Hello {this.state.name}</h1>
15 <h2>Your Id is {this.state.id}</h2>
16 </div>
17 );
18 }
19 }
20ReactDOM.render(
21 <MyComponent/>, document.getElementById('content')
22);
箭头函数(=>)是用于编写函数表达式的简短语法。这些函数允许正确绑定组件的上下文,因为在 ES6 中默认下不能使用自动绑定。使用高阶函数时,箭头函数非常有用。
1//General way
2render() {
3 return(
4 <MyInput onChange = {this.handleChange.bind(this) } />
5 );
6}
7//With Arrow Function
8render() {
9 return(
10 <MyInput onChange = { (e)=>this.handleOnChange(e) } />
11 );
12}
有状态组件 | 无状态组件 |
---|---|
1. 在内存中存储有关组件状态变化的信息 | 1. 计算组件的内部的状态 |
2. 有权改变状态 | 2. 无权改变状态 |
3. 包含过去、现在和未来可能的状态变化情况 | 3. 不包含过去,现在和未来可能发生的状态变化情况 |
4. 接受无状态组件状态变化要求的通知,然后将 props 发送给他们。 | 4.从有状态组件接收 props 并将其视为回调函数。 |
React 组件的生命周期有三个不同的阶段:
一些最重要的生命周期方法是:
在 React 中,事件是对鼠标悬停、鼠标单击、按键等特定操作的触发反应。处理这些事件类似于处理 DOM 元素中的事件。但是有一些语法差异,如:
事件参数重包含一组特定于事件的属性。每个事件类型都包含自己的属性和行为,只能通过其事件处理程序访问。
1class Display extends React.Component({
2 show(evt) {
3 // code
4 },
5 render() {
6 // Render the div with an onClick prop (value is a function)
7 return (
8 <div onClick={this.show}>Click Me!</div>
9 );
10 }
11});
合成事件是围绕浏览器原生事件充当跨浏览器包装器的对象。它们将不同浏览器的行为合并为一个 API。这样做是为了确保事件在不同浏览器中显示一致的属性。
Refs 是 React 中引用的简写。它是一个有助于存储对特定的 React 元素或组件的引用的属性,它将由组件渲染配置函数返回。用于对 render() 返回的特定元素或组件的引用。当需要进行 DOM 测量或向组件添加方法时,它们会派上用场。
1class ReferenceDemo extends React.Component{
2 display() {
3 const name = this.inputDemo.value;
4 document.getElementById('disp').innerHTML = name;
5 }
6render() {
7 return(
8 <div>
9 Name: <input type="text" ref={input => this.inputDemo = input} />
10 <button name="Click" onClick={this.display}>Click</button>
11 <h2>Hello <span id="disp"></span> !!!</h2>
12 </div>
13 );
14 }
15 }
以下是应该使用 refs 的情况:
可以使用 export 和 import 属性来模块化代码。它们有助于在不同的文件中单独编写组件。
1//ChildComponent.jsx
2export default class ChildComponent extends React.Component {
3 render() {
4 return(
5 <div>
6 <h1>This is a child component</h1>
7 </div>
8 );
9 }
10}
11
12//ParentComponent.jsx
13import ChildComponent from './childcomponent.js';
14class ParentComponent extends React.Component {
15 render() {
16 return(
17 <div>
18 <App />
19 </div>
20 );
21 }
22}
React 表单类似于 HTML 表单。但是在 React 中,状态包含在组件的 state 属性中,并且只能通过 setState()
更新。因此元素不能直接更新它们的状态,它们的提交是由 JavaScript 函数处理的。此函数可以完全访问用户输入到表单的数据。
1handleSubmit(event) {
2 alert('A name was submitted: ' + this.state.value);
3 event.preventDefault();
4}
5
6render() {
7 return (
8 <form onSubmit={this.handleSubmit}>
9 <label>
10 Name:
11 <input type="text" value={this.state.value} onChange={this.handleSubmit} />
12 </label>
13 <input type="submit" value="Submit" />
14 </form>
15 );
16}
【明天推送下篇】