class Converter {
  convertToTree(nodes) {
    const rootNodes = nodes.filter(node => !node.parentID)
    const rootNode = rootNodes[0]
    rootNode.children = this.buildChildNode(rootNode, nodes)
    console.log('result', rootNode)
  }

  /**
   * Depth first search
   * @param {*} parentNode
   * @param {*} nodes
   */
  buildChildNode(parentNode, nodes) {
    const parentNodeID = parentNode.id
    const childNodes = []
    nodes.forEach(node => {
      if (node.parentID === parentNodeID) {
        childNodes.push(node)
        if (node.hasChild) {
          node.children = this.buildChildNode(node, nodes)
        }
      }
    })
    return childNodes
  }
}

2018-06-29

表データからツリー構造への変換

Javascript

末尾の表データをツリー構造に変換したく色々トライしていますがうまくいかぬorz
枝の深さの数がそれぞれ違うので途中でおかしくなって破綻するパターン。

週末は普通に休みだし、いい頭の体操になるかなー。

Id	parentID
1
2	1
3	1
4	1
5	1
6	2
7	6
8	6
9	6
10	3
11	3
12	3
13	3
14	4
15	14
16	15
17	4
18	5
19	15
20	19
21	19
22	19
23	19

2018-06-28

Reactでwhy-did-you-update

React

お前は何故更新されたんだ?

why-did-you-updateというReactのレンダリング状況をログ出力してくれるライブラリがあります。

github.com

使い方

アプリのソースコードに以下コードを書きます。どこでもいいです。
さしあたってはエントリーポイントとなるindex.jsか、ReactDOM.renderを最初に定義しているところに書けばいいのではと思います。

import React from 'react';

if (process.env.NODE_ENV !== 'production') {
  const {whyDidYouUpdate} = require('why-did-you-update');
  whyDidYouUpdate(React);
}

使ってみた

このようなログが出ます。Google Chrome Developer Toolなどから容易に確認出来ます。

例をパクらさせて頂きましたが、実際に開発しているアプリケーションに適用するとかなりログが出ること出ること請け合いです。
レンダリング前後のprops, stateの値が確認しやすくなっています。

こいつらの値をshouldComponentUpdateの中で比較してレンダリングする/しないの判断をすることになるかと。
ただ、気をつけて欲しいのが、shouldComponentUpdateを既にコンポーネントに組みこんでいる場合、why-did-you-updateさんが空気を読んでくれます。
次からそのコンポーネントのログが出なくなっちゃいます。
仕組みとしてはAOPっぽい感じがしました。

まとめ

Reactで高パフォーマンス、快適なUXを出すにはいかにコンポーネントのレンダリングを減らすかにもかかっていると思うので、
why-did-you-updateは役立ちます。

Id	parentID
1
2	1
3	1
4	1
5	1
6	2
7	6
8	6
9	6
10	3
11	3
12	3
13	3
14	4
15	14
16	15
17	4
18	5
19	15
20	19
21	19
22	19
23	19

Id	parentID
1
2	1
3	1
4	1
5	1
6	2
7	6
8	6
9	6
10	3
11	3
12	3
13	3
14	4
15	14
16	15
17	4
18	5
19	15
20	19
21	19
22	19
23	19

Id	parentID
1
2	1
3	1
4	1
5	1
6	2
7	6
8	6
9	6
10	3
11	3
12	3
13	3
14	4
15	14
16	15
17	4
18	5
19	15
20	19
21	19
22	19
23	19