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のおすすめの勉強法と進め方【環境構築から学習まで】

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

もっと見る

React NativeプロジェクトにTypeScriptを導入する手順

React NativeプロジェクトをTypeScriptで作成したい。 プロジェクトをTypeScriptに変更したい。 このような疑問に答えます。 TypeScriptはJavaScriptから派…

もっと見る

android-phone

アプリ開発でReact Nativeを使うメリットとデメリット

React Nativeって何? React Nativeを使うメリットが知りたい。 このような疑問に答えます。 アプリ開発を始めるときに、どのフレームワーク、どの言語を選べばいいか迷うと思います。 …

もっと見る

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

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

もっと見る

ESLintとPrettierの導入【React Native & TypeScript】

React NativeとTypeScriptで開発する場合の便利なツールを知りたい。 ESLintやPrettierをプロジェクトやVSCodeに導入する方法が知りたい。 このような疑問に答えます。…

もっと見る


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

プロフィール

プロフィール

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

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

広告

<スポンサーリンク>