React2018 면접 질문은 무엇입니까? 면접질문 대응을 위한 표준답변 분석

이 기사에서는 주로 react에 대한 몇 가지 일반적인 인터뷰 질문을 소개합니다. 이제 이 기사를 함께 살펴보겠습니다.

setState를 호출하면 어떻게 되나요?

호출될 때 setState 时，React会做的第一件事情是将传递给 setState 的对象合并到组件的当前状态。这将启动一个称为和解（reconciliation）的过程。和解（reconciliation）的最终目标是以最有效的方式，根据这个新的状态来更新UI。 为此，React将构建一个新的 React 요소 트리(UI의 객체 표현이라고 생각하면 됩니다).

이 트리가 있으면 React는 새 상태에 반응하여 UI가 어떻게 변경되는지 파악하기 위해 이 새 트리를 이전 요소 트리( diff )와 비교합니다.

이를 통해 React는 발생한 정확한 변경 사항을 알게 되며, 변경된 내용을 알면 꼭 필요한 경우에만 업데이트하여 UI의 공간을 최소화할 수 있습니다.

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

간단히 말하면 React 요소는 화면에서 보고 싶은 내용을 설명합니다. 즉, React 요소는 일부 UI의 객체 표현입니다.

A React Component는 입력을 받아 React 요소t를 반환하는 함수 또는 클래스입니다(일반적으로 JSX를 통해 createElement 호출로 변환됨).

자세한 내용은 React를 확인하세요. Elements vs React Components

언제 Functional Component보다 Class Component를 사용해야 할까요?

구성 요소에 상태 또는 수명 주기 메서드가 있는 경우 클래스 구성 요소를 사용하세요. 그렇지 않으면 기능적 구성요소를 사용하세요

React 심판은 무엇이며 왜 중요한가요?

refs는 탈출구와 같아서 DOM 요소나 구성 요소 인스턴스에 직접 액세스할 수 있습니다. 이를 사용하려면 ref 속성을 구성 요소에 추가합니다. 이 값은 기본 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>
    )
  }
}

위에서 입력 필드에 값이 함수인 ref 속성이 있음을 알 수 있습니다. 이 함수는 handleSubmit 함수 내에서 액세스하기 위해 인스턴스에 배치하는 실제 DOM 요소를 수신합니다. ref을 사용하려면 클래스 컴포넌트를 사용해야 한다고 오해하는 경우가 많지만, ref은 JavaScript에서 클로저를 활용하여 사용할 수도 있습니다. 🎜 # 와 함께 기능적 구성 요소와 함께 사용됩니다.

function CustomForm ({handleSubmit}) {  let inputElement  return (    7903c0d16121af01954846672cad07ea handleSubmit(inputElement.value)}>      90adf65a988b0fc262c10923fbcdf698 inputElement = input} />      eb45daf4af391dfc1a2ed2f3e690d49fSubmit65281c5ac262bf6d81768915a4a77ac0
    f5a47148e367a6035fd7a2faa965022e
  )
}

React의 키는 무엇이며 왜 중요한가요?

keys는 React가 목록에서 변경, 추가 또는 제거된 항목을 추적하는 데 도움이 됩니다.

  return (    ff6d136ddc5fdfeffaf53ff6ee95f185
      {this.state.todoItems.map(({task, uid}) => {
        return b80c825a615c52ebe2f730ce1cd3d995{task}bed06894275b65c1ab86501b08a632eb
      })}    929d1f5ca49e04fdcb27f9465b944689
  )
}

Each

keys는 형제 요소 간에 고유합니다. 우리는 조정 프로세스에 대해 몇 번 이야기했으며 이 조정 프로세스의 일부는 새 요소 트리와 이전 요소 트리 간의 차이를 수행하는 것입니다. keys을 사용하면 React가 하위 요소에 keys을 사용하여 트리를 비교할 때 요소가 새 요소인지 이동되었는지 빠르게 알 수 있으므로 목록 작업을 더욱 효율적으로 수행할 수 있습니다.

그리고

