당신이 야심찬 프론트엔드 프로그래머이고 인터뷰를 준비하고 있다면 이 기사가 당신을 위한 것입니다. 이 글은 React를 배우고 인터뷰하기 위해 알아야 할 사항에 대한 완벽한 가이드입니다.
【관련주제 추천 : react 인터뷰 질문(2021)】
JavaScript 도구는 느리지만 꾸준히 시장에 뿌리내리고 있으며, React에 대한 수요는 기하급수적으로 늘어나고 있습니다. 앱이나 웹사이트를 개발하는 데 적합한 기술을 선택하는 것이 점점 더 어려워지고 있습니다. 그 중 React는 가장 빠르게 성장하는 Javascript 프레임워크로 간주됩니다.
현재 Github에는 약 1,000명의 기여자가 있습니다. Virtual DOM 및 재사용 가능한 구성 요소와 같은 고유한 기능은 프런트 엔드 개발자의 관심을 끌고 있습니다. MVC(Model-View-Controller)의 "뷰"를 위한 라이브러리일 뿐이지만 Angular, Meteor 및 Vue와 같은 포괄적인 프레임워크에 대한 강력한 도전 과제이기도 합니다. 아래 그림은 인기 있는 JS 프레임워크의 동향을 보여줍니다.
JS 프레임워크의 동향
다음은 면접관이 가장 많이 물어볼 50가지 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. 리액트란?
3. React의 특징은 무엇인가요?
React의 주요 기능은 다음과 같습니다.
4. React의 주요 장점을 나열해 보세요.
React의 주요 장점 중 일부는 다음과 같습니다:
5. React의 한계는 무엇입니까?
React의 한계는 다음과 같습니다.
6.
JSX는 JavaScript XML의 약어입니다. JavaScript 및 HTML과 유사한 템플릿 구문의 표현력을 활용하는 React에서 사용하는 파일입니다. 이렇게 하면 HTML 파일을 매우 쉽게 이해할 수 있습니다. 이 파일은 애플리케이션의 안정성을 높이고 성능을 향상시킵니다. 다음은 JSX의 예입니다.
render(){
return(
<p>
</p><h1> Hello World from Edureka!!</h1>
);
}7. Virtual DOM을 알고 계시나요? 그것이 어떻게 작동하는지 설명하십시오.
Virtual DOM은 처음에는 실제 DOM의 복사본인 경량 JavaScript 개체입니다. 이는 요소, 해당 속성 및 객체로서의 내용과 해당 속성을 포함하는 노드 트리입니다. React의 렌더링 기능은 React 구성 요소에서 노드 트리를 생성합니다. 그런 다음 사용자나 시스템이 완료한 다양한 작업으로 인해 발생하는 데이터 모델의 변경 사항에 응답하여 트리를 업데이트합니다.
Virtual DOM 작업 프로세스는 세 가지 간단한 단계로 구성됩니다.
1. 기본 데이터가 변경될 때마다 전체 UI가 Virtual DOM 설명에서 다시 렌더링됩니다.
2. 그런 다음 이전 DOM 표현과 새 표현 간의 차이를 계산합니다.
3. 계산이 완료되면 실제 DOM은 실제 변경된 내용으로만 업데이트됩니다.
8. 브라우저가 JSX를 읽을 수 없는 이유는 무엇입니까?
브라우저는 JavaScript 개체만 처리할 수 있으며 일반 JavaScript 개체에서 JSX를 읽을 수 없습니다. 따라서 브라우저가 JSX를 읽으려면 먼저 Babel과 같은 JSX 변환기를 사용하여 JSX 파일을 JavaScript 객체로 변환한 다음 브라우저에 전달해야 합니다.
9. React의 ES6 구문은 ES5와 어떻게 다른가요?
다음 구문은 ES5와 ES6의 차이점입니다.
1.require 및 import
// ES5
var React = require('react');
// ES6
import React from 'react';2.export 및 내보내기
// ES5 module.exports = Component; // ES6 export default Component;
3.comComponent 및 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>;
}
}10. React와 Angular의 차이점은 무엇인가요?
| Theme | React | Angular | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1. MVC에서만 보기 | 완전한 MVC|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Server-Side 렌더링 렌더링 렌더링 | 3 -way 데이터 바인딩 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 컴파일 시간 디버깅런타임 디버깅 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
React 组件11. 你怎样理解“在React中，一切都是组件”这句话。 组件是 React 应用 UI 的构建块。这些组件将整个 UI 分成小的独立并可重用的部分。每个组件彼此独立，而不会影响 UI 的其余部分。 12. 怎样解释 React 中 render() 的目的。 每个React组件强制要求必须有一个 render()。它返回一个 React 元素，是原生 DOM 组件的表示。如果需要渲染多个 HTML 元素，则必须将它们组合在一个封闭标记内，例如 13. 如何将两个或多个组件嵌入到一个组件中？ 可以通过以下方式将组件嵌入到一个组件中： class MyComponent extends React.Component{
render(){
return(
<p>
</p><h1>Hello</h1>
<header></header>
);
}
}
class Header extends React.Component{
render(){
return
<h1>Header Component</h1>
};
}
ReactDOM.render(
<mycomponent></mycomponent>, document.getElementById('content')
);로그인 후 복사 14. 什么是 Props? Props 是 React 中属性的简写。它们是只读组件，必须保持纯，即不可变。它们总是在整个应用中从父组件传递到子组件。子组件永远不能将 prop 送回父组件。这有助于维护单向数据流，通常用于呈现动态生成的数据。 15. React中的状态是什么？它是如何使用的？ 状态是 React 组件的核心，是数据的来源，必须尽可能简单。基本上状态是确定组件呈现和行为的对象。与props 不同，它们是可变的，并创建动态和交互式组件。可以通过 16. 区分状态和 props
17. 如何更新组件的状态？ 可以用 class MyComponent extends React.Component {
constructor() {
super();
this.state = {
name: 'Maxx',
id: '101'
}
}
render()
{
setTimeout(()=>{this.setState({name:'Jaeha', id:'222'})},2000)
return (
<p>
</p><h1>Hello {this.state.name}</h1>
<h2>Your Id is {this.state.id}</h2>
);
}
}
ReactDOM.render(
<mycomponent></mycomponent>, document.getElementById('content')
);로그인 후 복사 18. React 中的箭头函数是什么？怎么用？ 箭头函数（=>）是用于编写函数表达式的简短语法。这些函数允许正确绑定组件的上下文，因为在 ES6 中默认下不能使用自动绑定。使用高阶函数时，箭头函数非常有用。 //General way
render() {
return(
<myinput></myinput>
);
}
//With Arrow Function
render() {
return(
<myinput>this.handleOnChange(e) } />
);
}</myinput>로그인 후 복사 19. 区分有状态和无状态组件。
20. React组件生命周期的阶段是什么？ React 组件的生命周期有三个不同的阶段：
21. 详细解释 React 组件的生命周期方法。 一些最重要的生命周期方法是：
22. React中的事件是什么？ 在 React 中，事件是对鼠标悬停、鼠标单击、按键等特定操作的触发反应。处理这些事件类似于处理 DOM 元素中的事件。但是有一些语法差异，如：
事件参数重包含一组特定于事件的属性。每个事件类型都包含自己的属性和行为，只能通过其事件处理程序访问。 23. 如何在React中创建一个事件？ class Display extends React.Component({
show(evt) {
// code
},
render() {
// Render the p with an onClick prop (value is a function)
return (
<p>Click Me!</p>
);
}
});로그인 후 복사 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(
<p>
Name: <input> this.inputDemo = input} />
<button>Click</button>
</p><h2>Hello <span></span> !!!</h2>
);
}
}로그인 후 복사 26. 列出一些应该使用 Refs 的情况。 以下是应该使用 refs 的情况：
27. 如何模块化 React 中的代码？ 可以使用 export 和 import 属性来模块化代码。它们有助于在不同的文件中单独编写组件。 //ChildComponent.jsx
export default class ChildComponent extends React.Component {
render() {
return(
<p>
</p><h1>This is a child component</h1>
);
}
}
//ParentComponent.jsx
import ChildComponent from './childcomponent.js';
class ParentComponent extends React.Component {
render() {
return(
<p>
<app></app>
</p>
);
}
}로그인 후 복사 28. 如何在 React 中创建表单 React 表单类似于 HTML 表单。但是在 React 中，状态包含在组件的 state 属性中，并且只能通过 handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
render() {
return (
로그인 후 복사 29. 你对受控组件和非受控组件了解多少？
30. 什么是高阶组件（HOC）？ 高阶组件是重用组件逻辑的高级方法，是一种源于 React 的组件模式。 HOC 是自定义组件，在它之内包含另一个组件。它们可以接受子组件提供的任何动态，但不会修改或复制其输入组件中的任何行为。你可以认为 HOC 是“纯（Pure）”组件。 31. 你能用HOC做什么？ HOC可用于许多任务，例如：
32. 什么是纯组件？ 纯（Pure） 组件是可以编写的最简单、最快的组件。它们可以替换任何只有 render() 的组件。这些组件增强了代码的简单性和应用的性能。 33. React 中 key 的重要性是什么？ key 用于识别唯一的 Virtual DOM 元素及其驱动 UI 的相应数据。它们通过回收 DOM 中当前所有的元素来帮助 React 优化渲染。这些 key 必须是唯一的数字或字符串，React 只是重新排序元素而不是重新渲染它们。这可以提高应用程序的性能。 React Redux34. MVC框架的主要问题是什么？ 以下是MVC框架的一些主要问题：
35. 解释一下 Flux Flux 是一种强制单向数据流的架构模式。它控制派生数据，并使用具有所有数据权限的中心 store 实现多个组件之间的通信。整个应用中的数据更新必须只能在此处进行。 Flux 为应用提供稳定性并减少运行时的错误。 36. 什么是Redux？ Redux 是当今最热门的前端开发库之一。它是 JavaScript 程序的可预测状态容器，用于整个应用的状态管理。使用 Redux 开发的应用易于测试，可以在不同环境中运行，并显示一致的行为。 37. Redux遵循的三个原则是什么？
38. 你对“单一事实来源”有什么理解？ Redux 使用 “Store” 将程序的整个状态存储在同一个地方。因此所有组件的状态都存储在 Store 中，并且它们从 Store 本身接收更新。单一状态树可以更容易地跟踪随时间的变化，并调试或检查程序。 39. 列出 Redux 的组件。 Redux 由以下组件组成：
40. 数据如何通过 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. Redux에서 Store의 의미는 무엇인가요? Store는 프로그램의 상태를 저장하고 상태에 액세스하고 작업을 예약하고 리스너를 등록하는 메서드를 제공하는 JavaScript 개체입니다. 애플리케이션의 전체 상태/객체 트리는 단일 저장소에 보관됩니다. 따라서 Redux는 매우 간단하고 예측 가능합니다. 미들웨어를 저장소에 전달하여 데이터를 처리하고 저장소 상태를 변경하는 다양한 작업을 기록할 수 있습니다. 모든 작업은 감속기를 통해 새로운 상태를 반환합니다. 44. Redux와 Flux의 차이점은 무엇인가요?
希望这套 React 面试题和答案能帮你准备面试。祝一切顺利！ 相关教程推荐：React视频教程 |
위 내용은 꼭 알아야 할 React 인터뷰 질문 50가지의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
