🎆

Reactjs-Interview-Questions(翻訳)1〜50

2023/01/16に公開約43,300字

はじめに

本記事は、reactjs-interview-questionsを日本語に翻訳することを目的とします。そのため、筆者自身の意見や知見は扱いません。

reactjs-interview-questionsとは

技術面接などでReactに関して聞かれるであろう質問とその回答がまとめられています。「Reactとは?」というざっくりした質問だけでなく「Reactのデータフローについて」などコアな質問が用意されているため、転職活動をしていない方でも学びになる点が多くあります。

全部で333問の質問とその回答が用意されています。この記事では1〜50の問題を翻訳します。(文字数制限の都合上分割しています🙇‍♂️)翻訳が不慣れな点がありましても暖かい目で見ていただけると幸いです<_>

https://github.com/sudheerj/reactjs-interview-questions

1. What is React?

React is an open-source front-end JavaScript library that is used for building user interfaces, especially for single-page applications. It is used for handling view layer for web and mobile apps. React was created by Jordan Walke, a software engineer working for Facebook. React was first deployed on Facebook's News Feed in 2011 and on Instagram in 2012.

Reactは、オープンソースのフロントエンドJavaScriptライブラリで、特にSPA(single page application)のユーザーインターフェイスを構築することができ、WebアプリケーションやMobileアプリケーションのViewレイヤーを処理するために使用されます。Reactは、Facebookに勤務するソフトウェアエンジニアのJordan Walke氏によって作成されました。また、Reactは2011年にFacebookのニュースフィードに、2012年にはInstagramにデプロイされました。

2. What are the major features of React?

The major features of React are:

  • Uses JSX syntax, a syntax extension of JS that allows developers to write HTML in their JS code.
  • It uses VirtualDOM instead of RealDOM considering that RealDOM manipulations are expensive.
  • Supports server-side rendering.
  • Follows Unidirectional data flow or data binding.
  • Uses reusable/composable UI components to develop the view.

Reactの主な特徴は以下の通りです。

  • JSX構文を採用していること
    • JSXとはJSの構文拡張でJSのコード内にHTMLを記述できるようにしたもの
  • RealDOMではなくVirtualDOMを採用していること
  • SSRをサポートしていること
  • 一方向のデータフロー、データバインディングになっていること
  • Viewの開発のために、再利用可能なUIコンポーネントを使っていること

3. What is JSX?

JSX is a XML-like syntax extension to ECMAScript (the acronym stands for JavaScript XML). Basically it just provides syntactic sugar for the React.createElement() function, giving us expressiveness of JavaScript along with HTML like template syntax.
In the example below text inside <h1> tag is returned as JavaScript function to the render function.

JSXはECMAScriptのXMLライクな構文拡張です。基本的には、React.CreateElement関数のシンタックスシュガーで、JSの表現力とHTMLのテンプレート構文を扱うことができます。
以下の例では、<h1>タグ内のテキストが JSの関数としてrender関数に返されています。

export default function App() {
  return (
    <div>
      <h1>{"Welcome to React world!"}</h1>
    </div>
  );
}

4. What is the difference between Element and Component?

An Element is a plain object describing what you want to appear on the screen in terms of the DOM nodes or other components. Elements can contain other Elements in their props. Creating a React element is cheap. Once an element is created, it is never mutated.
The object representation of React Element would be as follows:

Elementは、画面に表示させたいものをDOMノードや他のコンポーネントで記述したプレーンなオブジェクトです。propsには他のElementを含むことができます。React Elementを作成するのは簡単ですが、一度作成されたら決して変更することはできません。
React Elementオブジェクトの表現は以下のようになります。

const element = React.createElement("div", { id: "login-btn" }, "Login");

// The above React.createElement() function returns an object:
{
  type: 'div',
  props: {
    children: 'Login',
    id: 'login-btn'
  }
}

// And finally it renders to the DOM using ReactDOM.render():
<div id="login-btn">Login</div>

Whereas a component can be declared in several different ways. It can be a class with a render() method or it can be defined as a function. In either case, it takes props as an input, and returns a JSX tree as the output:

一方でComponentはいくつかの異なる方法で宣言することができます。クラスのrenderメソッドや、関数で定義されたりします。どちらの場合も、propsを受け取りJSX treeを返します。

const Button = ({ onLogin }) => (
  <div id={"login-btn"} onClick={onLogin}>
    Login
  </div>
);

// Then JSX gets transpiled to a React.createElement() function tree:
const Button = ({ onLogin }) =>
  React.createElement(
    "div",
    { id: "login-btn", onClick: onLogin },
    "Login"
  );

5. How to create components in React?

There are two possible ways to create a component.
Function Components: This is the simplest way to create a component. Those are pure JavaScript functions that accept props object as the first parameter and return React elements:

Componentを作成するには、二つの方法があります。
関数コンポーネント。これは、コンポーネントを作成する上で最も簡単な方法です。純粋なJS関数としてpropsを受け取り、React Elementを返します。

function Greeting({ message }) {
  return <h1>{`Hello, ${message}`}</h1>;
}

Class Components: You can also use ES6 class to define a component. The above function component can be written as:

クラスコンポーネント。ES6のクラスを使用することもできます。

class Greeting extends React.Component {
  render() {
    return <h1>{`Hello, ${this.props.message}`}</h1>;
  }
}

6. When to use a Class Component over a Function Component?