keys은 이 프로세스를 더 효율적으로 만들 뿐만 아니라 keys이 없으면 React는 어느 로컬 상태에 해당하는지 알 수 없습니다. 이동 프로젝트. 따라서 매핑할 때 keys을 무시하지 마세요. (자세한 내용을 보시려면 PHP 중국어 홈페이지 React 참고 매뉴얼 열을 참고하세요)

아래 코드를 보세요 : 아래와 같다면 React 요소가 생성되면 의 컴포넌트 정의는 어떻게 될까요?

<Twitter username=&#39;tylermcginnis33&#39;>
  {(user) => user === null
    ? <Loading />
    : <Badge info={user} />}</Twitter>

import React, { Component, PropTypes } from 'react'import fetchUser from 'twitter'// fetchUser接收用户名返回 promise// 当得到 用户的数据的时候 ，返回resolve 状态class Twitter extends Component {  // 在这里写下你的代码}

如果你不熟悉渲染回调模式（render callback pattern），这将看起来有点奇怪。在这种模式中，一个组件接收一个函数作为它的 child。注意上面包含在 标签内的内容。 Twitter 组件的 child 是一个函数，而不是你曾经习以为常的一个组件。 这意味着在实现 Twitter 组件时，我们需要将 props.children 作为一个函数来处理。

以下是我的答案。

import React, { Component, PropTypes } from 'react'import fetchUser from 'twitter'class Twitter extends Component {
  state = {
    user: null,
  }
  static propTypes = {
    username: PropTypes.string.isRequired,
  }
  componentDidMount () {
    fetchUser(this.props.username)
      .then((user) => this.setState({user}))
  }
  render () {    return this.props.children(this.state.user)
  }
}

值得注意的是，正如我上面提到的，我通过调用它并传递给 user 来把 props.children 处理为为一个函数。

这种模式的好处是我们已经将我们的父组件与我们的子组件分离了。父组件管理状态，父组件的消费者可以决定以何种方式将从父级接收的参数应用于他们的 UI。

为了演示这一点，我们假设在另一个文件中，我们要渲染一个 Profile 而不是一个 Badge, ，因为我们使用渲染回调模式，所以我们可以轻松地交换 UI ，而不用改变我们对父（Twitter）组件的实现。

<Twitter username=&#39;tylermcginnis33&#39;>
  {(user) => user === null
    ? <Loading />
    : <Profile info={user} />}</Twitter>

受控组件( controlled component )与不受控制的组件( uncontrolled component )有什么区别？

React 的很大一部分是这样的想法，即组件负责控制和管理自己的状态。

当我们将 native HTML 表单元素（ input, select, textarea 等）投入到组合中时会发生什么？我们是否应该使用 React 作为“单一的真理来源”，就像我们习惯使用React一样？ 或者我们是否允许表单数据存在 DOM 中，就像我们习惯使用HTML表单元素一样？ 这两个问题是受控（controlled） VS 不受控制（uncontrolled）组件的核心。

受控组件是React控制的组件，也是表单数据的唯一真理来源。

如下所示， username 不存在于 DOM 中，而是以我们的组件状态存在。每当我们想要更新 username 时，我们就像以前一样调用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 component )的组件是您的表单数据由 DOM 处理，而不是您的 React 组件。

我们使用 refs 来完成这个。

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获取值，但是通常建议您通过不受控制的组件来支持受控组件。

主要原因是受控组件 支持即时字段验证 ，允许您有条件地禁用/启用按钮，强制输入格式，并且更多的是 『the React way』。

在哪个生命周期事件中你会发出 AJAX 请求，为什么？

AJAX 请求应该在 componentDidMount 生命周期事件中。 有几个原因:

• Fiber，是下一次实施React的和解算法，将有能力根据需要启动和停止渲染，以获得性能优势。其中一个取舍之一是 componentWillMount ，而在其他的生命周期事件中出发 AJAX 请求，将是具有 “非确定性的”。 这意味着 React 可以在需要时感觉到不同的时间开始调用 componentWillMount。这显然是AJAX请求的不好的方式。

