React.PropTypesは死んでいて、Reactで長生きするPropTypes

投稿日: 2022-04-20 2022-10-07
タグ: React

React v15.5 以降、PropTypeはReactパッケージで非推奨になり、独自のパッケージが提供されています。

変化は人生の必然的な部分です。

結果は2つあります。 1）別のタイプチェックメカニズムを使用する場合、エンドユーザーに不要なバルクを出荷することを心配する必要はありません。輸入を省略し、減量を銀行に預けます。 2）PropType宣言は、これまで考えられていたよりも洗練されたものになります。

欠点は、v15.3（判断なし）以降、PropTypesを直接呼び出すことに関する非推奨の警告を無視している場合、その鶏はねぐらに戻ってきたことです。

それを始めましょう、しかし最初にあなたはあなたのプロジェクトにパッケージをインストールする必要があるでしょう。

npm install prop-types --save

または、ご存知のとおり、ヤーンのことを実行してください。いずれにせよ、検証付きの古い単純なコンポーネントは次のとおりです。

import React from 'react';

function Detail ({caption, style}) {
  return <p style={style}>{caption}</p>
}

Detail.propTypes = {
  caption: React.PropTypes.string.isRequired,
  style: React.PropTypes.objectOf(
    React.PropTypes.string
  ),
}

export default Detail;

そしてここにそれは新しい方法です：

import React from 'react';
import PropTypes from 'prop-types';

function Detail ({caption, style}) {
  return <p style={style}>{caption}</p>
}

Detail.propTypes = {
  caption: PropTypes.string.isRequired,
  style: PropTypes.objectOf(
    PropTypes.string
  ),
}

export default Detail;

実際、それをスクラッチします。私たちはsvelteを約束しました。したがって、次のように非構造化スピンを与えます。

import React from 'react';
import {string, objectOf} from 'prop-types';

function Detail ({caption, style}) {
  return <p style={style}>{caption}</p>
}

Detail.propTypes = {
  caption: string.isRequired,
  style: objectOf(
    string
  ),
}

export default Detail;

親愛なる友よ、それは絵のようにきれいです、そして良いニュースはそれがすべてあなたが慣れているように正確に機能するということです。開発中の警告。生産中の沈黙。

唯一の注目すべき例外は、上記の例外です。直接呼び出されたPropTypesです。これらのチェックは、本番環境で次のブロックを自動的に呼び出します。

var productionTypeChecker = function () {
  invariant(false, 'React.PropTypes type checking code is stripped in production.');
};

エラーをスローし、ものを壊します。コード内のこれらの呼び出しをリファクタリングするか、独自のフォークを作成する必要があります prop-types それらをアップグレードトレインに維持します。

何をするにしても、この変化に汗を流さないでください。軽度の不便税を伴う純利益です。

getdocs

13036