网龙面试后多久有回应

For the record, asking someone these questions probably isn’t the best way to get a deep understanding of their experience with React. React Interview Questions just seemed like a better title than Things you may or may not need to know in React but you may find helpful none the less.

作为记录，向某人问这些问题可能不是深入了解其使用React的经验的最佳方法。 React面试问题似乎比您可能需要或可能不需要在React中知道的事物更好，但您可能会发现有所帮助 。

What happens when you call setState?

调用setState会发生什么？

The first thing React will do when setState is called is merge the object you passed into setState into the current state of the component. This will kick off a process called reconciliation. The end goal of reconciliation is to, in the most efficient way possible, update the UI based on this new state.

调用setState时，React要做的第一件事是将您传递给setState的对象合并到组件的当前状态。 这将启动称为对帐的过程。 协调的最终目标是以最有效的方式，根据此新状态更新UI。

To do this, React will construct a new tree of React elements (which you can think of as an object representation of your UI). Once it has this tree, in order to figure out how the UI should change in response to the new state, React will diff this new tree against the previous element tree.

为此，React将构建一个新的React元素树(您可以将其视为UI的对象表示)。 一旦拥有了这棵树，为了弄清楚UI应该如何响应新的状态而变化，React会将这个新的树与先前的元素树进行比较。

By doing this, React will then know the exact changes which occurred, and by knowing exactly what changes occurred, will able to minimize its footprint on the UI by only making updates where absolutely necessary.

通过这样做，React将随后知道发生的确切更改，并且确切地知道发生了什么更改，从而仅通过在绝对必要的情况下进行更新，就可以最大程度地减少其在UI上的占用空间。

What’s the difference between an Element and a Component in React?

React中的Element和Component有什么区别？

Simply put, a React element describes what you want to see on the screen. Not so simply put, a React element is an object representation of some UI.

简而言之，React元素描述了您想要在屏幕上看到的内容。 简而言之，React元素是某些UI的对象表示。

A React component is a function or a class which optionally accepts input and returns a React element (typically via JSX which gets transpiled to a createElement invocation).

React组件是一个函数或类，可以选择接受输入并返回React元素(通常通过JSX转换为createElement调用)。

For more info, check out

有关更多信息，请查看

When would you use a Class Component over a Functional Component?

什么时候在功能组件上使用类 组件 ？

If your component has state or a lifecycle method(s), use a Class component. Otherwise, use a Functional component.

如果您的组件具有状态或生命周期方法，请使用Class组件。 否则，请使用功能组件。

What are refs in React and why are they important?

React中的ref是什么，为什么如此重要？

Refs are an escape hatch which allow you to get direct access to a DOM element or an instance of a component. In order to use them you add a ref attribute to your component whose value is a callback function which will receive the underlying DOM element or the mounted instance of the component as its first argument.

引用是一个转义线，可让您直接访问DOM元素或组件实例。 为了使用它们，您需要向组件添加ref属性，该组件的值是一个回调函数，该函数将接收基础DOM元素或组件的已安装实例作为其第一个参数。

class UnControlledForm extends Component {  handleSubmit = () => {    console.log("Input Value: ", this.input.value)  }  render () {    return (      
    
        
      this.input = input} />        
     Submit      
    
    )  }}

Above notice that our input field has a ref attribute whose value is a function. That function receives the actual DOM element of input which we then put on the instance in order to have access to it inside of the handleSubmit function.

上面请注意，我们的输入字段具有ref属性，其值是一个函数。 该函数接收输入的实际DOM元素，然后将其放入实例，以便可以在handleSubmit函数内部访问它。

It’s often misconstrued that you need to use a class component in order to use refs, but refs can also be used with functional components by leveraging closures in JavaScript.

通常会误解为使用引用需要使用类组件，但是通过利用JavaScript中的闭包，引用也可以与功能组件一起使用。

function CustomForm ({handleSubmit}) {  let inputElement  return (    
    
      handleSubmit(inputElement.value)}>      
      inputElement = input} />      
     Submit    
    
  )}

What are keys in React and why are they important?

React中的键是什么，为什么很重要？

Keys are what help React keep track of what items have changed, been added, or been removed from a list.

关键是什么，React可以帮助您跟踪更改，添加或从列表中删除了哪些项目。

