리액트 인터뷰에서는 어떤 질문을 받게 되나요? 일반적인 React 인터뷰 질문에 대한 자세한 분석 및 답변

이번 글에서는 react에 자주 나오는 질문에 대한 분석을 주로 소개합니다. 질문과 답변이 있으니 여기를 클릭해 궁금증을 해결해 보세요. 지금 이 글을 읽어보세요

1. React에서 Element와 Component의 차이점은 무엇인가요?

공식 웹사이트 문서에서는 Element를 다음과 같이 설명합니다:

Elements are the smallest building blocks of React apps.
An element describes what you want to see on the screen:

공식 웹사이트에서는 Compent를 다음과 같이 설명합니다:

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.
Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called "props") and return React elements describing what should appear on the screen.

즉, React Element는 화면에 보이는 내용을 기술하는 데이터 구조로, UI를 객체로 표현한 것입니다. 일반적인 React Element는 JSX를 사용하여 작성된 선언적 코드 조각으로, createElement 호출의 조합으로 변환됩니다. React Component는 매개변수 입력을 받고 React Element를 반환할 수 있는 함수 또는 클래스입니다.

2, JSX

React는 일반 JavaScript 대신 JSX를 사용합니다. JSX는 XML과 매우 유사한 JavaScript 구문 확장입니다. 반드시 JSX를 사용할 필요는 없지만 다음과 같은 장점이 있습니다.

JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
它是类型安全的，在编译过程中就能发现错误。
使用 JSX 编写模板更加简单快速。

3. setState를 호출한 후에는 어떻게 되나요?

코드에서 setState 함수를 호출한 후 React는 전달된 매개변수 객체를 구성 요소의 현재 상태와 병합한 다음 소위 조정 프로세스(Reconciliation)를 시작합니다. 조정 프로세스가 끝나면 React는 상대적으로 효율적인 방식으로 새로운 상태를 기반으로 React 요소 트리를 구축하고 전체 UI 인터페이스를 다시 렌더링하는 작업을 진행합니다. React가 요소 트리를 얻은 후 React는 자동으로 새 트리와 이전 트리 사이의 노드 차이를 계산한 다음 차이에 따라 인터페이스를 최소화하고 다시 렌더링합니다. 차이 계산 알고리즘에서 React는 어떤 위치가 변경되었는지, 어떻게 변경해야 하는지 비교적 정확하게 알 수 있으므로 전체 다시 렌더링 대신 주문형 업데이트가 보장됩니다.

4. 어떤 상황에서 Functional Component 대신 Class Component를 사용하고 싶나요?

컴포넌트가 내부 상태를 포함해야 하거나 라이프사이클 기능을 사용해야 하는 경우 클래스 컴포넌트를 사용하고, 그렇지 않으면 기능적 컴포넌트를 사용하세요.

5. 라이프 사이클의 어느 단계에서 AJAX 요청을 시작해야 합니까?

다음과 같은 이유로 AJAX 요청을 componentDidMount 함수에 넣어야 합니다.

React 차세대 조정 알고리즘 Fiber가 렌더링을 시작하거나 중지합니다. 컴포넌트WillMount의 트리거 수에 영향을 미치는 애플리케이션 성능을 최적화합니다. componentWillMount 수명주기 함수에 대한 호출 횟수는 불확실해지며 React는 componentWillMount를 여러 번 자주 호출할 수 있습니다. AJAX 요청을 componentWillMount 함수에 넣으면 분명히 여러 번 트리거될 것이므로 당연히 좋은 선택이 아닙니다.

라이프 사이클의 다른 기능에 AJAX 요청을 배치하는 경우 구성 요소가 마운트된 후에만 요청에 응답이 필요하다고 보장할 수 없습니다. 구성 요소가 마운트되기 전에 데이터 요청이 완료되고 구성 요소 상태에 데이터를 추가하기 위해 setState 함수가 호출되면 마운트 해제된 구성 요소에 대해 오류가 보고됩니다. componentDidMount 함수에서 AJAX 요청을 하면 이 문제를 효과적으로 피할 수 있습니다. (자세한 내용은 PHP 중국어 웹사이트 React Reference Manual 열을 참조하세요.)

6. 그리고 통제되지 않은 구성 요소?

