ホームページ > 記事 > ウェブフロントエンド > 22 の高度な React 面接の質問
22 の高度な React 面接の質問
- 青灯夜游転載
- 2020-08-04 10:00:149519ブラウズ
[関連トピックの推奨事項: 面接の質問に対応する (2021)]
# #Q1: 仮想 DOM とは何ですか?
難易度: ⭐仮想 DOM (VDOM) これは、実際の DOM、プログラミング概念、およびパターンのメモリ表現です。 ReactDOM などのライブラリを介して実際の DOM と同期されます。この同期プロセスはリコンシリエーションと呼ばれます。
仮想 DOM は、特定のテクノロジーというよりはパターンです。出典: https://github.com/sudheerj/reactjs-interview-questions
参考: https://www.javascriptcn.com/ read-65385.html
Q2: クラス コンポーネントと関数コンポーネントの違いは何ですか? #難易度: ⭐⭐
- #クラスコンポーネント
- (
クラスコンポーネント)
コンポーネントが関数またはクラスを使用して宣言されているかどうかに関係なく、コンポーネント自体の- props
- を変更してはなりません。
propsすべての React コンポーネントは純粋な関数である必要があり、独自の- を変更することは禁止されています。
-
Attributes
props- は外部から渡され、状態
- state
はコンポーネントそのものです。状態はコンポーネント内で任意に変更できますコンポーネント プロパティと状態を変更すると、ビューが更新されます。
class Welcome extends React.Component { render() { return ( <h1>Welcome { this.props.name }</h1> ); } } ReactDOM.render(<Welcome name='react' />, document.getElementById('root')); - state
- を変更してはなりません。
-
機能コンポーネントは、単一の props
オブジェクトと React 要素を返しますfunction Welcome (props) { return <h1>Welcome {props.name}</h1> } ReactDOM.render(<Welcome name='react' />, document.getElementById('root'));
関数コンポーネント もちろん、クラスコンポーネントとの違いは、クラスコンポーネントは使用時にインスタンス化する必要があるのに対し、関数コンポーネントは直接関数を実行して結果を返すことができるため、関数コンポーネントのパフォーマンスがクラスコンポーネントよりも高いことです。パフォーマンスを向上させるには、機能コンポーネントを使用してみてください。
#違い
Yes |
ライフサイクルはありますか | No |
| ##状態はありますか | 状態||
はい |
资料来源：https://github.com/Pau1fitz/react-interview 参考资料：https://overreacted.io/how-are-function-components-different-from-classes/ Q3：React中的refs作用是什么？难度：⭐⭐ Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄。 class UnControlledForm 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 指针以便在其他的类函数中使用。 function CustomForm ({handleSubmit}) {
let inputElement
return (
<form onSubmit={() => handleSubmit(inputElement.value)}>
<input
type='text'
ref={(input) => inputElement = input} />
<button type='submit'>Submit</button>
</form>
)
}资料来源：https://github.com/Pau1fitz/react-interview Q4：描述React事件处理。难度：⭐⭐ 为了解决跨浏览器兼容性问题，React中的事件处理程序将传递SyntheticEvent实例，该实例是React跨浏览器本机事件的跨浏览器包装器。这些综合事件具有与您惯用的本机事件相同的界面，除了它们在所有浏览器中的工作方式相同。 有点有趣的是，React实际上并未将事件附加到子节点本身。React将使用单个事件侦听器在顶层侦听所有事件。这对性能有好处，也意味着React在更新DOM时无需担心跟踪事件监听器。 资料来源：https://tylermcginnis.com/react-interview-questions/ Q5：state 和 props有什么区别？难度：⭐⭐ state 和 props都是普通的JavaScript对象。尽管它们两者都具有影响渲染输出的信息，但它们在组件方面的功能不同。即
资料来源： https://github.com/sudheerj/reactjs-interview-questions 参考资料：https://stackoverflow.com/questions/27991366/what-is-the-difference-between-state-and-props-in-react Q6：如何创建refs？难度：⭐⭐ Refs 是使用 React.createRef() 方法创建的，并通过 class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
render() {
return <p ref={this.myRef} />;
}
}和： class UserForm extends Component {
handleSubmit = () => {
console.log("Input Value is: ", this.input.value)
}
render () {
return (
<form onSubmit={this.handleSubmit}>
<input
type='text'
ref={(input) => this.input = input} /> // Access DOM input in handle submit
<button type='submit'>Submit</button>
</form>
)
}
}我们还可以借助闭包在功能组件中使用它。 资料来源： https://github.com/sudheerj/reactjs-interview-questions 参考资料：https://segmentfault.com/a/1190000015113359 Q7：什么是高阶组件？难度：⭐⭐ 高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件。基本上，这是从React的组成性质派生的一种模式，我们称它们为“纯”组件， 因为它们可以接受任何动态提供的子组件，但它们不会修改或复制其输入组件的任何行为。 const EnhancedComponent = higherOrderComponent(WrappedComponent);
资料来源： https://github.com/sudheerj/reactjs-interview-questions 参考资料：https://css-tricks.com/what-are-higher-order-components-in-react/ Q8：constructor中super与props参数一起使用的目的是什么？难度：⭐⭐ 在调用方法之前，子类构造函数无法使用this引用 在ES6中，在子类的 在 使用props： class MyComponent extends React.Component {
constructor(props) {
super(props);
console.log(this.props); // Prints { name: 'sudheer',age: 30 }
}
}不使用props： class MyComponent extends React.Component {
constructor(props) {
super();
console.log(this.props); // Prints undefined
// But Props parameter is still available
console.log(props); // Prints { name: 'sudheer',age: 30 }
}
render() {
// No difference outside constructor
console.log(this.props) // Prints { name: 'sudheer',age: 30 }
}
}上面的代码片段揭示了this.props行为仅在构造函数中有所不同。外部构造函数相同。 资料来源： https://github.com/sudheerj/reactjs-interview-questions https://www.fullstack.cafe/React) Q9：什么是受控组件？难度：⭐⭐⭐ 在HTML当中，像 非受控组件 非受控组件，即组件的状态不受React控制的组件，例如下边这个 import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class Demo1 extends Component {
render() {
return (
<input />
)
}
}
ReactDOM.render(<Demo1/>, document.getElementById('content'))在这个最简单的输入框组件里,我们并没有干涉input中的value展示,即用户输入的内容都会展示在上面。如果我们通过props给组件设置一个初始默认值,defaultValue属性是React内部实现的一个属性,目的类似于input的placeholder属性。 受控组件 同样的，受控组件就是组件的状态受React控制。上面提到过，既然通过设置input的value属性, 无法改变输入框值,那么我们把它和state结合在一起,再绑定onChange事件,实时更新value值就行了。 class Demo1 extends Component {
constructor(props) {
super(props);
this.state = {
value: props.value
}
}
handleChange(e) {
this.setState({
value: e.target.value
})
}
render() {
return (
<input value={this.state.value} onChange={e => this.handleChange(e)}/>
)
}
}资料来源：https://github.com/Pau1fitz/react-interview 参考资料：https://www.php.cn/js-tutorial-382697.html Q10：以下使用React.createElement的等价项是什么？难度：⭐⭐⭐ 问题： const element = (
<h1 className="greeting">
Hello, world!
</h1>
);以下等同于什么使用 答： const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);资料来源：https://github.com/Pau1fitz/react-interview Q11：什么是JSX？难度：⭐⭐⭐ JSX即JavaScript XML。一种在React组件内部构建标签的类XML语法。JSX为react.js开发的一套语法糖，也是react.js的使用基础。React在不使用JSX的情况下一样可以工作，然而使用JSX可以提高组件的可读性，因此推荐使用JSX。 class MyComponent extends React.Component {
render() {
let props = this.props;
return (
<p className="my-component">
<a href={props.url}>{props.name}</a>
</p>
);
}
}优点： 1.允许使用熟悉的语法来定义 HTML 元素树； 2.提供更加语义化且移动的标签； 3.程序结构更容易被直观化； 4.抽象了 React Element 的创建过程； 5.可以随时掌控 HTML 标签以及生成这些标签的代码； 6.是原生的 JavaScript。 资料来源： https://www.codementor.io/blog/5-essential-reactjs-interview-questions-du1084ym1 参考资料：http://facebook.github.io/jsx/ Q12：为什么不直接更新state状态？难度：⭐⭐⭐ 如果进行如下方式更新状态，那么它将不会重新渲染组件。 //Wrong
This.state.message =”Hello world”;而是使用 //Correct
This.setState({message: ‘Hello World’});注意：可以分配状态的唯一位置是构造函数。 资料来源：https://github.com/sudheerj/reactjs-interview-questions Q13：ReactJS生命周期有哪些不同阶段？难度：⭐⭐⭐ React组件的生命周期分为四个不同阶段：
资料来源： https://github.com/sudheerj/reactjs-interview-questions Q14：ReactJS的生命周期方法是什么？难度：⭐⭐⭐
资料来源： https://github.com/sudheerj/reactjs-interview-questions https://www.fullstack.cafe/React) Q15：React中的这三个点（...）是做什么的？难度：⭐⭐⭐ ...在此React（使用JSX）代码中做什么？它叫什么？ <Modal {...this.props} title='Modal heading' animation={false}>扩展传值符号。它是在ES2018中添加的（数组/可迭代对象的传播较早，ES2015）。 例如，如果this.props包含a：1和b：2，则 <Modal {...this.props} title='Modal heading' animation={false}>与以下内容相同： <Modal a={this.props.a} b={this.props.b} title='Modal heading' animation={false}>扩展符号不仅适用于该用例，而且对于创建具有现有对象的大多数（或全部）属性的新对象非常方便-在更新状态时会遇到很多问题，因为您无法修改状态直： this.setState(prevState => {
return {foo: {...prevState.foo, a: "updated"}};
});资料来源： https://stackoverflow.com/questions/31048953/what-do-these-three-dots-in-react-do Q16：使用React Hooks有什么优势？难度：⭐⭐⭐ hooks 是react 16.8 引入的特性，他允许你在不写class的情况下操作state 和react的其他特性。 Hook 是什么 Hook 是什么？ Hook 是一个特殊的函数，它可以让你“钩入” React 的特性。例如，useState 是允许你在 React 函数组件中添加 state 的 Hook。稍后我们将学习其他 Hook。 什么时候我会用 Hook？ 如果你在编写函数组件并意识到需要向其添加一些 state，以前的做法是必须将其它转化为 class。现在你可以在现有的函数组件中使用 Hook。 ReactHooks的优点
资料来源： https://hackernoon.com/react-hooks-usestate-using-the-state-hook-89ec55b84f8c Q17：React中的useState？难度：⭐⭐⭐ 案例： import { useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
return (
<p>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</p>
)
}语法: function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>]; 其中 state 是他的值, setState 是用来设置值的函数, initialState 是初始值 useState-initialState该初始值可以接受任何参数,但是记得当他接受为一个函数时,就变成了 const [count, setCount] = useState(0);
const [count, setCount] = useState(()=>0);
// 这两种初始化方式 是相等的,但是在函数为初始值时会被执行一次
const [count, setCount] = useState(()=>{
console.log('这里只会在初始化的时候执行')
// class 中的 constructor 的操作都可以移植到这里
return 0
});
// 当第一次执行完毕后 就和另一句的代码是相同的效果了useState-setState也许很多人 在使用 class 的 setState 时候,会经常使用他的回调函数, Q18：React中的StrictMode是什么？难度：⭐⭐⭐ React的StrictMode是一种帮助程序组件，可以帮助您编写更好的react组件，您可以使用包装一些组件，
参考资料：http://react.html.cn/docs/strict-mode.html Q19：为什么类方法需要绑定？难度：⭐⭐⭐ 在JavaScript中， class SubmitButton extends React.Component {
constructor(props) {
super(props);
this.state = {
isFormSubmitted: false
};
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit() {
this.setState({
isFormSubmitted: true
});
}
render() {
return (
<button onClick={this.handleSubmit}>Submit</button>
)
}
}资料来源： https://www.toptal.com/react/interview-questions Q20：描述Flux与MVC？难度：⭐⭐⭐⭐ 传统的MVC模式在分离数据（模型），UI（视图）和逻辑（控制器）的关注方面效果很好，但是MVC架构经常遇到两个主要问题：
使用Flux模式，复杂的UI不再受到级联更新的困扰。任何给定的React组件都将能够根据商店提供的数据重建其状态。Flux模式还通过限制对共享数据的直接访问来增强数据完整性。 资料来源： https://www.codementor.io/blog/5-essential-reactjs-interview-questions-du1084ym1 https://www.fullstack.cafe/React) Q21：React context是什么？难度：⭐⭐⭐⭐ React文档官网并未对 官网对于使用 In Some Cases, you want to pass data through the component tree without having to pass the props down manuallys at every level. you can do this directly in React with the powerful "context" API. 简单说就是，当你不想在组件树中通过逐层传递
使用props或者state传递数据，数据自顶下流。
使用 资料来源： https://github.com/WebPredict/react-interview-questions Q22：React Fiber是什么？难度：⭐⭐⭐⭐ React Fiber 并不是所谓的纤程（微线程、协程），而是一种基于浏览器的单线程调度算法，背后的支持 API 是大名鼎鼎的：requestIdleCallback。 Fiberl是一种将 recocilation （递归 diff），拆分成无数个小任务的算法；它随时能够停止，恢复。停止恢复的时机取决于当前的一帧（16ms）内，还有没有足够的时间允许计算。 |
以上が22 の高度な React 面接の質問の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。