-您不能保证在组件挂载之前，AJAX请求将无法 resolve。如果这样做，那意味着你会尝试在一个未挂载的组件上设置 StState，这不仅不会起作用，反而会对你大喊大叫。 在 componentDidMount 中执行 AJAX 将保证至少有一个要更新的组件。

shouldComponentUpdate 应该做什么，为什么它很重要？

上面我们讨论了 reconciliation ，什么是 React 在 setState 被调用时所做的。在生命周期方法 shouldComponentUpdate 中，允许我们选择退出某些组件（和他们的子组件）的 reconciliation 过程。

我们为什么要这样做？

如上所述，“和解（ reconciliation ）的最终目标是以最有效的方式，根据新的状态更新用户界面”。如果我们知道我们的用户界面（UI）的某一部分不会改变，那么没有理由让 React 很麻烦地试图去弄清楚它是否应该渲染。通过从 shouldComponentUpdate 返回 false，React 将假定当前组件及其所有子组件将保持与当前组件相同。

您如何告诉React 构建（build）生产模式，该做什么？

通常，您将使用Webpack的 DefinePlugin 方法将 NODE_ENV 设置为 production。这将剥离像 propType 验证和额外的警告。除此之外，还有一个好主意，可以减少你的代码，因为React使用 Uglify 的 dead-code 来消除开发代码和注释，这将大大减少你的包的大小。

为什么要使用 React.Children.map（props.children，（）=>） 而不是 props.children.map（（）=>）

因为不能保证props.children将是一个数组。

以此代码为例，

<Parent>
  <h1>Welcome.</h1></Parent>

在父组件内部，如果我们尝试使用 props.children.map 映射孩子，则会抛出错误，因为 props.children 是一个对象，而不是一个数组。

如果有多个子元素，React 只会使props.children成为一个数组。就像下面这样：

<Parent>
  <h1>Welcome.</h1>
  <h2>props.children will now be an array</h2></Parent>

这就是为什么你喜欢 React.Children.map ，因为它的实现考虑到 props.children 可能是一个数组或一个对象。

描述事件在React中的处理方式。

为了解决跨浏览器兼容性问题，您的 React 中的事件处理程序将传递 SyntheticEvent 的实例，它是 React 的浏览器本机事件的跨浏览器包装器。

这些 SyntheticEvent 与您习惯的原生事件具有相同的接口，除了它们在所有浏览器中都兼容。有趣的是，React 实际上并没有将事件附加到子节点本身。React 将使用单个事件监听器监听顶层的所有事件。这对于性能是有好处的，这也意味着在更新DOM时，React 不需要担心跟踪事件监听器。

createElement 和 cloneElement 有什么区别？

createElement 是 JSX 被转载到的，是 React 用来创建 React Elements 的内容(一些 UI 的对象表示)cloneElement用于克隆元素并传递新的 props。他们钉住了这两个��的命名。

可以选择性地传递给 setState 的第二个参数是什么，它的目的是什么？

一个回调函数，当setState结束并 re-rendered 该组件时将被调用。一些没有说出来的东西是 setState 是 异步 的，这就是为什么它需要一个第二个回调函数。通常最好使用另一个生命周期方法，而不是依赖这个回调函数，但是很高兴知道它存在。

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

这段代码有什么问题？

this.setState((prevState, props) => {  return {
    streak: prevState.streak + props.count
  }
})

没毛病。但是这种写法很少被使用，并不是众所周知的，就是你也可以传递一个函数给setState，它接收到先前的状态和道具并返回一个新的状态，正如我们在上面所做的那样。它不仅没有什么问题，而且如果您根据以前的状态（state）设置状态，推荐使用这种写法。

이 기사는 여기에서 끝납니다. (자세한 내용을 보려면 PHP 중국어 웹사이트 React 사용자 매뉴얼 열을 참조하세요.) 궁금한 점이 있으면 아래에 메시지를 남겨주세요. .

위 내용은 React2018 면접 질문은 무엇입니까? 면접질문 대응을 위한 표준답변 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!