React의 핵심 구성 요소 중 하나는 내부 상태를 유지할 수 있는 자율 구성 요소입니다. 하지만 기본 HTML 양식 요소(input, select, textarea 등)를 도입할 때, 모든 데이터를 React 구성 요소에서 호스팅해야 합니까, 아니면 여전히 DOM 요소에 보관해야 합니까? 이 질문에 대한 대답은 제어되는 구성 요소와 제어되지 않는 구성 요소를 정의적으로 분리하는 것입니다. Controlled Component는 React에 의해 제어되는 컴포넌트를 말하며, 모든 폼 데이터가 균일하게 저장됩니다. 즉, React.js에서 <input /> 、<textarea />、<select />과 같은 요소의 값이 React.js에 의해 제어된다면 이는 제어되는 컴포넌트입니다. 예를 들어 다음 코드에서 사용자 이름 변수 값은 DOM 요소에 저장되지 않고 구성 요소 상태 데이터에 저장됩니다. 사용자 이름 변수의 값을 변경해야 할 때마다 setState 함수를 호출하여 수정해야 합니다.

class ControlledForm extends Component {
  state = {
    username: ''
  }
  updateUsername = (e) => {    this.setState({
      username: e.target.value,
    })
  }
  handleSubmit = () => {}
  render () {    return (
      <form onSubmit={this.handleSubmit}>
        <input          type=&#39;text&#39;
          value={this.state.username}
          onChange={this.updateUsername} />
        <button type=&#39;submit&#39;>Submit</button>
      </form>
    )
  }
}

Uncontrolled 구성 요소는 React 구성 요소가 아닌 DOM에 양식 데이터를 저장합니다. refs를 사용하여 DOM 요소를 조작할 수 있습니다.

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

예기치 않게 제어되지 않는 구성 요소는 추가 코드를 추가하지 않고도 DOM에서 직접 데이터를 가져올 수 있습니다. 그러나 실제 개발에서는 제어되지 않는 구성 요소의 사용을 옹호하지 않습니다. 실제 상황에서는 양식 유효성 검사, 버튼 클릭의 선택적인 켜기 또는 끄기, 강제 입력 형식 등 더 많은 기능적 지원을 고려해야 하기 때문입니다. 데이터를 React에 호스팅하면 선언적 방식으로 이러한 기능을 더 잘 완성하는 데 도움이 됩니다. React나 다른 MVVM 프레임워크를 도입하는 원래 이유는 DOM을 직접적으로 조작하는 것에서 우리를 해방시키기 위한 것입니다.

7. shouldComponentUpdate의 역할은 무엇이며 왜 그렇게 중요한가요?

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

8、概述下 React 中的事件处理逻辑

为了解决跨浏览器兼容性问题，React 会将浏览器原生事件（Browser Native Event）封装为合成事件（SyntheticEvent）传入设置的事件处理器中。这里的合成事件提供了与原生事件相同的接口，不过它们屏蔽了底层浏览器的细节差异，保证了行为的一致性。另外有意思的是，React 并没有直接将事件附着到子元素上，而是以单一事件监听器的方式将所有的事件发送到顶层进行处理。这样 React 在更新 DOM 的时候就不需要考虑如何去处理附着在 DOM 上的事件监听器，最终达到优化性能的目的。

9、传入 setState 函数的第二个参数的作用是什么？

该函数会在setState函数调用完成并且组件开始重渲染的时候被调用，我们可以用该函数来监听渲染是否完成：

this.setState(
  { username: 'tylermcginnis33' },  () => console.log('setState has finished and the component has re-rendered.')
)

10、组件的生命周期

组件的生命周期分成三个状态：

Mounting：已插入真实 DOM
Updating：正在被重新渲染
Unmounting：已移出真实 DOM

React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。

componentWillMount()componentDidMount()componentWillUpdate(object nextProps, object nextState)componentDidUpdate(object prevProps, object prevState)componentWillUnmount()

此外，React 还提供两种特殊状态的处理函数。

componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用

本篇文章到这就结束了（想看更多就到PHP中文网React使用手册栏目中学习），有问题的可以在下方留言提问。

위 내용은 리액트 인터뷰에서는 어떤 질문을 받게 되나요? 일반적인 React 인터뷰 질문에 대한 자세한 분석 및 답변의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!