Help us understand the problem. What is going on with this article?

React (TypeScript): ベストプラクティス

More than 1 year has passed since last update.

React Best Practices

2017末時点での React Component 設計のベストプラクティスを元に、
私の前の勤務先の開発チームで共有していたベストプラクティスの一覧です。改善案や他のベストプラクティスなどのフィードバックを頂けると幸いです。

1. Prettierを利用する。

npx prettier --write <ファイル>

2. React.createClass() を使わない

Reactのv16からcore packageから削除されました。

3. componentWillXXX()を利用しない

Reactのv17でdeprecateされるので以下のlifecycleメソッドの利用を避けてください。

  • componentWillMount()
  • componentWillReceiveProps()
  • componentWillUpdate()

Legacy Lifecycle Methods

4. AJAXの呼び出しはcomponentDidMount() で行う

Axiosやwindow.fetch等でのAJAXの呼び出しはcomponentDidMount()で行なってください。
AJAX and APIs

5. 可能な限り、React.FC (Functional Component)を使う

ES6クラスやReact.createClassよりも[およそ45%パフォーマンスが良い。
45% Faster React Functional Components, Now

6. Class Componentを利用する際にはReact.PureComponentsを使う

propsが変わった場合のみ再レンダリングされるようになる。

7. 可能な限りクラスは継承しない

継承はせずに、propsに違う値を渡す。

8. 内部関数で子Componentをrenderしない

別Componentに切り出しましょう。

9. Propsに何も渡してないFunctional ComponentはReact.memoでラップしない。

Shallow Equalが実行される分だけ、React.FCよりも遅くなります。
本当は怖いReact.memo

10. テンプレート文字列を利用する。

可読性を上げるために、可能な限りテンプレート文字列を利用してください。

ES6以前の書き方

const url = '/api/' + this.state.uri

推奨される書き方

const url = `/api/${this.state.uri}`

11. ES6 分割代入を利用する

JSXの可読性を上げるために、render()の中のpropsstateは分割代入してください。Functional Componentの場合は、propsのみ分割代入してください。

Class Component

public render() {
    const { header, body } = this.props
    const { value } = this.state
    return (
        <div>
           <h1>{header}</h1>
           <p>{body}</p>
           <input type="text" value={value} />
        </div>
    )
}

Functional Component

export default SampleComponent: React.FC = props => {
    const { header, body, value } = props
    return (
        <div>
           <h1>{header}</h1>
           <p>{body}</p>
           <input type="text" value={value} />
        </div>
    )
 }
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした