React Native

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

投稿日:2020年9月25日 更新日:

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

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

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

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

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

<スポンサーリンク>

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('1増えました。')
})
const [variableA, setVariableA] = useState(0);

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

8. ComponentDidMountをuseEffectで代用する

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

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

9. ComponentWillUnmountをuseEffectで代用する

ComponentDidMountは、関数をreturnし、第2引数は空な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は、第2引数を持たないuseEffectで代用します。

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

<スポンサーリンク>

まとめ

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

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

広告

<スポンサーリンク>

広告

<スポンサーリンク>

-React Native
-

執筆者:

関連記事

【React Native】classとfunction、どちらを使うのか

classとfunctionの違いを知りたい。 どちらを使ったらいいのかわからない。 このような疑問に答えます。 React Nativeには、classとfunctionがあり、どちらを中心に使えば…

もっと見る

React Nativeの環境構築の手順【Windows版】

WindowsでReact Nativeの開発環境を構築する方法を知りたい。 このような疑問に答えます。 React Nativeの環境構築の方法にはRect Native Cliを使用する方法とEx…

もっと見る

React Nativeのおすすめの勉強法と進め方【環境構築から学習まで】

React Nativeの学習方法が知りたい。 このような疑問に答えます。 私がReact Nativeを習得した経験を踏まえた上で、React Nativeのおすすめの学習方法をまとめました。 ※こ…

もっと見る

React Nativeの環境構築の手順【MacOS版/M1対応】

MacOSでReact Nativeの開発環境を構築する方法を知りたい。 iOS、Android、それぞれの開発に必要なツールが知りたい。 このような疑問に答えます。 この記事では、MacOSでRea…

もっと見る

React NativeとTypeScriptの開発におすすめな本

React NativeとTypeScriptのおすすめな本を知りたい。 このような疑問に答えます。 React NativeとTypeScriptの日本語の情報はまだ少なく、中々見つかりません。 そ…

もっと見る


comment

メールアドレスが公開されることはありません。

プロフィール

プロフィール

海外経験14年の帰国子女。
未経験からエンジニアに転職。
開発を中心にPLとして活動中。

詳しいプロフィールはこちらから。

広告

<スポンサーリンク>