render () {  return (    
    
           {this.state.todoItems.map(({task, uid}) => {        return 
     
{task}
      })}    
    
  )}

It’s important that each key be unique among siblings.

重要的是，每个键在兄弟姐妹之间必须唯一。

We’ve talked a few times already about reconciliation and part of this reconciliation process is performing a diff of a new element tree with the most previous one.

我们已经讨论过几次对帐了，对帐过程的一部分是将新的元素树与最近的元素树进行比较。

Keys make this process more efficient when dealing with lists because React can use the key on a child element to quickly know if an element is new or if it was just moved when comparing trees. And not only do keys make this process more efficient. But without keys, React can’t know which local state corresponds to which item on move. So never neglect keys when mapping.

键可以使处理列表时更加高效，因为React可以在子元素上使用键来快速知道元素是新元素还是比较树时是否刚刚移动了元素。 不仅键使该过程更有效。 但是没有键，React无法知道哪个本地状态对应于移动中的哪个项目。 因此，映射时切勿忽略键。

If you created a React element like Twitter below, what would the component definition of Twitter look like?

如果你创建了一个阵营元素像下面Twitter的 ，会是什么Twitter的样子的组件定义？

    
       {(user) => user === null    ? 
         : 
     }
    

import React, { Component, PropTypes } from 'react'import fetchUser from 'twitter'// fetchUser take in a username returns a promise// which will resolve with that username's data.

class Twitter extends Component {  // finish this}

If you’re not familiar with the render callback pattern, this will look a little strange. In this pattern, a component receives a function as its child.

如果您不熟悉渲染回调模式，这会有些奇怪。 在这种模式下，组件将功能作为其子代。

Take notice of what’s inside the opening and closing <Twitter> tags above. Instead of another component as you’ve probably seen before, the Twitter component’s child is a function. What this means is that in the implementation of the Twitter component, we’ll need to treat props.children as a function.

注意上面的<Twitt er>标签的开头和结尾。 T witter组件的子组件是一个函数，而不是您之前可能看到的其他组件。 这意味着在实现T witter组件时，我们需要将props.ch ildren视为一个函数。

Here’s how I went about solving it.

这就是我解决问题的方法。

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)  }}

Notice that, just as I mentioned above, I treat props.children as a function by invoking it and passing it the user.

注意，正如我上面提到的，我通过调用props.children并将其传递给用户来将其视为一个函数。

What’s great about this pattern is that we’ve decoupled our parent component from our child component. The parent component manages the state and the consumer of the parent component can decide in which way they’d like to apply the arguments they receive from the parent to their UI.

这种模式的优点在于，我们已将父组件与子组件分离。 父组件管理状态，并且父组件的使用者可以决定以哪种方式将从父接收的参数应用于其UI。

To demonstrate this, let’s say in another file we want to render a Profile instead of a Badge, because we’re using the render callback pattern, we can easily swap around the UI without changing our implementation of the parent (Twitter) component.

为了演示这一点，假设在另一个文件中，我们要呈现一个Profile而不是Badge ，因为我们使用的是render回调模式，因此我们可以轻松地在UI周围进行交换，而无需更改父( Twitter )组件的实现。

    
       {(user) => user === null    ? 
         : 
     }
    

What is the difference between a controlled component and an uncontrolled component?

受控组件和非受控组件有什么区别？

A large part of React is this idea of having components control and manage their own state.

React的很大一部分是让组件控制和管理自己的状态的想法。

What happens when we throw native HTML form elements (input, select, textarea, etc) into the mix? Should we have React be the “single source of truth” like we’re used to doing with React? Or should we allow that form data to live in the DOM like we’re used to typically doing with HTML form elements? These questions are at the heart of controlled vs uncontrolled components.

当我们将本地HTML表单元素(输入，选择，文本区域等)放入混合中时会发生什么？ 我们是否应该像过去使用React一样使React成为“真理的单一来源”？ 还是我们应该像通常使用HTML表单元素那样允许表单数据存在于DOM中？ 这些问题是受控组件与非受控组件的核心。

A controlled component is a component where React is in control and is the single source of truth for the form data. As you can see below, username doesn’t live in the DOM but instead lives in our component state. Whenever we want to update username, we call setState as we’re used to.

受控组件是React在控制之下的组件，并且是表单数据的唯一事实来源。 如下所示， 用户名不存在于DOM中，而是生活在我们的组件状态中。 每当我们想要更新username时 ，我们都会像过去那样调用setState 。

class ControlledForm extends Component {  state = {    username: ''  }  updateUsername = (e) => {    this.setState({      username: e.target.value,    })  }  handleSubmit = () => {}  render () {    return (      
    
        
             
     Submit      
    
    )  }}

An uncontrolled component is where your form data is handled by the DOM, instead of inside your React component.

一个不受控制的组件是您的表单数据由DOM处理，而不是在React组件内部。

You use refs to accomplish this.

您可以使用引用来完成此操作。

class UnControlledForm extends Component {  handleSubmit = () => {    console.log("Input Value: ", this.input.value)  }  render () {    return (      
    
        
      this.input = input} />        
     Submit      
    
    )  }}

Though uncontrolled components are typically easier to implement since you just grab the value from the DOM using refs, it’s typically recommended that you favor controlled components over uncontrolled components. The main reasons for this are that controlled components support instant field validation, allow you to conditionally disable/enable buttons, enforce input formats, and are more “the React way”.

尽管不受控制的组件通常更易于实现，因为您只需使用引用从DOM中获取值，但通常建议您比不受控制的组件更喜欢受控制的组件。 造成这种情况的主要原因是受控组件支持即时字段验证，允许您有条件地禁用/启用按钮，强制输入格式以及更具“React方式”。

In which lifecycle event do you make AJAX requests and why?

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

AJAX requests should go in the componentDidMount lifecycle event.

AJAX请求应该进入componentDidMount生命周期事件中。

There are a few reasons for this,

这有几个原因，

• Fiber, the next implementation of React’s reconciliation algorithm, will have the ability to start and stop rendering as needed for performance benefits. One of the trade-offs of this is that componentWillMount, the other lifecycle event where it might make sense to make an AJAX request, will be “non-deterministic”. What this means is that React may start calling componentWillMount at various times whenever it feels like it needs to. This would obviously be a bad formula for AJAX requests.

  Fiber是React调节算法的下一个实现，将能够根据需要启动和停止渲染，以提高性能。 这方面的权衡之一是componentWillMount ，这是另一个可能决定AJAX请求的生命周期事件，将是“不确定的”。 这意味着React可能会在需要时随时开始调用componentWillMount 。 对于AJAX请求，这显然是一个不好的公式。

• You can’t guarantee the AJAX request won’t resolve before the component mounts. If it did, that would mean that you’d be trying to setState on an unmounted component, which not only won’t work, but React will yell at you for. Doing AJAX in componentDidMount will guarantee that there’s a component to update.
  您不能保证在组件安装之前AJAX请求不会得到解决。 如果确实如此，那意味着您将尝试在未安装的组件上设置setState，这不仅不起作用，而且React也会为您大喊大叫。 在componentDidMount中执行AJAX可以确保存在要更新的组件。

What does shouldComponentUpdate do and why is it important?

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

Above we talked about reconciliation and what React does when setState is called. What shouldComponentUpdate does is it’s a lifecycle method that allows us to opt out of this reconciliation process for certain components (and their child components).

上面我们讨论了和解以及调用setState时React的作用。 ComponentUpdate应该做的是一个生命周期方法，使我们可以为某些组件(及其子组件)选择退出此协调过程。

Why would we ever want to do this?

我们为什么要这样做？

As mentioned above, “The end goal of reconciliation is to, in the most efficient way possible, update the UI based on new state.” If we know that a certain section of our UI isn’t going to change, there’s no reason to have React go through the trouble of trying to figure out if it should. By returning false from shouldComponentUpdate, React will assume that the current component, and all its child components, will stay the same as they currently are.

如上所述，“对帐的最终目标是以最有效的方式，根据新状态更新UI。” 如果我们知道UI的某个部分不会改变，那么就没有理由让React费劲去尝试找出是否应该改变。 通过从shouldComponentUpdate返回false，React将假定当前组件及其所有子组件将保持与当前相同。

How do you tell React to build in Production mode and what will that do?

