この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントであるja.react.dev をご利用ください。
以下の新しいドキュメントで最新の React の使い方が学べます。
React
は React ライブラリのエントリポイントです。<script>
タグから React を読み込む場合、これらの最上位 API をグローバルのReact
から利用できます。npm と ES6 を使う場合、import React from 'react'
と書けます。npm と ES5 を使う場合、var React = require('react')
と書けます。
React コンポーネントを使用すると UI を独立した再利用可能な部分に分割し、各部分を個別に考えることができます。React コンポーネントはReact.Component
またはReact.PureComponent
をサブクラス化することで定義できます。
ES6 クラスを使わない場合は、代わりにcreate-react-class
モジュールを使うことができます。詳しくはUsing React without ES6 を参照してください。
React コンポーネントは関数で定義でき、その際に以下の関数でラップできます:
UI がどのように見えるべきかを記述するためにJSX の使用 を推奨します。JSX のそれぞれの要素はReact.createElement()
を呼ぶための単なる糖衣構文です。JSX を使用している場合は、通常、次のメソッドを直接呼び出すことはありません。
詳しくはJSX なしで React を使う を参照してください。
React
は要素を操作するためのいくつかの API を提供しています。
React
はラッパーなしで複数の要素をレンダーするためのコンポーネントを提供しています。
サスペンスを使用すると、コンポーネントはレンダーの前に何かを「待機」できます。現在、サスペンスは 1 つのユースケースのみをサポートしています:React.lazy
を使ってコンポーネントを動的に読み込む。将来的にはデータの取得のような他のユースケースもサポートされるでしょう。
トランジションは React 18 で導入された新しい並行レンダー機能です。これにより更新をトランジションとしてマークすることができ、既に表示されているコンテンツがサスペンスによるフォールバック状態に戻ってしまわないよう更新を中断して構わない、と React に伝えることができるようになります。
フック (hook) は React 16.8 で追加された新機能です。state などの React の機能を、クラスを書かずに使えるようになります。フックには専用のセクションと別の API リファレンスがあります。
React.Component
This content is out of date.
Read the new React documentation for
Component
.
React コンポーネントがES6 クラス を用いて定義されている場合、React.Component
はそれらの基底クラスになります。
classGreetingextendsReact.Component{render(){return<h1>Hello,{this.props.name}</h1>;}}
基底クラスReact.Component
に関するメソッドとプロパティの一覧については、React.Component API Reference を参照してください。
React.PureComponent
This content is out of date.
Read the new React documentation for
PureComponent
.
React.PureComponent
はReact.Component
と似ています。両者の違いはReact.Component
がshouldComponentUpdate()
を実装していないことに対し、React.PureComponent
は props と state を浅く (shallow) 比較することでそれを実装していることです。
React コンポーネントのrender()
関数が同じ props と state を与えられたときに同じ結果をレンダーするときは、パフォーマンスを向上させるためにReact.PureComponent
を使用できます。
補足
React.PureComponent
のshouldComponentUpdate()
は オブジェクトの浅い比較のみを行います。これらに複雑なデータ構造が含まれていると、深い部分のみに差分があるために、本当は差分があるにも関わらず差分がないと見なされる場合があります。単純な props と state を持つ場合にのみPureComponent
を継承するか、深いデータ構造が変更されたとわかっているときにforceUpdate()
を使用してください。あるいは、ネストされたデータ構造の高速な比較を容易にするためにイミュータブルなオブジェクト の使用を検討してください。さらに、
React.PureComponent
のshouldComponentUpdate()
はサブツリー全体のコンポーネントの props の更新をスキップします。子コンポーネントの全てが「純粋な」コンポーネントであることを確認してください。
React.memo
This content is out of date.
Read the new React documentation for
memo
.
const MyComponent= React.memo(functionMyComponent(props){/* render using props */});
React.memo
は高階コンポーネントです。
もしあるコンポーネントが同じ props を与えられたときに同じ結果をレンダーするなら、結果を記憶してパフォーマンスを向上させるためにそれをReact.memo
でラップすることができます。つまり、React はコンポーネントのレンダーをスキップし、最後のレンダー結果を再利用します。
React.memo
は props の変更のみをチェックします。React.memo
でラップしているあなたのコンポーネントがその実装内でuseState
、useReducer
やuseContext
フックを使っている場合、state やコンテクストの変化に応じた再レンダーは発生します。
デフォルトでは props オブジェクト内の複雑なオブジェクトは浅い比較のみが行われます。比較を制御したい場合は 2 番目の引数でカスタム比較関数を指定できます。
functionMyComponent(props){/* render using props */}functionareEqual(prevProps, nextProps){/* nextProps を render に渡した結果が prevProps を render に渡した結果となるときに true を返し それ以外のときに false を返す */}exportdefault React.memo(MyComponent, areEqual);
これはパフォーマンス最適化のためだけの方法です。バグを引き起こす可能性があるため、レンダーを「抑止する」ために使用しないでください。
注意
クラスコンポーネントの
shouldComponentUpdate()
とは異なり、このareEqual
関数は props が等しいときにtrue
を返し、props が等しくないときにfalse
を返します。これはshouldComponentUpdate
とは逆です。
createElement()
This content is out of date.
Read the new React documentation for
createElement
.
React.createElement( type,[props],[...children])
与えられた型の新しいReact 要素を作成して返します。type
引数はタグ名の文字列('div'
や'span'
など)、React component 型(クラスもしくは関数)、React fragment 型のいずれかです。
JSX で書かれたコードはReact.createElement()
を用いるコードに変換されます。JSX を使っていれば通常React.createElement()
を直接呼び出すことはありません。詳しくはJSX なしで React を使うを参照してください。
cloneElement()
This content is out of date.
Read the new React documentation for
cloneElement
.
React.cloneElement( element, [config], [...children])
element
から新しい React 要素を複製して返します。config
には新しく使う props やkey
やref
を指定します。結果の要素は元の要素の props に新しい props が浅くマージされたものになります。新しい子要素は既存の子要素を置き換えます。config
内でkey
やref
が指定されていない場合、元の要素のkey
やref
が保持されます。
React.cloneElement()
は以下のコードとほぼ同等です:
<element.type{...element.props}{...props}>{children}</element.type>
ただし、ref
も保持されます。つまりref
のある子要素を受け取っても、間違って元の React 要素からref
を盗むことはありません。新しい要素にも同じref
が追加されます。新しいref
やkey
が存在する場合古いものを置き換えます。
この API は非推奨のReact.addons.cloneWithProps()
の代替として導入されました。
createFactory()
This content is out of date.
Read the new React documentation for
createFactory
.
React.createFactory(type)
与えられた型の React 要素を生成する関数を返します。React.createElement()
と同様に、type
引数はタグ名の文字列('div'
や'span'
など)、React コンポーネント型(クラスもしくは関数)、React フラグメント型のいずれかです。
このヘルパーはレガシーだと考えられているため、代わりに JSX かReact.createElement()
を直接使用することをおすすめします。
JSX を使っていれば通常React.createFactory()
を直接呼び出すことはありません。詳しくはJSX なしで React を使うを参照してください。
isValidElement()
This content is out of date.
Read the new React documentation for
isValidElement
.
React.isValidElement(object)
オブジェクトが React 要素であることを確認します。true
またはfalse
を返します。
React.Children
This content is out of date.
Read the new React documentation for
Children
.
React.Children
はデータ構造が非公開のthis.props.children
を扱うためのユーティリティを提供します。
React.Children.map
React.Children.map(children,function[(thisArg)])
this
をthisArg
に設定して、children
内に含まれるすべての直下の子要素に対して関数を呼び出します。children
が配列の場合は走査され、配列の各要素に対して関数が呼び出されます。children
がnull
またはundefined
の場合はこのメソッドは配列ではなくnull
またはundefined
を返します。
補足
children
がFragment
の場合、それは 1 つの子要素として扱われ、走査されません。
React.Children.forEach
React.Children.forEach(children,function[(thisArg)])
React.Children.map()
と似ていますが、配列を返しません。
React.Children.count
React.Children.count(children)
children
に含まれるコンポーネントの総数を返します。これはmap
またはforEach
に渡したコールバックが呼ばれる回数と同じです。
React.Children.only
React.Children.only(children)
children
が 1 つの子要素しか持たないことを確認し、結果を返します。そうでない場合、このメソッドはエラーを投げます。
補足:
React.Children.map()
の返り値は React 要素ではなく配列なため、React.Children.only()
はそれを受け付けません。
React.Children.toArray
React.Children.toArray(children)
データ構造が非公開のchildren
を平坦な配列として返し、それぞれの要素に key を割り当てます。レンダーメソッド内で子の集合を操作したい場合、特にthis.props.children
を渡す前に並べ替えたりスライスしたい場合に便利です。
補足:
React.Children.toArray()
は子のリストを平坦にするときにネストされた配列の意味を保つために key を変更します。つまり、toArray
は配列のそれぞれの要素の key に接頭辞を付けて返します。
React.Fragment
This content is out of date.
Read the new React documentation for
Fragment
.
React.Fragment
コンポーネントを使用すると追加の DOM 要素を作成することなくrender()
メソッドで複数の要素を返すことができます。
render(){return(<React.Fragment> Some text.<h2>A heading</h2></React.Fragment>);}
また、フラグメントを<></>
という短縮構文で使用できます。詳しくはReact v16.2.0: Improved Support for Fragments を参照してください。
React.createRef
This content is out of date.
Read the new React documentation for
createRef
.
React.createRef
はref を作成します。ref はref
属性を介して React 要素に取り付けることができます。
classMyComponentextendsReact.Component{constructor(props){super(props);this.inputRef= React.createRef();}render(){return<inputtype="text"ref={this.inputRef}/>;}componentDidMount(){this.inputRef.current.focus();}}
React.forwardRef
This content is out of date.
Read the new React documentation for
forwardRef
.
React.forwardRef
はref を配下のツリーの別のコンポーネントに受け渡す React コンポーネントを作成します。この手法はあまり一般的ではありませんが、2 つのシナリオで特に役立ちます:
React.forwardRef
はレンダー関数を引数として受け入れます。React は props と ref を 2 つの引数として呼び出します。この関数は React ノードを返す必要があります。
const FancyButton= React.forwardRef((props, ref)=>(<buttonref={ref}className="FancyButton">{props.children}</button>));// You can now get a ref directly to the DOM button:const ref= React.createRef();<FancyButtonref={ref}>Click me!</FancyButton>;
上の例では、React は<FancyButton ref={ref}>
要素に与えたref
をReact.forwardRef
の呼び出し内のレンダー関数の 2 番目の引数として渡します。このレンダー関数はref
を<button ref={ref}>
要素に渡します。
結果として、React がref
を取り付けた後、ref.current
は<button>
の DOM 要素のインスタンスを直接指すようになります。
詳しくはforwarding refs を参照してください。
React.lazy
This content is out of date.
Read the new React documentation for
lazy
.
React.lazy()
を使用すると、動的に読み込まれるコンポーネントを定義できます。これにより、バンドルサイズを削減して、最初のレンダー時に使用されないコンポーネントの読み込みを遅らせることができます。
code splitting のドキュメントから使用方法を学ぶことができます。また、使い方をより詳しく説明したこちらの記事もチェックしてみてください。
// This component is loaded dynamicallyconst SomeComponent= React.lazy(()=>import('./SomeComponent'));
lazy
コンポーネントをレンダーするには<React.Suspense>
がレンダリングツリーの上位に必要です。これはローディングインジケータを指定する方法です。
React.Suspense
This content is out of date.
Read the new React documentation for
Suspense
.
React.Suspense
を使用することで、その配下のツリーにレンダーする準備ができていないコンポーネントがあるときに表示するローディングインジケータを指定できます。将来的にはSuspense
をデータフェッチングのようなより多くのシナリオで使えるようにする予定です。詳細はロードマップを参照してください。
現時点ではコンポーネントの遅延ローディングが<React.Suspense>
がサポートする唯一のユースケースです:
// This component is loaded dynamicallyconst OtherComponent= React.lazy(()=>import('./OtherComponent'));functionMyComponent(){return(// Displays <Spinner> until OtherComponent loads<React.Suspensefallback={<Spinner/>}><div><OtherComponent/></div></React.Suspense>);}
これはcode splitting guide で文書化されています。遅延される (lazy) コンポーネントをSuspense
ツリーの奥深くに置くことができ、それらを 1 つずつラップする必要はありません。ベストプラクティスは<Suspense>
をローディングインジケータを表示したい場所に配置することですが、コードを分割したい場合はlazy()
を使用してください。
補足:
既にユーザに表示されているコンテンツがある場合、それがローディングインジケータに戻ってしまうのは不親切です。新しい UI を準備している間「古い」UI を表示しておくことが望ましいことがあります。これを行うため、新たなトランジション API である
startTransition
とuseTransition
を用い、更新をトランジションとしてマークすることで意図しない場面でのフォールバックを避けることができます。
React.Suspense
サーバサイドレンダリングにおいてもサスペンスバウンダリとサスペンドを用いることで、アプリを部分的に分割して表示していくことができます。コンポーネントがサスペンドした場合、直近のサスペンスバウンダリに指定されているフォールバックをレンダーするような低優先度のタスクがスケジュールされます。フォールバックを表示する前にコンポーネントのサスペンドが解除された場合は、フォールバックのコンテンツを捨てて実コンテンツを送信します。
React.Suspense
サスペンスバウンダリがハイドレートされる前に親のバウンダリはハイドレートされていなければなりませんが、兄弟の関係にあるバウンダリとは独立してハイドレートされることができます。何らかのバウンダリでイベントが起こった場合、そのバウンダリは他のものより優先的にハイドレートされるようになります。詳細
React.startTransition
This content is out of date.
Read the new React documentation for
startTransition
.
React.startTransition(callback)
React.startTransition
は渡されたコールバック内で発生した更新をトランジションとしてマークします。これはReact.useTransition
が使えない場合でも使えるように設計されています。
補足:
トランジション内での更新はクリックのようなより緊急性の高い更新があった場合に遅延されます。
トランジション内で起こった更新は、コンテンツが再サスペンドした場合でもフォールバックを表示させないため、更新をレンダーしている最中でもユーザが操作できる状態が保たれます。
React.startTransition
はisPending
フラグを返しません。トランジションのペンディング状態を知るにはReact.useTransition
を参照してください。