React component　パフォーマンスの最適化(一)：stateを軽くしてください

react　component　を作成すると、コンポーネントのパフォーマンスは非常に重要です。以下の角度からコンポーネントの性能問題を解決します。

1. stateを軽くしてください
2. 再レンダーをできるだけ減少します

まず、第一点です。

stateはコンポーネントがデータを保管する場所です。stateが軽ければ軽いほど、コンポーネントは速くレンダーするはずです。その視点から見ると、ステートができるだけレンダー関連するデータのみ保存するのはお勧めです。

例えば、カウントやリストデータやローディングなどのデータはstateに保管する方が良いです。

一方、レンダー関連ではないデータ、例えばタイマーやIDなど、stateに保管しないでください。そのようなデータが複数のメソッド中で使われると、「this」のプロパティとして用いられます。

以下の例を見てください。

class Hello extends Component {
    componentDidMount() {
        // timerId存储到this中，而不是state中
        this.timerId = setInterval(() => {}, 2000)
    }
    componentWillUnmount() {
    	clearInterval(this.timerId)
    }
    render() { … }
}