React Class Component vs Function Component

今回の記事にはReact Class Component とReact Function Component.の違い説明したいと思います。

React Class Component

最初のreactのバージョン、全部のreactのコンポーネントはsyntax ES6 Classに書かれていました。

コンポーネントを作る

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        <h1>Hello Devsaurus</h1>
      </div>
    );
  }
}

export default App;

Data Handling

reactでデータを取り持つするときprops & stateに使われる

propsの特徴は読むしかできないと普通は親のコンポーネント
から子供のコンポーネントにデータを送っているのは使われる

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        <Greeting name="Brachio" />
      </div>
    );
  }
}

class Greeting extends Component {
  render() {
    return <h1>Hello {this.props.name}</h1>;
  }
}

export default App;

stateデータが毎回変わるときに取り持つしたいときに使えるです。

そしてstateはコンポーネント以外の中にアクセスしかできない。

もし他のコンポーネントにアクセスしたい場合はpropsに変わらないといけないです。

• state を作る

import React, { Component } from 'react';

class App extends Component {
  state = {
    isVisible: false
  };

  render() {
    return (
      <div>
        <Greeting name="Brachio" />
      </div>
    );
  }
}

class Greeting extends Component {
  render() {
    return <h1>Hello {this.props.name}</h1>;
  }
}

export default App;

• state を更新する

classのコンポーネントに直接stateは変わることが出来ません。

その上のコードにisVisibleFalseからtrueに変わりたいときに

this.state.isVisible = true;

そして特別のメソッドには使わなければならないです。名前はsetState().

具体的に

import React, { Component } from 'react';

class App extends Component {
  state = {
    isVisible: false
  };

  handleClick = () => {
      this.setState({ isVisible: !this.state.isVisible })
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>
          Say Hello
        </button>
        {this.state.isVisible ? <Greeting name="Brachio" /> : <div />}
      </div>
    );
  }
}

class Greeting extends Component {
  render() {
    return <h1>Hello {this.props.name}</h1>;
  }
}

export default App;

setState() なしにstateを変わるのはできないです。

• Lifecycle Methods

ブラウザにコンポーネントを表す間にreact舞台裏でいくつかのメソッドを実行します。

その時に三つの分に分かれているそれは Mounting, Updating とUnmounting.

このReact Lifecycle Methodsのダイアグラムです。

そして例ですけどレンディングあとのコンポーネントはcomponentDidMount()に実行する

import React, { Component } from 'react';

class App extends Component {
  state = {
    isVisible: false,
    text: ""
  };

  componentDidMount() {
    this.setState({ ...this.state, text: "This text show after component is rendered" })
  }

  handleClick = () => {
      this.setState({ isVisible: !this.state.isVisible })
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>
          Say Hello
        </button>
        {this.state.isVisible ? <Greeting name="Brachio" /> : <div />}
        <br />
        <h2>{this.state.text}</h2>
      </div>
    );
  }
}

class Greeting extends Component {
  render() {
    return <h1>Hello {this.props.name}</h1>;
  }
}

export default App;

React Function Component

React Function Component はsyntaxもっと単純とreactHooksが使用できるコンポーネントのタイプです。
reactHooksは関数として他のことを便利するです。例えばstateとかcontextとかです。

コンポーネントを作る

import React from "react";

const App = () => {
  return (
    <div>
      <h1>Hello Devsaurus</h1>
    </div>
  );
}

export default App;

Data Handling

• props

import React from "react";

const App = () => {
 return (
   <div>
     <Greeting name="Brachio" />
   </div>
 );
};

const Greeting = props => {
 const { name } = props;

 return <h1>Hello {name}</h1>;
};

export default App;

• state
  今reactHooksで使ってstateを作る。

import React, { useState } from "react";

const App = () => {
  const [isVisible, setVisible] = useState(false);
  
  return (
    <div>
      <Greeting name="Brachio" />
    </div>
  );
};

const Greeting = props => {
  const { name } = props;

  return <h1>Hello {name}</h1>;
};

export default App;

useState()で２つのこと同時に作ることができますそれはstateのはisVisibleとメソッドsetState()のはSetVisible。

でも注意しなければならないことはusestate()は2つ値を作ったからsetVisibleはstateのisVisibleしか使わないです。

• Update state

import React, { useState } from "react";

const App = () => {
  const [isVisible, setVisible] = useState(false);

  const handleClick = () => {
    setVisible(!isVisible);
  };

  return (
    <div>
      <button onClick={handleClick}>Say Hello</button>
      {isVisible ? <Greeting name="Brachio" /> : <div />}
      <br />
    </div>
  );
};

const Greeting = props => {
  const { name } = props;

  return <h1>Hello {name}</h1>;
};

export default App;

• Lifecycle Methods

このReact Function component Lifecycle Methodsのダイアグラムです。

function component は　componentDidMount() dan componentDidUpdate()と React Hook useEffect()を使うです。

import React, { useState, useEffect } from "react";

const App = () => {
  const [isVisible, setVisible] = useState(false);
  const [text, setText] = useState("");

  useEffect(() => {
    setText("This text show after component is rendered")
  }, [])

  const handleClick = () => {
    setVisible(!isVisible);
  };

  return (
    <div>
      <button onClick={handleClick}>Say Hello</button>
      {isVisible ? <Greeting name="Brachio" /> : <div />}
      <br />
      <h2>{text}</h2>
    </div>
  );
};

const Greeting = props => {
  const { name } = props;

  return <h1>Hello {name}</h1>;
};

export default App;

みんなどちらを選びますか？？

もしよければコメントに言って下さい!!