質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

0回答

206閲覧

react.jsのshallowEqual()でエラー

ruuusaamarki

総合スコア468

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2018/05/30 03:42

前提・実現したいこと

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()を使用する際に他に何か準備することがあるのでしょうか。
・その他考えられる原因など教えていただけたら幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問