If the component needs state or lifecycle methods then use class component otherwise use function component.
However, from React 16.8 with the addition of Hooks, you could use state , lifecycle methods and other features that were only available in class component right in your function component. So, it is always recommended to use Function components, unless you need a React functionality whose Function component equivalent is not present yet, like Error Boundaries.

もしコンポーネントにライフサイクルメソッドが必要な場合は、Classコンポーネントを使用します。
しかし、React16.8からHooksが追加されClassコンポーネントでしかできなかったライフサイクルメソッドの機能が関数コンポーネントでもできるようになりました。そのため、Error Boundariesのような関数コンポーネントと同等の機能が存在しない場合を除いて関数コンポーネントを使うことが推奨されています。

7. What are Pure Components?

React.PureComponent is exactly the same as React.Component except that it handles the shouldComponentUpdate() method for you. When props or state changes, PureComponent will do a shallow comparison on both props and state. Component on the other hand won't compare current props and state to next out of the box. Thus, the component will re-render by default whenever shouldComponentUpdate is called. In functional componenets we use React.memo() API. React.memo() is a higher-order component. It takes a React component as its first argument and returns a special type of React component that allows the renderer to render the component while memoizing the output. Therefore, if the component’s props are shallowly equal, the React.memo() component will bail out the updates.

React.PureComponentは、shouldComponentUpdateメソッドを処理すること以外はReact.Componentと全く同じです。propsやstateが変更されると、PureComponentはpropsとstateの両方についてshallow比較を行います。一方、Componentは、現在のpropsとstateをshallow比較することはありません。したがって、shouldComponentUpdateが呼ばれるたびに、コンポーネントはデフォルトで再レンダリングされます。関数コンポーネントでは、React.memo() APIを使用します。これは、高階コンポーネントでありReactコンポーネントを第一引数で受け取り、出力をメモしながらレンダリングできるようにする特殊なReactコンポーネントを返します。これによって、propsがshollow比較して正の場合、更新を避けてくれます。

8. What is state in React?

State of a component is an object that holds some information that may change over the lifetime of the component. We should always try to make our state as simple as possible and minimize the number of stateful components.
Let's create a user component with message state,

コンポーネントのStateはコンポーネントのライフサイクルに渡って変化する情報を保有するオブジェクトのことです。私たちは常にこのStateを簡潔に保ち、StateFulなコンポーネントを最小限にするよう努めなくてはなりません。

import React, { useState } from 'react';

function User() {
  const [message, setMessage] = useState("Welcome to React world");

  return (
      <div>
        <h1>{this.message}</h1>
      </div>
  );
}

スクリーンショット 2023-01-08 15.24.06.png

State is similar to props, but it is private and fully controlled by the component ,i.e., it is not accessible to any other component till the owner component decides to pass it.

Stateはpropsと似ていますが、プライベートでコンポーネントによって完全に制御されている点において異なります。つまり、管理しているコンポーネントが他のコンポーネントに渡すことを決めるまで他からアクセスすることはできません。

9. What are props in React?

Props are inputs to components. They are single values or objects containing a set of values that are passed to components on creation using a naming convention similar to HTML-tag attributes. They are data passed down from a parent component to a child component.
The primary purpose of props in React is to provide following component functionality:

  1. Pass custom data to your component.
  2. Trigger state changes.
  3. Use via this.props.reactProp inside component's render() method.

For example, let us create an element with reactProp property:

Propsはコンポーネントへの入力のことです。単一の値や複数の値を含むオブジェクトでありHTMLタグの属性ににた命名規則を使ってコンポーネントに渡されます。また、これらは親コンポーネントからこコンポーネントに渡されるデータであります。propsの主な役割は以下のようにあります。

  1. カスタムデータをコンポーネントに渡す
  2. stateを更新する
  3. コンポーネントのrenderメソッドでthis.props.reactPropを介して使用する

reactPropプロパティを持つ要素を作ってみましょう。

<Element reactProp={"1"} />

This reactProp (or whatever you came up with) name then becomes a property attached to React's native props object which originally already exists on all components created using React library.

このreactPropという名前は、Reactのnative props objectにつけられるもので、Reactを使用して作成されたコンポーネントに元々存在するものです。

10. What is the difference between state and props?

Both props and state are plain JavaScript objects. While both of them hold information that influences the output of render, they are different in their functionality with respect to component. Props get passed to the component similar to function parameters whereas state is managed within the component similar to variables declared within a function.

propsもstateもどちらもプレーンなJSオブジェクトです。どちらもrenderの出力に影響を与える情報を持っていますが、コンポーネントに対する機能は異なります。propsは関数のパラメータと同じようにコンポーネントに渡されるのに対して、stateは関数内で宣言された変数と同じようにコンポーネント内で管理されます。

11. Why should we not update the state directly?

If you try to update the state directly then it won't re-render the component.
Instead use setState() method. It schedules an update to a component's state object. When state changes, the component responds by re-rendering.

もし直接stateを更新した場合、再レンダリングは発生しません。
代わりにsetStateメソッドを使います。これはコンポーネントのstateの更新を予約して、stateが更新されるとコンポーネントは再レンダリングによって反応します。

//Wrong
this.state.message = "Hello world";

//Correct
this.setState({ message: "Hello World" });

12. What is the purpose of callback function as an argument of setState()?

The callback function is invoked when setState finished and the component gets rendered. Since setState() is asynchronous the callback function is used for any post action.

setStateが終了し、コンポーネントがレンダリングされると、コールバック関数が呼び出されます。setState関数は非同期なので、コールバック関数はあらゆるpost actionに使用されます。

