React（メモ）

お作法

React.createClass と Class

// bad
const sample = React.createClass({
  render() {
    return();
  }
});

// good
class sample extends React.PureComponent {
  render() {
    return();
  }
}

メソッド

setState()

• stateを更新するのに使用する
• 前のstateと更新後のstateを元にstateを更新したい

this.setState((prevState, props) => {
  count: prevState.count + props.count
}));

テクニック

条件付きレンダリング

• 条件付き演算子を使用したインラインIf-Else

render() {
  const isLoggedIn = this.state.isLoggedIn.
  return(
    <div>
      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
    </div>
  );
}

その他

key

• どのアイテムが変更されたのか、追加されたのか、削除されたかを識別する
• listコンポーネントとかに使用する
• random()数をkeyに使用するとrender()時に毎回呼ばれてしまうので、idとかを使用する

Fragments

• 今まではコンポーネントから複数のchildrenを返す場合divなどでラップする必要がありました。だが、Fragmentsを使用することでその必要がなくなりました

import React, { Fragment } from 'react';

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // Without the `key`, React will fire a key warning
        <Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </Fragment>
      ))}
    </dl>
  );
}

jsx

htmlFor

• htmlタグの属性forのこと
• labelに付与することで、同じ内容のid属性を持つ要素と関連付けられる

<label htmlFor="namedInput">Name:</label>
<input id="namedInput" type="text" name="name"/>

React Loadable

• ロード状態、エラー状態、タイムアウト、プリロードなどを作成するのに役立つ
  ロード状態：https://github.com/jamiebuilds/react-loadable#creating-a-great-loading-component
  エラー状態：https://github.com/jamiebuilds/react-loadable#loading-error-states
  タイムアウト：https://github.com/jamiebuilds/react-loadable#timing-out-when-the-loader-is-taking-too-long
  プリロード：https://github.com/jamiebuilds/react-loadable#preloading

Error Boundary

reactとreact-domの違い

react

• 下記はReactが元からもっている機能でdivコンポーネントを生成しているだけ

const sample = React.createElement('div');

react-dom

• Reactに実際のDOMノードへ描画を指定できる

const sample = document.getElementId('content');
React.DOM.render(Reactのコンポーネント, sample);

DOM

• DOMとは？

Document Object Model (DOM) は、HTML および XML ドキュメントのための API です。これはドキュメントの構造的な表現を提供し、内容や表示形態の変更を可能にします。
(MDNより)

• ノードとは？

ノードとは各要素(HTMLではエレメントやタグという)自体のことを表す

参考/引用元