React Nativeでclassをfunctionに変換する10ステップ

投稿日：2020年9月25日更新日：2021年5月2日

React Native のclassをfunctionに変換したい。

このような疑問に答えます。

React Nativeでモバイルアプリ開発をするとき、functionで作りたくても、多くの資料はclass中心で書かれています。
なのでこの記事では、React Nativeのclassをfunctionに変換する10ステップを解説します。

classとfuntionのどちらを使うかに関しては、【React Native】classとfunction、どちらを使うのかをご覧ください。

◯classをfunctionに変換する１０ステップ

宣言をclassからfunctionに変える
renderメソッドを削除する
classのメソッドを関数に変換する
this.への参照を削除する
コンストラクタを削除し代用する
this.setStateを変換する
ステート更新時の処理にuseEffectを使用する
ComponentDidMountをuseEffectで代用する
ComponentWillUnmountをuseEffectで代用する
ComponentDidUpdateをuseEffectで代用する

＜スポンサーリンク＞

1. 宣言をclassからfunctionに変える

classの宣言の部分をfunctionに変えましょう。

class Sample extends React.Component {
//...
}

↓

function Sample(props) {
//...
}

2. renderメソッドを削除する

functionでは、renderメソッドなしのreturnだけにします。

//...
render(){
  return(
    //...
  )
}
//...

↓

function Sample() {
  //...
  return(
    //...
  )
}

3. classのメソッドを関数に変換する

class中のメソッドは、function内では、関数として宣言する必要がります。

class Sample extends React.Component {

  sampleMethod (e) {
    //...
  }
 
}

↓

function Sample() {

  const sampleMethod = (e) => {
    //...
  }
 
}

4. this.への参照を削除する

this.はclass特有のものです。this.を削除しましょう。

class Sample(props) extends React.Component {
  //...
  sampleMethodA(){
    //...
  }

  sampleMethodB(e){
    this.sampleMethodA()
  }

  render(){
    return(
      <View>
        <Text>{this.props.variableC}</Text>
        <Button onPress={this.sampleMethodB} />
      </View>
    ) 
  }
}

↓

function Sample (props) {
  //...
  sampleMethodA(){
    //...
  }

  sampleMethodB(e){
   sampleMethodA()
  }
  return(
    <View>
      <Text>{props.variableC}</Text>
      <Button onPress={sampleMethodB} />
    </View>
    ) 
}

5. コンストラクタを削除し代用する

functionでのstateの宣言はhooksのuseStateの使用します。
また、bindメソッドを削除します。


//...
constructor(props){
  super(props);
  this.state = {
    variableA = 0,
    variableB = ""
  };
  this.methodA=this.methodA.bind(this);
}
//...

↓

function Sample(props) {

  const [variableA, setVariableA] = useState(0);
  const [variableB, setVariableB] = useState("");

  //...
}

6. this.setStateを変換する

this.setStateを先ほど作成したuseStateのセッター（setVariableAなど）に変換します。

class Sample extends React.Component {
  //...
  onPress(e){
    this.setState({variableA: this.state.variableA + 1})
  }
  //...
}

↓

function Sample (props) {
  const [variableA, setVariableA] = useState(0);

  const onPress = e => {
    setVariableA(variableA + 1);
  }
  //...
}

7. ステート更新時の処理にuseEffectを使用する

ステート（ここではvariableA）の更新時に処理を行う場合は、hooksのuseEffectを使用します。
この場合、useEffectの第2引数は、依存するstateの変数にします。

this.setState({variableA: this.state.variableA + 1}, () => {
  console.log('１増えました。')
})

↓

const [variableA, setVariableA] = useState(0);

useEffect(() => {
  console.log('1増えました。')
}, [variableA])

8. ComponentDidMountをuseEffectで代用する

ComponentDidMountは、空の第２引数を持つuseEffectで代用します。

componentDidMount() {
  console.log('Component Did Mount');
}

↓

useEffect(() => {
  console.log('Component Did Mount');
}, [])

9. ComponentWillUnmountをuseEffectで代用する

ComponentDidMountは、関数をreturnし、第２引数は空なuseEffectで代用します。

componentDidMount() {
  console.log('Component Did Mount');
}

componentWillUnmount() {
  console.log('Component Will Unmount');
}

↓

useEffect(() => {
  console.log('Component Did Mount')

  return () => {
    console.log('Component Will Unmount')
  }
}, [])

10. ComponentDidUpdateをuseEffectで代用する

ComponentDidUpdateは、第２引数を持たないuseEffectで代用します。

componentDidUpdate() {
  console.log('Component Did Update');
}

↓

useEffect(() => {
  console.log('Component Did Update');
})

＜スポンサーリンク＞

まとめ

以上がReact Nativeでclassをfunctionに変換する10ステップになります。

ぜひ参考にして、function中心のコードを書いてみてください！

執筆者：tegral