setState({ name: "John" }, () =>
  console.log("The name has updated and component re-rendered")
);

13. What is the difference between HTML and React event handling?

Below are some of the main differences between HTML and React event handling,

以下はHTMLとReactのイベントハンドリングの違いです。

// In HTML, the event name usually represents in lowercase as a convention:
<button onclick="activateLasers()"></button>

// Whereas in React it follows camelCase convention:
<button onClick={activateLasers}>
// In HTML, you can return false to prevent default behavior:
<a
  href="#"
  onclick='console.log("The link was clicked."); return false;'
/>

// Whereas in React you must call preventDefault() explicitly:
function handleClick(event) {
  event.preventDefault();
  console.log("The link was clicked.");
}

In HTML, you need to invoke the function by appending () Whereas in react you should not append () with the function name. (refer "activateLasers" function in the first point for example)

HTMLでは関数を呼び出す際に()で閉じる必要があるが、Reactでは関数に()をつけてはいけない。

14. How to bind methods or event handlers in JSX callbacks?

Binding in Constructor: In JavaScript classes, the methods are not bound by default. The same thing applies for React event handlers defined as class methods. Normally we bind them in constructor.

コンストラクタでのbinding。JSのクラスではメソッドがbindされていません。これはClassで定義されたReactのイベントハンドラも同じです。

class Foo extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    console.log("Click happened");
  }
  render() {
    return <button onClick={this.handleClick}>Click Me</button>;
  }
}

Public class fields syntax: If you don't like to use bind approach then public class fields syntax can be used to correctly bind callbacks.

Publicクラスフィールド構文。bindを使いたくない際には、この構文を使用して正しくコールバックをbindすることができます。

handleClick = () => {
  console.log("this is:", this);
};

Arrow functions in callbacks: You can use arrow functions directly in the callbacks.

コールバック内のアロー関数。アロー関数をコールバック内で直接使うことができます。

handleClick() {
    console.log('Click happened');
}
render() {
    return <button onClick={() => this.handleClick()}>Click Me</button>;
}

15. How to pass a parameter to an event handler or callback?

You can use an arrow function to wrap around an event handler and pass parameters:

アロー関数イベントハンドラで囲み、パラメータを渡すことができます。

<button onClick={() => this.handleClick(id)} />

This is an equivalent to calling .bind:

.bindを使うとこのようになります。

<button onClick={this.handleClick.bind(this, id)} />

Apart from these two approaches, you can also pass arguments to a function which is defined as arrow function

これら二つの他にもアロー関数として定義された関数に引数を渡すこともできます。

<button onClick={this.handleClick(id)} />;
handleClick = (id) => () => {
  console.log("Hello, your ticket number is", id);
};

16. What are synthetic events in React?

SyntheticEvent is a cross-browser wrapper around the browser's native event. Its API is same as the browser's native event, including stopPropagation() and preventDefault(), except the events work identically across all browsers.

SyntheticEventとは、ブラウザのネイティブイベントをクロスブラウザで包むものです。そのAPIはstopPropagationやpreventDefaultと同じですが、イベントが全てブラウザで同じように動作する点が異なります。

https://ja.reactjs.org/docs/events.html

17. What are inline conditional expressions?

You can use either if statements or ternary expressions which are available from JS to conditionally render expressions. Apart from these approaches, you can also embed any expressions in JSX by wrapping them in curly braces and then followed by JS logical operator &&.

条件付きで式を表示するには、JSのif文や三項演算子を使うことができます。また、中括弧で囲み論理演算子&&を続けることで任意の式をJSXに埋め込むことができます。

<h1>Hello!</h1>;
{
  messages.length > 0 && !isLogin ? (
    <h2>You have {messages.length} unread messages.</h2>
  ) : (
    <h2>You don't have unread messages.</h2>
  );
}

18. What is "key" prop and what is the benefit of using it in arrays of elements?

A key is a special string attribute you should include when creating arrays of elements. Key prop helps React identify which items have changed, are added, or are removed.

keyは要素の配列を作成する際に含めるべき特別な文字列です。key propはreactがどの項目が変更されたのか、追加されたのか、削除されたのかを識別するのに役に立ちます。

// Most often we use ID from our data as key:
const todoItems = todos.map((todo) => <li key={todo.id}>{todo.text}</li>);

// When you don't have stable IDs for rendered items, you may use the item index as a key as a last resort:
const todoItems = todos.map((todo, index) => (
  <li key={index}>{todo.text}</li>
));

Using indexes for keys is not recommended if the order of items may change. This can negatively impact performance and may cause issues with component state.
If you extract list item as separate component then apply keys on list component instead of li tag.
There will be a warning message in the console if the key prop is not present on list items.

keyにindexを使用することは、項目の順番が変わることを考慮して推奨されていません。これはパフォーマンスに影響を及ぼし、コンポーネンtののstateに問題を起こす可能性があります。
list itemを別のコンポーネントとして抽出する場合は、<li>タグの代わりにリストコンポーネントにキーを適用します。
list itemにkey propが存在しない場合、コンソールに警告メッセージが表示されます。

19. What is the use of refs?

The ref is used to return a reference to the element. They should be avoided in most cases, however, they can be useful when you need a direct access to the DOM element or an instance of a component.

refは要素への参照を返すために使用されます。ほとんどの場合はrefの使用は避けるべきです。しかし、DOM要素やコンポーネントのインスタンスに直接アクセスする場合には便利です。

20. How to create refs?

This is a recently added approach. Refs are created using React.createRef() method and attached to React elements via the ref attribute. In order to use refs throughout the component, just assign the ref to the instance property within constructor.

これは最近追加された方法です。これは最近追加された手法です。React.createRef()メソッドでRefを作成し、ref属性でReact要素にアタッチします。コンポーネント全体でRefを使用するには、コンストラクタ内のインスタンスプロパティにrefを代入するだけです。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

You can also use ref callbacks approach regardless of React version. For example, the search bar component's input element is accessed as follows,

Reactのバージョンに関係なく、refのコールバック方式を使うことができます。

class SearchBar extends Component {
  constructor(props) {
    super(props);
    this.txtSearch = null;
    this.state = { term: "" };
    this.setInputSearchRef = (e) => {
      this.txtSearch = e;
    };
  }
  onInputChange(event) {
    this.setState({ term: this.txtSearch.value });
  }
  render() {
    return (
      <input
        value={this.state.term}
        onChange={this.onInputChange.bind(this)}
        ref={this.setInputSearchRef}
      />
    );
  }
}

21. What are forward refs?

Ref forwarding is a feature that lets some components take a ref they receive, and pass it further down to a child.

Refのforwardingはあるコンポーネントが受け取ったrefを子コンポーネントに渡すことができる機能です。

const ButtonElement = React.forwardRef((props, ref) => (
  <button ref={ref} className="CustomButton">
    {props.children}
  </button>
));

// Create ref to the DOM button:
const ref = React.createRef();
<ButtonElement ref={ref}>{"Forward Ref"}</ButtonElement>;

22. Which is preferred option with in callback refs and findDOMNode()?

It is preferred to use callback refs over findDOMNode() API. Because findDOMNode() prevents certain improvements in React in the future.

findDOMNode() APIよりもcallback refsを使用することが望ましいです。なぜなら、findDOMNode()は将来的なReactの改良を妨げるからです。

// The legacy approach of using findDOMNode:
class MyComponent extends Component {
  componentDidMount() {
    findDOMNode(this).scrollIntoView();
  }

  render() {
    return <div />;
  }
}
// The recommended approach is:
class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.node = createRef();
  }
  componentDidMount() {
    this.node.current.scrollIntoView();
  }

  render() {
    return <div ref={this.node} />;
  }
}

23. Why are String Refs legacy?

If you worked with React before, you might be familiar with an older API where the ref attribute is a string, like ref={'textInput'}, and the DOM node is accessed as this.refs.textInput. We advise against it because string refs have below issues, and are considered legacy. String refs were removed in React v16.

Reactを使ったことがある人なら、ref属性がref={'textInput'}のような文字列で、DOMノードがthis.refs.textInputとしてアクセスできる古いAPIに慣れているかもしれません。しかし、文字列のrefには以下のような問題があり、React16以降で削除されました。

  1. They force React to keep track of currently executing component. This is problematic because it makes react module stateful, and thus causes weird errors when react module is duplicated in the bundle.
  2. They are not composable — if a library puts a ref on the passed child, the user can't put another ref on it. Callback refs are perfectly composable.
  3. They don't work with static analysis like Flow. Flow can't guess the magic that framework does to make the string ref appear on this.refs, as well as its type (which could be different). Callback refs are friendlier to static analysis.
  4. It doesn't work as most people would expect with the "render callback" pattern (e.g. )
  1. これは、Reactに現在実行中のコンポーネントを追跡させるものです。Reactがstateフルでいるためにバンドル内でReactモジュールが複製されたときに奇妙なエラーを起こす可能性があります。
  2. ライブラリが渡されたrefをこコンポーネントに渡すと、別のrefを扱うことができなくなる。それに対して、callbackのrefは完全に互換性があります。
  3. Flowのような静的解析ツールでうまく動きません。コールバックのrefは、静的解析と相性がいいです。
  4. render callbackにて期待挙動になりません。
class MyComponent extends Component {
  renderRow = (index) => {
    // This won't work. Ref will get attached to DataTable rather than MyComponent:
    return <input ref={"input-" + index} />;

    // This would work though! Callback refs are awesome.
    return <input ref={(input) => (this["input-" + index] = input)} />;
  };

  render() {
    return (
      <DataTable data={this.props.data} renderRow={this.renderRow} />
    );
  }
}

24. What is Virtual DOM?

The Virtual DOM (VDOM) is an in-memory representation of Real DOM. The representation of a UI is kept in memory and synced with the "real" DOM. It's a step that happens between the render function being called and the displaying of elements on the screen. This entire process is called reconciliation.

Virtual DOMはReal DOMをメモリ内に表現したものです。UIの表現はメモリ内に保持され、Real DOMと同期されます。これは、render関数が呼び出されてから画面に要素が表示されるまでの間に発生するステップです。このプロセス全体を「reconciliation」と呼びます。

25. How Virtual DOM works?

Whenever any underlying data changes, the entire UI is re-rendered in Virtual DOM representation.

基礎となるデータが変更されるたびに、UI全体がVirtual DOMで再レンダリングされます。
image.png

Then the difference between the previous DOM representation and the new one is calculated.

そして、以前のDOMと新しいDOMの差分を算出します。
image.png

Once the calculations are done, the real DOM will be updated with only the things that have actually changed.

計算が終わると、Real DOMは実際に変更されたものだけが更新されます。
image.png

26. What is the difference between Shadow DOM and Virtual DOM?

The Shadow DOM is a browser technology designed primarily for scoping variables and CSS in web components. The Virtual DOM is a concept implemented by libraries in JavaScript on top of browser APIs.

Shadow DOMはwebコンポーネントの変数とCSSをスコープするためのブラウザ技術です。一方、Virtual DOMはブラウザのAPIの上にJSのライブラリで実装された概念です。

27. What is React Fiber?

Fiber is the new reconciliation engine or reimplementation of core algorithm in React v16. The goal of React Fiber is to increase its suitability for areas like animation, layout, gestures, ability to pause, abort, or reuse work and assign priority to different types of updates; and new concurrency primitives.

FiberはReact16からの新しいreconclitationエンジン、またはコアアルゴリズムの再実装をしたものです。React Fiberの目標は、アニメーション、レイアウト、ジェスチャー、作業の一時停止、中断、再利用、異なる種類の更新に優先順位を割り当てる機能、新しい並行処理プリミティブといった分野への適性を高めることです。

https://github.com/acdlite/react-fiber-architecture

28. What is the main goal of React Fiber?

The goal of React Fiber is to increase its suitability for areas like animation, layout, and gestures. Its headline feature is incremental rendering: the ability to split rendering work into chunks and spread it out over multiple frames.

  • Ability to split interruptible work in chunks.
  • Ability to prioritize, rebase and reuse work in progress.
  • Ability to yield back and forth between parents and children to support layout in React.
  • Ability to return multiple elements from render().
  • Better support for error boundaries.

React Fiberの目的は、アニメーション、レイアウト、ジェスチャーなどの分野での適性を高めることです。主要な機能はincremental renderingで、レンダリング作業をチャンクに分割し、複数のフレームに分散させることができる機能です。

  • 中断可能な作業をチャンクで分割する
  • 進行中の作業の優先順位付け、rebase、再利用
  • Reactのレイアウトをサポートするために親子での行き来をする
  • renderから複数の要素を返す
  • error boundariesのサポート強化

29. What are controlled components?

A component that controls the input elements within the forms on subsequent user input is called Controlled Component, i.e, every state mutation will have an associated handler function.

form内の入力要素をその後のユーザの入力によって制御するコンポーネントをControlled Componentと呼びます。すなわち、全てのstate更新がハンドラ関数に結びついています。

handleChange(event) {
  this.setState({value: event.target.value.toUpperCase()})
}

30. What are uncontrolled components?

The Uncontrolled Components are the ones that store their own state internally, and you query the DOM using a ref to find its current value when you need it. This is a bit more like traditional HTML.

Uncontrolled Componentは、内部で自身の状態を保存しているもので、必要なときにrefを使用してDOMに問い合わせ、値にアクセスすることができるものです。これは、従来のHTMLに少し似ています。

