このページには、Reactコンポーネントクラス定義の詳細なAPIリファレンスが含まれています。 これは、コンポーネントや小道具、状態やライフサイクルなどの基本的なReactの概念に精通していることを前提としています。 そうでない場合は、最初にそれらを読んでください。Reactでは、コンポーネントをクラスまたは関数として定義できます。 クラスとして定義されたコンポーネントは、現在、このページで詳細に説明されているより多くの機能を提供します。 Reactコンポーネントクラスを定義するには、拡張する必要がありますReact.Component:p>
class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; }}サブクラスで定義する必要がある唯一のメソッドはReact.Componentrender()と呼ばれます。 このページに記載されているその他の方法はすべて省略可能です。
独自のベースコンポーネントクラスを作成しないことを強くお勧めします。 Reactコンポーネントでは、コードの再利用は主に継承ではなく合成によって達成されます。注意：ReactはES6クラスの構文を使用するよう強制しません。
それを避けたい場合は、代わりに
create-react-classモジュールまたは同様のカスタム抽象化を使用できます。 詳細については、ES6を使用せずにReactを使用するをご覧ください。
コンポーネントのライフサイクル
各コンポーネントには、プロセス内の特定の時間にコードを実行するためにオーバライド このライフサイクル図は、チートシートとして使用できます。 以下のリストでは、一般的に使用されるライフサイクルメソッドは太字でマークされています。 それらの残りの部分は、比較的まれな使用例のために存在します。これらのメソッドは、コンポーネントのインスタンスが作成されてDOMに挿入されるときに次の順序で呼び出されます。
constructor()static getDerivedStateFromProps()render()constructor()constructor()static getDerivedStateFromProps()static getDerivedStateFromProps()render()- iv id=”
componentDidMount()
注：
これらのメソッドはレガシーとみなされ、新しいコードでは避ける必要があります。
UNSAFE_componentWillMount()
UNSAFE_componentWillMount()
UNSAFE_componentWillMount()更新
更新は、小道具や状態の変更によって引き起こされる可能性があります。 これらのメソッドは、コンポーネントが再レンダリングされるときに次の順序で呼び出されます。
static getDerivedStateFromProps()shouldComponentUpdate()render()getSnapshotBeforeUpdate()getSnapshotBeforeUpdate()getSnapshotBeforeUpdate()getSnapshotBeforeUpdate()getSnapshotBeforeUpdate()componentDidUpdate()注意：
これらのメソッドはレガシーと見なされ、新しいコードでは避ける必要があります:
UNSAFE_componentWillUpdate()UNSAFE_componentWillReceiveProps()アンマウント
このメソッドは、コンポーネントがDOMから削除されているときに呼び出されます。
UNSAFE_componentWillReceiveProps()アンマウント
このメソッドは、コンポーネントがDOMから削除されているときに呼び出されます。
コンポーネントがDOMから削除されているときに呼び出されます。
componentWillUnmount()エラー処理
これらのメソッドは、レンダリング中、ライフサイクルメソッド、または子コンポーネントのコンストラp>
static getDerivedStateFromError()componentDidCatch()その他のApi
各コンポーネントは他のApiも提供しています:h3>
defaultPropsdisplayNameforceUpdate()クラスプロパティ
defaultPropsdisplayNamedisplayNamedefaultPropsdisplayNamedisplayName
インスタンスプロパティ
propsstateリファレンス
一般的に使用されるライフサイクルメソッド
このセクションのメソッドは、reactコンポーネントの作成に遭遇する大部分のユースケースをカバーしています。 視覚的な参照のために、このライフサイクル図をチェックしてくださp>
render()
render()
render()this.propsthis.stateを調べ、次のいずれかの型を返す必要があります。
- 反応要素。 通常はJSXを介して作成されます。 たとえば、
<div /><MyComponent />は、それぞれDOMノード、または別のユーザー定義コンポーネントをレンダリングするようにReactに指示するReact要素です。- 配列とフラグメント。 Renderから複数の要素を返すようにします。 詳細については、fragmentsのドキュメントを参照してください。
- ポータル。 子を別のDOMサブツリーにレンダリングできます。 詳細については、ポータルのドキュメントを参照してくださ
- 文字列と数字。 これらはDOM内のテキストノードとしてレンダリングされます。
- ブール値または
nullreturn test && <Child />testcomponentDidMount()render()pureを維持すると、コンポーネントの考え方が簡単になります。P>注意
render()shouldComponentUpdate()がfalseを返した場合、呼び出されません。constructor()
constructor(props)状態を初期化せず、メソッドをバインドしない場合は、Reactコンポーネン
Reactコンポーネントのコンストラクタは、マウントされる前に呼び出されます。 サブクラス
React.Componentsuper(props)this.propsはコンストラクタで未定義になり、バグにつながる可能性があります。通常、Reactではコンストラクタは2つの目的にのみ使用されます。
- オブジェクトを
this.state割り当ててローカル状態を初期化します。- イベントハンドラーメソッドをインスタンスにバインドします。あなたは呼び出すべきではありません
setState()constructor()this.stateに割り当てます。constructor(props) { super(props); // Don't call this.setState() here! this.state = { counter: 0 }; this.handleClick = this.handleClick.bind(this);}コンストラクタは、
this.statethis.setState()を使用する必要があります。コンストラクタに副作用やサブスクリプションを導入しないでください。 これらのユースケースでは、代わりに
componentDidMount()を使用してください。注意
propsを状態にコピーしないでください！ これはよくある間違いです：
constructor(props) { super(props); // Don't do this! this.state = { color: props.color };}問題は、両方とも不要であり（代わりに
this.props.colorcolorプロップは状態に反映されません）。propの更新を意図的に無視したい場合にのみ、このパターンを使用してください。 その場合、小道具の名前を
initialColordefaultColorkeyを変更することで、コンポーネントに内部状態を強制的に「リセット」させることができます。propsに依存する状態が必要だと思われる場合の対処方法については、派生状態の回避に関するブログ記事をお読みください。p>
componentDidMount()
componentDidMount()
componentDidMount()コンポーネントがマウントされた直後に呼び出されます（ツリーに挿入されます）。 DOMノードを必要とする初期化はここに行くべきです。 リモートエンドポイントからデータをロードする必要がある場合は、ネットワーク要求をインスタンス化するのに適した場所です。このメソッドは、サブスクリプションを設定するのに適した場所です。 その場合は、
componentWillUnmount()で購読を解除することを忘れないでください。p>
setState()componentDidMount()render()constructor()初期状態を割り当てることができます。 ただし、サイズや位置に依存するものをレンダリングする前にDOMノードを測定する必要があるときに、modalsやツールチップのような場合に必要になることcomponentDidUpdate()
componentDidUpdate(prevProps, prevState, snapshot)
componentDidUpdate()更新が発生した直後に呼び出されます。 このメソッドは、初期レンダリングでは呼び出されません。コンポーネントが更新されたときにDOMを操作する機会としてこれを使用します。 これは、現在の小道具を以前の小道具と比較する限り、ネットワーク要求を行うのにも適しています（例： propsが変更されていない場合は、ネットワーク要求は必要ないかもしれません）。p>
componentDidUpdate(prevProps) { // Typical usage (don't forget to compare props): if (this.props.userID !== prevProps.userID) { this.fetchData(this.props.userID); }}
setState()componentDidUpdate()を呼び出すことができますが、上記の例のような条件でラップする必要があることに注意してくださ また、ユーザーには表示されませんが、コンポーネントのパフォーマンスに影響を与える可能性がある余分な再レンダリングを引き起こ 上からのpropに何らかの状態を”ミラー”しようとしている場合は、代わりにpropを直接使用することを検討してください。 Propsをstateにコピーするとバグが発生する理由の詳細をお読みください。コンポーネントがgetSnapshotBeforeUpdate()componentDidUpdate()に渡されます。 それ以外の場合、このパラメータは未定義になります。P>注意
componentDidUpdate()shouldComponentUpdate()がfalseを返した場合、呼び出されません。h3>componentWillUnmount()
componentWillUnmount()componentDidMount()setState()componentWillUnmount()を呼び出すべきではありません。 コンポーネントインスタンスがアンマウントされると、再びマウントされることはありません。まれに使用されるライフサイクルメソッド
このセクションのメソッドは、珍しいユースケースに対応しています。 彼らはたまには便利ですが、あなたのコンポーネントのほとんどはおそらくそれらのいずれかを必要としません。 このライフサイクル図の上部にある”あまり一般的でないライフサイクルを表示する”チェックボックスをクリックすると、以下のほとんどの方法コンポーネントの出力が現在の状態や小道具の変化の影響を受けないかどうかをReactに知らせるには、
shouldComponentUpdate()
shouldComponentUpdate()
shouldComponentUpdate()
shouldComponentUpdate()
shouldComponentUpdate()
shouldComponentUpdate()
shouldComponentUpdate()trueforceUpdate()が使用されている場合には呼び出されません。このメソッドは、パフォーマンスの最適化としてのみ存在します。 これはバグにつながる可能性があるので、レンダリングを”防ぐ”ためにそれに依存しないでください。 手動で
shouldComponentUpdate()PureComponentPureComponentthis.propsnextPropsthis.statenextStatefalseを返すことができます。div>Reactに更新をスキップすることができます。falseshouldComponentUpdate()JSON.stringify()shouldComponentUpdate()falseUNSAFE_componentWillUpdate()render()componentDidUpdate()は呼び出されません。 将来、ReactはshouldComponentUpdate()falseを返すと、コンポーネントの再レンダリングstatic getDerivedStateFromProps()
static getDerivedStateFromProps(props, state)
getDerivedStateFromProps最初のマウントとその後の更新の両方で、renderメソッドを呼び出す直前に呼び出されます。 状態を更新するにはオブジェクトを返すか、何も更新しないにはnullを返します。このメソッドは、状態が時間の経過とともに小道具の変化に依存するまれなユースケースに存在します。 たとえば、
<Transition>コンポーネントを実装すると、前の子と次の子を比較して、どの子をアニメーション化するかを決定するのに便利です。状態を導出すると、冗長なコードが発生し、コンポーネントを考えるのが難しくなります。より簡単な代替案に精通していることを確認してください:
- 小道具の変更に応じて副作用（データのフェッチやアニメーションなど）を実行する必要がある場合は、代わりに
componentDidUpdatelifecycleを使用します。- 小道具が変更されたときにのみデータを再計算したい場合は、代わりにメモ化ヘルパーを使用してください。
- 小道具が変更されたときにいくつかの状態を”リセット”したい場合は、代わりに
keyでコンポーネントを完全に制御または完全に制御このメソッドはコンポーネントインスタンスにアクセスできません。 必要に応じて、
getDerivedStateFromProps()と他のクラスメソッドの間でコードを再利用するには、コンポーネントのpropsの純粋な関数を抽出し、クラス定義の外このメソッドは、原因に関係なく、すべてのレンダリングで起動されることに注意してください。 これは、
UNSAFE_componentWillReceivePropssetStateの結果としてではありません。getSnapshotBeforeUpdate()
getSnapshotBeforeUpdate(prevProps, prevState)
getSnapshotBeforeUpdate()最後にレンダリングされた出力がDOMなどにコミットされる直前に呼び出されます。 これは、潜在的に変更される前に、コンポーネントがDOMからいくつかの情報（スクロール位置など）をキャプチャすることを可能にします。 このライフサイクルによって返される値は、パラメータとしてcomponentDidUpdate()に渡されます。このユースケースは一般的ではありませんが、特別な方法でスクロール位置を処理する必要があるチャットスレッドのようなUiで発生する可能性があスナップショット値(または
nullclass ScrollingList extends React.Component { constructor(props) { super(props); this.listRef = React.createRef(); } getSnapshotBeforeUpdate(prevProps, prevState) { // Are we adding new items to the list? // Capture the scroll position so we can adjust scroll later. if (prevProps.list.length < this.props.list.length) { const list = this.listRef.current; return list.scrollHeight - list.scrollTop; } return null; } componentDidUpdate(prevProps, prevState, snapshot) { // If we have a snapshot value, we've just added new items. // Adjust scroll so these new items don't push the old ones out of view. // (snapshot here is the value returned from getSnapshotBeforeUpdate) if (snapshot !== null) { const list = this.listRef.current; list.scrollTop = list.scrollHeight - snapshot; } } render() { return ( <div ref={this.listRef}>{/* ...contents... */}</div> ); }}“レンダリング”フェーズのライフサイクルの間に遅延がある可能性があるため、
getSnapshotBeforeUpdatescrollHeightclass ScrollingList extends React.Component { constructor(props) { super(props); this.listRef = React.createRef(); } getSnapshotBeforeUpdate(prevProps, prevState) { // Are we adding new items to the list? // Capture the scroll position so we can adjust scroll later. if (prevProps.list.length < this.props.list.length) { const list = this.listRef.current; return list.scrollHeight - list.scrollTop; } return null; } componentDidUpdate(prevProps, prevState, snapshot) { // If we have a snapshot value, we've just added new items. // Adjust scroll so these new items don't push the old ones out of view. // (snapshot here is the value returned from getSnapshotBeforeUpdate) if (snapshot !== null) { const list = this.listRef.current; list.scrollTop = list.scrollHeight - snapshot; } } render() { return ( <div ref={this.listRef}>{/* ...contents... */}</div> ); }}“コミット”フェーズのライフサイクル（
getSnapshotBeforeUpdatecomponentDidUpdateなど）。Error boundaries
Error boundariesは、子コンポーネントツリー内の任意の場所でJavaScriptエラーをキャッチし、それらのエラーをログに記録し、クラッシュしたコンポーネントツリー エラー境界は、レンダリング中、ライフサイクルメソッド、およびその下のツリー全体のコンストラクタでエラーをキャッ
ライフサイクルメソッド
static getDerivedStateFromError()componentDidCatch()のいずれか（または両方）を定義すると、クラスコンポーネントはエラー境界になります。 これらのライフサイクルから状態を更新すると、以下のツリーで未処理のJavaScriptエラーをキャプチャし、フォールバックUIを表示できます。予期しない例外からの回復にはエラー境界のみを使用します。詳細については、React16でのエラー処理を参照してください。
注意
エラー境界は、ツリー内のそれらの下のコンポーネントのエラーのみをキャッチします。 エラー境界は、それ自体の中でエラーをキャッチすることはできません。p>
static getDerivedStateFromError()
static getDerivedStateFromError(error)このライフサイクルは、子孫によってエラーがスローされた後に呼び出されますcomponent.It パラメータとしてスローされたエラーを受け取り、状態を更新する値を返す必要があります。/p>
class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { // Update state so the next render will show the fallback UI. return { hasError: true }; } render() { if (this.state.hasError) { // You can render any custom fallback UI return <h1>Something went wrong.</h1>; } return this.props.children; }}注意
getDerivedStateFromError()componentDidCatch()を使用してください。p>componentDidCatch()
componentDidCatch(error, info)このライフサイクルは、子孫によってエラーがスローされた後に呼び出されますcomponent.It 次の2つのパラメータを受け取ります。
error-スローされたエラー。infocomponentStackキーを持つオブジェクト。
componentDidCatch()は”commit”フェーズ中に呼び出されるため、副作用は次のとおりですpermitted.It ログエラーのようなものに使用する必要があります:class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { // Update state so the next render will show the fallback UI. return { hasError: true }; } componentDidCatch(error, info) { // Example "componentStack": // in ComponentThatThrows (created by App) // in ErrorBoundary (created by App) // in div (created by App) // in App logComponentStackToMyService(info.componentStack); } render() { if (this.state.hasError) { // You can render any custom fallback UI return <h1>Something went wrong.</h1>; } return this.props.children; }}Reactの実稼働および開発ビルドは、
componentDidCatch()window.onerrorwindow.addEventListener('error', callback)componentDidCatch()componentDidCatch()によって明示的にキャッチされていないエラーのみを受け取ります。注意
エラーが発生した場合、
setStatecomponentDidCatch()でフォールバックUIをレンダリングできますが、これは将来のリリー代わりにフォールバックレンダリングを処理するには、static getDerivedStateFromError()を使用します。レガシーライフサイクルメソッド
以下のライフサイクルメソッドは”レガシー”としてマークされています。 それらはまだ動作しますが、新しいコードでそれらを使用することはお勧めしません。 レガシーライフサイクルメソッドからの移行の詳細については、このブログ記事を参照してください。H3>
UNSAFE_componentWillMount()注意
このライフサイクルは以前は
componentWillMountrename-unsafe-lifecyclescodemodを使用します。
UNSAFE_componentWillMount()render()setState()constructor()を使用することをお勧めします。この方法では副作用やサブスクリプションを導入しないでください。 これらのユースケースでは、代わりに
componentDidMount()を使用してください。これは、サーバーレンダリングで呼び出される唯一のライフサイクルメソッドです。
Unsafe_Componentwillreceiveprops()
UNSAFE_componentWillReceiveProps(nextProps)注
このライフサイクルは、以前は
componentWillReceivePropsrename-unsafe-lifecyclescodemodを使用します。注:
このライフサイクルメソッドを使用すると、多くの場合、バグや不整合につながります
- 小道具の変更に応じて副作用(データフェッチやアニメーションなど)を実行する必要がある場合は、
componentDidUpdate代わりに、ライフサイクル。propが変更されたときにのみデータを再計算するためにcomponentWillReceivePropsを使用した場合は、代わりにメモ化ヘルパーを使用してください。componentWillReceivePropsを使用してpropが変更されたときにいくつかの状態を”リセット”する場合は、代わりにkeyを使用してコンポーネその他のユースケースについては、このブログ記事のderived stateに関する推奨事項に従ってください。
UNSAFE_componentWillReceiveProps()this.propsnextPropsthis.setState()を使用して状態遷移を実行することができます。親コンポーネントがコンポーネントを再レンダリングする場合、propsが変更されていなくてもこのメソッドが呼び出されることに注意してくださ 変更のみを処理する場合は、現在の値と次の値を比較してください。Reactはマウント中に初期小道具で
UNSAFE_componentWillReceiveProps()を呼び出しません。 コンポーネントの小道具の一部が更新される可能性がある場合にのみ、このメソッドを呼びます。 通常、this.setState()UNSAFE_componentWillReceiveProps()はトリガーされません。H3>UNSAFE_componentWillUpdate(nextProps, nextState)注意
このライフサイクルは以前は
componentWillUpdaterename-unsafe-lifecyclescodemodを使用します。p>
UNSAFE_componentWillUpdate()UNSAFE_componentWillUpdate()が戻る前にReactコンポーネントへの更新をトリガーする他の何か（Reduxアクションをディスパッチするなど）を行うべきではありません。通常、このメソッドはcomponentDidUpdate()に置き換えることができます。 このメソッドでDOMから読み込んでいた場合（スクロール位置を保存する場合など）、そのロジックをgetSnapshotBeforeUpdate()に移動できます。P>注意
UNSAFE_componentWillUpdate()shouldComponentUpdate()がfalseを返した場合、呼び出されません。その他のApi
上記のライフサイクルメソッド（Reactが呼び出します）とは異なり、以下のメソッドはコンポーネそのうちの2つだけがあります：
setState()forceUpdate()。p>setState()
setState(updater, )
setState()setState()setState()setState()setState()setState()setState()iv id=” これは、イベントハンドラーとサーバーの応答に応答してユーザーインターフェイスを更新するために使用する主な方法です。コンポーネントを更新するための即時コマンドではなく、要求として
setState()と考えてください。 より良い知覚されるパフォーマンスのために、Reactはそれを遅らせ、単一のパスでいくつかのコンポーネントを更新するかもしれません。 Reactは、状態の変更がすぐに適用されることを保証しません。
setState()this.statesetState()this.statecomponentDidUpdatesetStatesetState(updater, callback)updater引数について読んでください。p>
setState()shouldComponentUpdate()falseshouldComponentUpdate()で実装できない場合、新しい状態が前の状態と異なp>最初の引数は
updaterシグネチャを持つ関数です:p>(state, props) => stateChange
statestatepropsprops.stepthis.setState((state, props) => { return {counter: state.counter + props.step};});
statepropsstateと浅くマージされます。
setState()setStatecomponentDidUpdate()を使用することをお勧めします。オプションで、関数の代わりに
setState()の最初の引数としてオブジェクトを渡すことができます。setState(stateChange)これは、
stateChangeの浅いマージを実行します。ショッピングカートの商品数量を調整するなど、新しい状態になります。this.setState({quantity: 2})この形式の
setState()も非同期であり、同じサイクル中の複数の呼び出しを一緒にバッチ処理することができます。 たとえば、同じサイクルで品目の数量を複数回増やそうとすると、次のようになります:P>Object.assign( previousState, {quantity: state.quantity + 1}, {quantity: state.quantity + 1}, ...)以降の呼び出しは、同じサイクルの以前の呼び出しの値を上書きするため、数量は一度だけ増加します。 次の状態が現在の状態に依存する場合は、代わりにupdater関数フォームを使用することをお勧めします。
this.setState((state) => { return {quantity: state.quantity + 1};});詳細については、
- 状態とライフサイク
- 深さ：なぜ
this.stateすぐに更新されないのですか？forceUpdate()
component.forceUpdate(callback)デフォルトでは、コンポーネントの状態や小道具が変更されると、コンポーネントが再レンダーされます。 あなたの
render()forceUpdate()を呼び出すことで、コンポーネントが再レンダリングが必要であることをReactに伝えることができます。p>
forceUpdate()render()shouldComponentUpdate()shouldComponentUpdate()メソッドを含む、子コンポーネントの通常のライフサイクルメソッドがトリガーされます。 Reactはマークアップが変更された場合にのみDOMを更新します。通常、forceUpdate()this.propsthis.staterender()からのみ読み取るようにしてください。クラスプロパティ
defaultProps
defaultPropsは、クラスのデフォルトの小道具を設定するために、コンポーネントクラス自体のプロパティとし This is used forundefinedprops, but not fornullprops. For example:class CustomButton extends React.Component { // ...}CustomButton.defaultProps = { color: 'blue'};If
props.coloris not provided, it will be set by default to'blue':render() { return <CustomButton /> ; // props.color will be set to blue }If
props.coloris set tonull, it will remainnull:render() { return <CustomButton color={null} /> ; // props.color will remain null }displayName
The
displayNamestring is used in debugging messages. 通常、コンポーネントを定義する関数またはクラスの名前から推論されるため、明示的に設定する必要はありません。 デバッグのために別の名前を表示する場合や、上位コンポーネントを作成するときに明示的に設定することができます。P>インスタンスプロパティ
props
this.propsこのコンポーネントの呼び出し元によって定義されたpropsが含まれています。 小道具の概要については、”コンポーネントと小道具”を参照してください。特に、this.props.childrenは特別な小道具であり、通常はタグ自体ではなくJSX式の子タグによって定義されます。state
状態には、時間の経過とともに変化する可能性のあるこのコンポーネントに固有のデータが含まれています。 状態はユーザー定義であり、プレーンなJavaScriptオブジェクトでなければなりません。
何らかの値がレンダリングやデータフローに使用されていない場合（タイマー IDなど）、それを状態にする必要はありません。 このような値は、コンポーネントインスタンスのフィールドとして定義できます。
状態の詳細については、”状態とライフサイクル”を参照してください。その後、
setState()を呼び出すと、変更した突然変異が置き換えられる可能性があります。変更しないでください
this.statesetState()this.stateを不変であるかのように扱います。