Reactガイドを読んでいくその138

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

React.Children

データ構造が非公開のthis.props.childrenを扱うためのユーティリティを提供する。
以下のような種類がある。
・React.Children.map
・React.Children.forEach
・React.Children.count
・React.Children.only
・React.Children.toArray

React.Children.map

React.Children.map(children, function[(thisArg)])

thisargに設定してchilderenに含まれるすべての直下の子要素に対して関数の呼び出しをする。
配列の場合は走査、関数の呼び出しが各要素に対して行われる。
children が null または undefined の場合はnull または undefined を返す。
Fragmentだった場合は、走査されずつの子要素としてみなす。

今日はここまで

Reactガイドを読んでいくその137

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

isValidElement()

React.isValidElement(object)

オブジェクトがReact要素であることを確認する。
true/falseが戻り値になる。
React要素かどうか判断して条件分岐させるときに使うか。
JSX組み合わせて使っているときに子要素がReactじゃなければreturnとかするのに使っているのを見かけた。

最近ちょっと少なめだけど今日はここまで

Reactガイドを読んでいくその136

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

createFactory()

React.createFactory(type)

React.createElement()と同様のtypeを受け、与えられた型の React 要素を生成する関数を返す。
機能としては残っているがレガシーの枠に入る機能のため、使う場合はJSX かReact.createElement()を選択するのが良いらしい。
リファクタリング対象になるってことなのかな。

JSXを使ってない場合には有効に機能することがあるようだ。

今日はここまで

Reactガイドを読んでいくその135

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

cloneElement()

React.cloneElement(
  element,
  [props],
  [...children]
)

elementから新しいReact要素を複製して返す。
結果の要素は元のpropsと新しいpropsが浅くマージされたものを持つ。

新しい子要素は既存の子要素を置き換え、keyとrefは元の要素からそのまま。
このAPIはReact.addons.cloneWithProps()の代替として導入された過去がある。

今日はここまで

Reactガイドを読んでいくその134

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

createElement()

React.createElement(
  type,
  [props],
  [...children]
)
````
与えられた型の新しいReact要素を作成して返す。  
typeにはタグ名の文字列、React component、React fragmentのいずれかがくる。  
JSXで書かれたコードはReact.createElement()を用いるコードに変換されているため  
通常React.createElementを呼び出すことはない。  

今日はここまで

Reactガイドを読んでいくその133

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

React.memo

React.PureComponentと似ているが、クラスではなく関数コンポーネント用の高階コンポーネントになる。
propsを与えられたあるコンポーネントが同じ結果をレンダーする場合、結果を記憶してパフォーマンス向上に役立てるためにReact.memoを使ってラップすることができる。

メモがある場合はReact側はコンポーネントのレンダーをスキップして最後のレンダー結果を再利用する。

注意が必要なのはReact.memoはpropsの変更に対してのみ効果がある。
useState や useContext をフックして使っていた場合、stateやコンテクストの変化に応じた再レンダーが発生する。
デフォルトではpropsのオブジェクト内の複雑なオブジェクトは浅い比較のみが行われ、階層が深い比較は対象とならない。
2番目の引数でカスタム比較関数を指定することで制御をすることができる。
こういった方法はバグを生み出しやすいため、パフォーマンスチューニングにのみ使用するようにする。

function MyComponent(props) {
  /* render using props */
}
function areEqual(prevProps, nextProps) {
  /*
  nextProps を render に渡した結果が
  prevProps を render に渡した結果となるときに true を返し
  それ以外のときに false を返す
  */
}
export default React.memo(MyComponent, areEqual);

今日はここまで

Reactガイドを読んでいくその132

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

React.PureComponent

React.Componentと似たReact.PureComponentは propsとstateを浅く比較することでReact.Componentが持っていない shouldComponentUpdate()を実装していることが異なる。

Reactコンポーネントのrender()が同じpropsとstateを与えられたときに同じ結果をレンダーするときはパフォーマンスを向上させるためにReact.PureComponentを使用できる。

shouldComponentUpdate()はあくまでも浅い部分での比較となるので、深い部分に差分があった場合は差分がないとみなされてしまう場合があるので注意が必要。
深いデータ構造を持ったものを使う場合はイミュータブルなオブジェクトの使用を検討する。

今日はここまで