class UserProfile extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.input = React.createRef();
  }

  handleSubmit(event) {
    alert("A name was submitted: " + this.input.current.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          {"Name:"}
          <input type="text" ref={this.input} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

In most cases, it's recommend to use controlled components to implement forms. In a controlled component, form data is handled by a React component. The alternative is uncontrolled components, where form data is handled by the DOM itself.

多くの場合、フォームの実装にはcontrolled componentsを使用することが推奨されます。controlled componentでは、Reactコンポーネントによってフォームのdataが処理される一方でuncontrolled componentsではDOM自身によって処理される違いがあります。

31. What is the difference between createElement and cloneElement?

JSX elements will be transpiled to React.createElement() functions to create React elements which are going to be used for the object representation of UI. Whereas cloneElement is used to clone an element and pass it new props.

JSX要素はReact.createElement()関数にトランスパイルされ、UIのオブジェクト表現に使われるReact要素が作成されます。一方、cloneElementは要素のクローンを作成し、新しいpropを渡すために使用されます。

32. What is Lifting State Up in React?

When several components need to share the same changing data then it is recommended to lift the shared state up to their closest common ancestor. That means if two child components share the same data from its parent, then move the state to parent instead of maintaining local state in both of the child components.

複数のコンポーネントが同じ変更データを共有する必要がある場合、共有するstateを最も近い共通の祖先まで持ち上げることが推奨されます。つまり、2つの子コンポーネントが親コンポーネントから同じデータを共有している場合、両方の子コンポーネントでローカルstateを維持するのではなく、親コンポーネントにstateを移動させるということです。

33. What are the different phases of component lifecycle?

The component lifecycle has three distinct lifecycle phases:

  1. Mounting: The component is ready to mount in the browser DOM. This phase covers initialization from constructor(), getDerivedStateFromProps(), render(), and componentDidMount() lifecycle methods.
  2. Updating: In this phase, the component gets updated in two ways, sending the new props and updating the state either from setState() or forceUpdate(). This phase covers getDerivedStateFromProps(), shouldComponentUpdate(), render(), getSnapshotBeforeUpdate() and componentDidUpdate() lifecycle methods.
  3. Unmounting: In this last phase, the component is not needed and gets unmounted from the browser DOM. This phase includes componentWillUnmount() lifecycle method.

コンポーネントのライフサイクルには、3つの明確な段階があります。

  1. マウント。コンポーネントはブラウザDOMにマウントする準備ができています。このフェーズにはconstructor(), getDerivedStateFromProps(), render(), componentDidMount()といったライフサイクルメソッドによる初期化が含まれます。
  2. 更新。このフェーズでは、コンポーネントは2つの方法で更新されます。新しいpropsの送信と、setState() または forceUpdate() による状態の更新があります。このフェーズには、getDerivedStateFromProps(), shouldComponentUpdate(), render(), getSnapshotBeforeUpdate(), componentDidUpdate()といったライフサイクルメソッドが含まれます。
  3. アンマウント。この最後のフェーズでは、コンポーネントは不要になり、ブラウザDOMからアンマウントされます。このフェーズには、componentWillUnmount()ライフサイクルメソッドが含まれます。

It's worth mentioning that React internally has a concept of phases when applying changes to the DOM. They are separated as follows

  1. Render The component will render without any side effects. This applies to Pure components and in this phase, React can pause, abort, or restart the render.
  2. Pre-commit Before the component actually applies the changes to the DOM, there is a moment that allows React to read from the DOM through the getSnapshotBeforeUpdate().
  3. Commit React works with the DOM and executes the final lifecycles respectively componentDidMount() for mounting, componentDidUpdate() for updating, and componentWillUnmount() for unmounting.

なお、Reactは内部的にDOMに変更を加える際にフェーズの概念を持っています。それらは以下のように分けられています。

  1. レンダリング。副作用なしにコンポーネントがレンダリングされます。これはPureComponentに適用され、このフェーズでは、Reactはレンダリングを一時停止、中断、または再開することができます。
  2. プレコミット。コンポーネントが実際に DOM に変更を適用する前に、getSnapshotBeforeUpdate()を通してReactがDOMから読み込めるようにする瞬間があります。
  3. コミット。ReactがDOMと連携し、マウントのためのcomponentDidMount()、アップデートのためのcomponentDidUpdate()、アンマウントのためのcomponentWillUnmount()をそれぞれを実行します。

React 16.3+ Phases
image.png
Before React 16.3
image.png

34. What are the lifecycle methods of React?

Before React 16.3

  • componentWillMount: Executed before rendering and is used for App level configuration in your root component.
  • componentDidMount: Executed after first rendering and here all AJAX requests, DOM or state updates, and set up event listeners should occur.
  • componentWillReceiveProps: Executed when particular prop updates to trigger state transitions.
  • shouldComponentUpdate: Determines if the component will be updated or not. By default it returns true. If you are sure that the component doesn't need to render after state or props are updated, you can return false value. It is a great place to improve performance as it allows you to prevent a re-render if component receives new prop.
  • componentWillUpdate: Executed before re-rendering the component when there are props & state changes confirmed by shouldComponentUpdate() which returns true.
  • componentDidUpdate: Mostly it is used to update the DOM in response to prop or state changes.
  • componentWillUnmount: It will be used to cancel any outgoing network requests, or remove all event listeners associated with the component.
  • componentWillMount: レンダリングの前に実行され、ルートコンポーネントのAppレベルの設定に使用されます。
  • componentDidMount: 最初のレンダリングの後に実行されます。最初のレンダリングの後に実行され、ここですべてのAJAXリクエスト、DOMまたは状態の更新、およびイベントリスナーの設定が行われます。
  • componentWillReceiveProps。特定のpropsが更新され、状態遷移を引き起こすときに実行されます。
  • shouldComponentUpdate: コンポーネントが更新されるかどうかを決定します。デフォルトではtrueを返します。stateやpropsが更新された後にコンポーネントをレンダリングする必要がないことが確かであれば、false値を返すことができます。コンポーネントが新しいpropsを受け取った場合に再レンダリングを防ぐことができるので、パフォーマンスを向上させるのに最適な場所です。
  • componentWillUpdate: コンポーネントを再レンダリングする前に実行され、propsとstateの変更がshouldComponentUpdate()によって確認され、trueを返します。
  • componentDidUpdate: 主に、propsやstateの変更に応じてDOMを更新するために使用されます。
  • componentWillUnmount: 発信するネットワークリクエストをキャンセルしたり、コンポーネントに関連するすべてのイベントリスナーを削除するために使用されます。

React 16.3+

  • getDerivedStateFromProps: Invoked right before calling render() and is invoked on every render. This exists for rare use cases where you need a derived state. Worth reading if you need derived state.
  • componentDidMount: Executed after first rendering and where all AJAX requests, DOM or state updates, and set up event listeners should occur.
  • shouldComponentUpdate: Determines if the component will be updated or not. By default, it returns true. If you are sure that the component doesn't need to render after the state or props are updated, you can return a false value. It is a great place to improve performance as it allows you to prevent a re-render if component receives a new prop.
  • getSnapshotBeforeUpdate: Executed right before rendered output is committed to the DOM. Any value returned by this will be passed into componentDidUpdate(). This is useful to capture information from the DOM i.e. scroll position.
  • componentDidUpdate: Mostly it is used to update the DOM in response to prop or state changes. This will not fire if shouldComponentUpdate() returns false.
  • componentWillUnmount It will be used to cancel any outgoing network requests, or remove all event listeners associated with the component.
  • getDerivedStateFromProps: render()を呼び出す直前に呼び出され、レンダリングのたびに呼び出される。これは、派生状態が必要な稀なユースケースのために存在します。派生状態が必要な場合は、読む価値がある。
  • componentDidMount: 最初のレンダリングの後に実行され、すべてのAJAXリクエスト、DOMまたはステートの更新、およびイベントリスナーの設定が行われる必要があります。
  • shouldComponentUpdate: コンポーネントが更新されるかどうかを決定します。デフォルトでは、trueを返します。状態やプロップが更新された後、コンポーネントがレンダリングする必要がないことが確かであれば、false値を返すことができます。コンポーネントが新しいプロップを受け取った場合に再レンダリングを防ぐことができるので、パフォーマンスを向上させるには最適な場所です。
  • getSnapshotBeforeUpdate: レンダリングされた出力がDOMにコミットされる直前に実行されます。これによって返された値は、すべてcomponentDidUpdate()に渡されます。これはDOMからの情報(スクロール位置など)を取得するのに便利です。
  • componentDidUpdate: 主に、propsやstateの変更に対応してDOMを更新するために使用されます。shouldComponentUpdate()がfalseを返した場合、これは発生しません。
  • componentWillUnmount: 発信されたネットワーク要求をキャンセルしたり、コンポーネントに関連するすべてのイベントリスナーを削除するために使用されます。

35. What are Higher-Order Components?

A higher-order component (HOC) is a function that takes a component and returns a new component. Basically, it's a pattern that is derived from React's compositional nature.
We call them pure components because they can accept any dynamically provided child component but they won't modify or copy any behavior from their input components.

高階コンポーネントとは、コンポーネントを受け取って、新しいコンポーネントを返す関数です。基本的には、Reactの性質から派生したパターンです。
動的に任意の子コンポーネントを受け取ることができますが、動作を変更したりコピーしたりすることはないため、Pure Componentと呼んでいます。

const EnhancedComponent = higherOrderComponent(WrappedComponent);

HOC can be used for many use cases:

  1. Code reuse, logic and bootstrap abstraction.
  2. Render hijacking.
  3. State abstraction and manipulation.
  4. Props manipulation.

HOCは多くのユースケースに使用することができます。

  1. コードの再利用、ロジックの抽象化。
  2. レンダリングハイジャック
  3. stateの抽象化と操作
  4. propsの操作

36. How to create props proxy for HOC component?

You can add/edit props passed to the component using props proxy pattern like this:

コンポーネントに渡されたpropsはprops proxyパターンを使って次のように追加、編集ができます。

function HOC(WrappedComponent) {
  return class Test extends Component {
    render() {
      const newProps = {
        title: "New Header",
        footer: false,
        showFeatureX: false,
        showFeatureY: true,
      };

      return <WrappedComponent {...this.props} {...newProps} />;
    }
  };
}

37. What is context?

Context provides a way to pass data through the component tree without having to pass props down manually at every level.
For example, authenticated users, locale preferences, UI themes need to be accessed in the application by many components.

Contextは各レベルで手動でpropsを渡すことなく、コンポーネントツリーで共通してデータを渡す方法です。
例えば、認証されたユーザ、設定、UI themeなどが多くのコンポーネントでアクセスしたい例です。

const { Provider, Consumer } = React.createContext(defaultValue);

38. What is children prop?

Children is a prop (this.props.children) that allows you to pass components as data to other components, just like any other prop you use. Component tree put between component's opening and closing tag will be passed to that component as children prop.
There are several methods available in the React API to work with this prop. These include React.Children.map, React.Children.forEach, React.Children.count, React.Children.only, React.Children.toArray.

Childrenは、他のpropsと同じように、コンポーネントをデータとして他のコンポーネントに渡すことができるprops(this.props.children)です。コンポーネントの開始タグと終了タグの間に置かれたコンポーネントツリーは、children propsとしてそのコンポーネントに渡されます。
このpropを操作するために、React APIではいくつかのメソッドが用意されています。React.Children.map, React.Children.forEach, React.Children.count, React.Children.only, React.Children.toArrayなどです。

const MyDiv = React.createClass({
  render: function () {
    return <div>{this.props.children}</div>;
  },
});

ReactDOM.render(
  <MyDiv>
    <span>{"Hello"}</span>
    <span>{"World"}</span>
  </MyDiv>,
  node
);

39. How to write comments in React?

The comments in React/JSX are similar to JavaScript Multiline comments but are wrapped in curly braces.

ReactとJSXのコメントはJSのMultilineコメントと似ていますが、中括弧で囲われます。

// Single-line comments:
<div>
  {/* Single-line comments(In vanilla JavaScript, the single-line comments are represented by double slash(//)) */}
  {`Welcome ${user}, let's play React`}
</div>

// Multi-line comments:
<div>
  {/* Multi-line comments for more than
   one line */}
  {`Welcome ${user}, let's play React`}
</div>

40. What is the purpose of using super constructor with props argument?

A child class constructor cannot make use of this reference until the super() method has been called. The same applies to ES6 sub-classes as well. The main reason for passing props parameter to super() call is to access this.props in your child constructors.

子クラスのコンストラクタは、super()メソッドが呼ばれるまで、この参照を利用することができません。これはES6のサブクラスにも同じことが当てはまります。super()呼び出しにpropsパラメータを渡す主な理由は、子コンストラクタでthis.propsにアクセスできるようにするためです。

// Passing props:
class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    console.log(this.props); // prints { name: 'John', age: 42 }
  }
}

