React: ライフサイクルメソッド/時間的凝集とhook/機能的凝集

ウィキペディア小見出し辞書

React: ライフサイクルメソッド/時間的凝集とhook/機能的凝集

出典: フリー百科事典『ウィキペディア（Wikipedia）』 (2021/06/26 17:40 UTC 版)

「関心の分離」の記事における「React: ライフサイクルメソッド/時間的凝集とhook/機能的凝集」の解説

Reactはライフサイクルメソッドがもたらした機能的凝集度の低さをhookによって克服し、SoCを実現している。 ライフサイクルメソッドは周期（ライフサイクル）のある時点で自動的に呼び出されるメソッドである。例えばコンストラクタはインスタンス作成時のメソッドであり、onMemberChangedメソッドはメンバ更新時に毎回呼び出されるメソッドである。ライフサイクルメソッドとして時間的に適切な処理を実装すれば、ある時点でおこなわれる処理が一か所に集約され時間的凝集度が高いコードになる（時間的なSoCがおこなわれている）。 例えばタイマー2つによるカウントダウンUIを考える。ライフサイクルメソッドを利用する場合、開始時（constructor）でcount変数を用意し、UI作成時（componentDidMount）にタイマーをセットし、レンダリング時（render）にカウント表示を更新、UI破棄時（componentWillUnmount）にタイマーを破棄する。 class Clock extends React.Component { constructor(props) { super(props); this.state = { countA: 0, countB:0 }; } componentDidMount() { this.timerIDa = setInterval(() => this.tickA(), 1000) this.timerIDb = setInterval(() => this.tickB(), 1000) } componentWillUnmount() { clearInterval(this.timerIDa); clearInterval(this.timerIDb); } tickA() { this.setState({ countA: this.state.countA + 1}); } tickB() { this.setState({ countB: this.state.countB + 1}); } render(){ return

now count: A/{this.state.countA} - B/{this.state.countB}

}} ある時点で何が起きるかが一見してわかる（時間的凝集度が高い）一方、機能的に見ると一連の処理を時間ごとに別の関数に切り出していることになる。また1つのサイクルメソッドの中にタイマーAの処理とタイマーBの処理が混在することになる。このようにライフサイクルメソッドを用いたコードは時間的凝集度が高くても機能的凝集度は低いといえる。そこでReactでは機能的凝集度を高めるhookと名付けられた機能を導入した。hookはライフサイクルメソッドのようなclass interface実装ではなく、関数の暗示的状態（非透過的な参照）を利用している。コンポーネントあたり1つしか持てないライフサイクルメソッドと異なり、関数であるhookは何度でも利用ができる。また各hook関数が状態の保持やライフルサイクルの管理といった個別機能を持つため、機能Aに必要なすべてのhookを1箇所に集めることができる。すなわち機能的凝集度が高い状態、機能的なSoCが実現できる。 function Clock() { // Timer A ///////////////////////////////////////// const [countA, setCountA] = useState(0); useEffect(()=>{ const id = setInterval(() => setCountA(n=>n+1), 1000); return ()=> clearInterval(id) }, []); // Timer A ///////////////////////////////////////// // Timer B ///////////////////////////////////////// const [countB, setCountB] = useState(0); useEffect(()=>{ const id = setInterval(() => setCountB(n=>n+1), 1000); return ()=> clearInterval(id) }, []); // Timer B ///////////////////////////////////////// return

now count: A/{countA} - B/{countB}

} "It can take input from the user and display information, but it should not manipulate the information other than to format it for display." p.96