Reactでは、コンポーネントを作成するためにクラスベースのコンポーネントを利用することができます。
クラスコンポーネントには、特定の静的(static)メソッドやプロパティが存在します。今回は、それらのstatic
についてわかりやすく解説します。
staticとは?
まずはstatic
自体について説明します。static
はJavaScriptのキーワードの一つで、クラスに関連する静的なメソッドまたはプロパティを定義するために使います。これら静的なメソッドやプロパティは、クラスのインスタンスを生成せずとも、クラスそのものからアクセス可能です。
Reactクラスコンポーネントでのstatic
Reactのクラスコンポーネントでは、static
は特定の目的を果たすいくつかのメソッドとプロパティに使われます。以下にそれらを説明します。
static defaultProps
defaultProps
は、コンポーネントのデフォルトのpropsを定義するための静的プロパティです。これは、親コンポーネントからpropsが渡されなかった場合に使われます。
class MyComponent extends React.Component {
static defaultProps = {
name: 'Default Name'
};
//...
}
static propTypes
propTypes
は、コンポーネントが受け取るpropsの型を指定するための静的プロパティです。これは開発中に型チェックを行い、意図しない型のpropsが渡された場合に警告を出すために使われます。
import PropTypes from 'prop-types';
class MyComponent extends React.Component {
static propTypes = {
name: PropTypes.string
};
//...
}
static contextType
contextType
は、クラスコンポーネントでContextを利用するための静的プロパティです。このプロパティを設定すると、そのクラス内でthis.context
を通じて現在のcontext値にアクセスできます。
import MyContext from './MyContext';
class MyComponent extends React.Component {
static contextType = MyContext;
//...
}
以上がReactのクラスコンポーネントで使われる主なstatic
の用途です。
これらを理解することで、クラスコンポーネントの機能をより深く活用できるようになるでしょう。