// Not passing 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: 'John', age: 42 }
  }

  render() {
    // no difference outside constructor
    console.log(this.props); // prints { name: 'John', age: 42 }
  }
}

41. What is reconciliation?

When a component's props or state change, React decides whether an actual DOM update is necessary by comparing the newly returned element with the previously rendered one. When they are not equal, React will update the DOM. This process is called reconciliation.

コンポーネントのpropsやstateが変化したとき、Reactは新しく返された要素と以前にレンダリングされた要素を比較して、実際のDOM更新が必要かどうかを判断します。両者が等しくない場合、ReactはDOMを更新します。この処理を「reconciliation」と呼びます。

42. How to set state with a dynamic key name?

If you are using ES6 or the Babel transpiler to transform your JSX code then you can accomplish this with computed property names.

ES6またはBabelトランスパイラを使用してJSXコードを変換している場合、計算されたプロパティ名でこれを実行することができます。

handleInputChange(event) {
  this.setState({ [event.target.id]: event.target.value })
}

43. What would be the common mistake of function being called every time the component renders?

You need to make sure that function is not being called while passing the function as a parameter.

関数をパラメータとして渡していると、その関数が呼び出されないことを確認する必要があります。

render() {
  // Wrong: handleClick is called instead of passed as a reference!
  return <button onClick={this.handleClick()}>{'Click Me'}</button>
}

