前提・実現したいこと
shallowEqual()関数を使って
再描画の必要性を判定し
高速化をしたいのですがエラーが出ている状況です。
アプリケーションの仕組としては
inputタグ内の文字数をリアルタイムで表示するだけという簡単なものです。
(Reactビギナーズガイドという本のサンプル、2章の最後)
発生している問題・エラーメッセージ
Uncaught ReferenceError: shallowEqual is not defined
該当のソースコード
<script src="react/build/react-with-addons.js"></script> <script src="react/build/react-dom.js"></script> <script> var ReactComponentWithPureRenderMixin = { shouldComponentUpdate: function(nextProps, nextState) { return !shallowEqual(this.props, nextProps) || !shallowEqual(this.state, nextState); } };
試したこと
React (with addons) v15.0.2を読み込んでいるので
中身を見ると以下の記述がありました。
function shallowEqual(objA, objB) { if (is(objA, objB)) { return true; } if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) { return false; } var keysA = Object.keys(objA); var keysB = Object.keys(objB); if (keysA.length !== keysB.length) { return false; } // Test for A's keys different from B. for (var i = 0; i < keysA.length; i++) { if (!hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) { return false; } } return true; } module.exports = shallowEqual; },{}],183:[function(_dereq_,module,exports){
###試したこと2
shallowCompareという関数をReact (with addons) v15.0.2の中で見つけたので
以下のようにしてみました。
var ReactComponentWithPureRenderMixin = { shouldComponentUpdate: function(nextProps, nextState) { shallowCompare(this, nextProps, nextState); } };
結果同じエラーになりました。
Uncaught ReferenceError: shallowCompare is not defined
質問
・shallowEqual(),shallowCompare()を使用する際に他に何か準備することがあるのでしょうか。
・その他考えられる原因など教えていただけたら幸いです。
あなたの回答
tips
プレビュー