お作法
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ではエレメントやタグという)自体のことを表す