// Instead, pass the function itself without parenthesis:
render() {
  // Correct: handleClick is passed as a reference!
  return <button onClick={this.handleClick}>{'Click Me'}</button>
}

44. Is lazy function supports named exports?

No, currently React.lazy function supports default exports only. If you would like to import modules which are named exports, you can create an intermediate module that reexports it as the default. It also ensures that tree shaking keeps working and don’t pull unused components. Let's take a component file which exports multiple named components,

いいえ。現在現在React.lazyの機能は、default exportsのみをサポートしています。もしもnamed exportsのモジュールをimportしたい場合は、中間モジュールを作成し、それをdefault exportする必要があります。これにより、tree shakingの動作が保証され、未使用のコンポーネントが引き出されることがなくなります。いくつかのnamed exportされたコンポーネントを見てみましょう。

// MoreComponents.js
export const SomeComponent = /* ... */;
export const UnusedComponent = /* ... */;

// and reexport MoreComponents.js components in an intermediate file IntermediateComponent.js
// IntermediateComponent.js
export { SomeComponent as default } from "./MoreComponents.js";

// Now you can import the module using lazy function as below,
import React, { lazy } from "react";
const SomeComponent = lazy(() => import("./IntermediateComponent.js"));

45. Why React uses className over class attribute?

class is a keyword in JavaScript, and JSX is an extension of JavaScript. That's the principal reason why React uses className instead of class. Pass a string as the className prop.

classはJSのキーワードであり、JSXはJSの拡張であります。これがReactがclassではなくclassNameを使う主な理由です。classNameのプロパティに文字列を渡します。

render() {
  return <span className={'menu navigation-menu'}>{'Menu'}</span>
}

46. What are fragments?

It's a common pattern in React which is used for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM.

Reactではよくあるパターンで、コンポーネントが複数の要素を返すために使われます。フラグメントを使用すると、DOMに余分なノードを追加することなく、子要素のリストをグループ化することができます。

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  )
}

// There is also a shorter syntax, but it's not supported in many tools:
render() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  )
}

47. Why fragments are better than container divs?

Below are the list of reasons,

  1. Fragments are a bit faster and use less memory by not creating an extra DOM node. This only has a real benefit on very large and deep trees.
  2. Some CSS mechanisms like Flexbox and CSS Grid have a special parent-child relationships, and adding divs in the middle makes it hard to keep the desired layout.
  3. The DOM Inspector is less cluttered.
  1. フラグメントは、余分な DOM ノードを作成しないので、少し速く、より少ないメモリを使用します。これは、非常に大きく深いツリーでこそ真価を発揮します。
  2. Flexbox や CSS Grid などの CSS の仕組みには、特殊な親子関係があり、途中に div を追加すると、望ましいレイアウトを維持するのが難しくなります。
  3. DOMインスペクタが乱雑にならずに済みます。

48. What are portals in React?

Portal is a recommended way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.

Portalは、親コンポーネントのDOM階層外に存在するDOMノードに子コンポーネントをレンダリングするための推奨されている方法です。

ReactDOM.createPortal(child, container);

The first argument is any render-able React child, such as an element, string, or fragment. The second argument is a DOM element.

第一引数には、要素、文字列、フラグメントなど、レンダリング可能なReactの子要素を指定します。第2引数はDOM要素を指定します。

49. What are stateless components?

If the behaviour of a component is independent of its state then it can be a stateless component. You can use either a function or a class for creating stateless components. But unless you need to use a lifecycle hook in your components, you should go for function components. There are a lot of benefits if you decide to use function components here; they are easy to write, understand, and test, a little faster, and you can avoid the this keyword altogether.

もしもコンポーネントの挙動がstateに依存しないならばそれは、stateless componentsです。stateless componentの作成には関数とクラスのどちらも使用することができます。しかし、ライフサイクルHooksを使用することがない限りは関数コンポーネントを使用することを勧めます。関数型コンポーネントを使用すると、記述、理解、テストが容易で、速度も少し速くなり、thisキーワードを完全に避けることができるなど、多くの利点があります。

50. What are stateful components?

If the behaviour of a component is dependent on the state of the component then it can be termed as stateful component. These stateful components are always class components and have a state that gets initialized in the constructor.
React 16.8 Update:
Hooks let you use state and other React features without writing classes.

コンポーネントの挙動がstateに依存する場合は、stateful componentです。このようなコンポーネントはクラスコンポーネントを使用して、コンストラクタで初期化される状態を持ちます。
React16.8のupdateにて、クラスを使わずともstateを利用することができるようになりました。

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    // ...
  }
}

// The Equivalent Functional Component
import React, {useState} from 'react';

const App = (props) => {
const [count, setCount] = useState(0);

return (
    // JSX
  )
}

終わりに

以上1~50問の項目を翻訳しました。
この記事が少しでも多くの人のReact学習に役立てれば幸いです!

Discussion

ログインするとコメントできます