您如何告诉React在生产模式下进行构建，这将做什么？

Typically you’d use Webpack’s DefinePlugin method to set NODE_ENV to production. This will strip out things like propType validation and extra warnings. On top of that, it’s also a good idea to minify your code because React uses Uglify’s dead-code elimination to strip out development only code and comments, which will drastically reduce the size of your bundle.

通常，您将使用Webpack的DefinePlugin方法将NODE_ENV设置为production 。 这将去除诸如propType验证和额外警告之类的内容。 最重要的是，精简代码也是个好主意，因为React使用Uglify的死代码消除功能来去除仅开发代码和注释，这将大大减少程序包的大小。

Why would you use React.Children.map(props.children, () =>; ) instead of props.children.map(() => )

为什么要使用React.Children.map(props.children, () => ;)而不是of props.children.map(() = >)

It’s not guaranteed that props.children will be an array.

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

Take this code for example:

以下面的代码为例：

      
     
Welcome.
    

Inside of Parent if we were to try to map over children using props.children.map it would throw an error because props.children is an object, not an array.

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

React only makes props.children an array if there are more than one child elements, like this:

如果有多个子元素，React只会使props.children成为一个数组，如下所示：

      
     
Welcome.
  
     
props.children will now be an array
    

This is why you want to favor React.Children.map because its implementation takes into account that props.children may be an array or an object.

这就是为什么要支持React.Children.map原因，因为它的实现考虑到props.children可以是数组或对象。

Describe how events are handled in React.

描述如何在React中处理事件。

In order to solve cross browser compatibility issues, your event handlers in React will be passed instances of SyntheticEvent, which is React’s cross-browser wrapper around the browser’s native event. These synthetic events have the same interface as native events you’re used to, except they work identically across all browsers.

为了解决跨浏览器兼容性问题，React中的事件处理程序将传递SyntheticEvent实例，该实例是React跨浏览器本机事件的跨浏览器包装器。 这些合成事件与您惯用的本机事件具有相同的界面，除了它们在所有浏览器中的工作方式相同。

What’s mildly interesting is that React doesn’t actually attach events to the child nodes themselves. React will listen to all events at the top level using a single event listener. This is good for performance and it also means that React doesn’t need to worry about keeping track of event listeners when updating the DOM.

有点有趣的是，React实际上并未将事件附加到子节点本身。 React将使用单个事件侦听器在顶层侦听所有事件。 这对性能有好处，也意味着React在更新DOM时无需担心跟踪事件监听器。

What is the difference between createElement and cloneElement?

createElement和cloneElement有什么区别 ？

createElement is what JSX gets transpiled to and is what React uses to create React Elements (object representations of some UI). cloneElement is used in order to clone an element and pass it new props. They nailed the naming on these two ?.

createElement是JSX编译到的对象，也是React用于创建React Elements(某些UI的对象表示)的对象。 cloneElement用于克隆元素并将新的道具传递给它。 他们将这两个命名命名为？。

What is the second argument that can optionally be passed to setState and what is its purpose?

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

A callback function which will be invoked when setState has finished and the component is re-rendered.

setState完成并重新呈现组件后将调用的回调函数。

Something that’s not spoken of a lot is that setState is asynchronous, which is why it takes in a second callback function. Typically it’s best to use another lifecycle method rather than relying on this callback function, but it’s good to know it exists.

没多说的是setState是异步的，这就是为什么它需要第二个回调函数的原因。 通常，最好是使用其他生命周期方法，而不要依赖此回调函数，但是很高兴知道它的存在。

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

What is wrong with this code?

此代码有什么问题？

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

Nothing is wrong with it ?. It’s rarely used and not well known, but you can also pass a function to setState that receives the previous state and props and returns a new state, just as we’re doing above. And not only is nothing wrong with it, but it’s also actively recommended if you’re setting state based on previous state.

没有错吗？ 它很少使用并且不为人所知，但是您也可以像上面所做的那样 ，将一个函数传递给s etState来接收先前的状态和props并返回一个新的状态。 不仅没有错，而且如果您要基于先前的状态来设置状态，也积极建议使用。

Follow on Twitter ⚛️Originally published at .

在Twitter上关注 最初发布于 。

翻译自:

网龙面试后多久有回应