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
-

執筆者:

関連記事

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

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

もっと見る

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

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

もっと見る

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

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

もっと見る

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

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

もっと見る

react-native-calendarsの日本語化とカスタム方法

React Nativeでカレンダーを実装したい。 react-native-calendarsの使い方やカスタム方法が知りたい。 このような疑問に答えます。 〇この記事の内容 react-nativ…

もっと見る


comment

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

プロフィール

プロフィール

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

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

広告

<スポンサーリンク>