tanish-kr's learning log

Learning output log

JavaScript React

コンポーネント

コンポーネントによりUIを独立した再利用できる部品に分割し、部品それぞれを分離して考えることが出来るようになる

Reactでは大きく関数コンポーネントとクラスコンポーネントに分けられる

関数コンポーネント

  • 引数としてプロパティ情報(props)を受け取り
  • 戻り値としてReact要素を返す

関数コンポーネントでは以下のことが出来ない

  • State(状態)の管理
  • ライフサイクルメソッドの定義
function Welcome(props) {
  return (
    <h1>Hello, {props.name}</h1>
  );
}

クラスコンポーネント

  • React.Componentクラスを継承する
class Welcome extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    )
  }
}

コンポーネントを組み合わせる

コンポーネントは自身の出力の中で他のコンポーネントを参照できます。これにより、どの詳細度のレベルに置いても、コンポーネントという単一の抽象度を利用できます。

  • Welcomeを3回レンダリングするAppコンポーネント
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById("root")
);

コンポーネントの抽出

コンポーネントをより小さく分割することが推奨されている。目的単位にコンポーネントを切り出していくことで、ビューの再利用性を高めることが出来る。

function Avatar(props) {
  return (
    <img className="Avatar"
      src={props.user.avatarUrl}
      alt={props.user.name}
    />
  );
}

function UserInfo(props) {
  return (
    <div className="UserInfo">
      <Avatar user={props.user} />
      <div className="UserInfo-name">
        {props.user.name}
      </div>
    </div>
  );
}

function Comment(props) {
  return (
    <div className="Comment">
      <UserInfo user={props.author} />
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

propsによるデータ渡し

コンポーネントにデータを渡すには、props(プロパティ)を利用します。

  • コンポーネントを関数で宣言するかクラスで宣言するかに関わらず、自分自身のpropsは決して変更してはならない
  • すべてのReactコンポーネントは、自己のpropsに対して純関数の様に振る舞わなければならない

propsの型を定義する

propsにはJavaScriptで扱える任意の型を渡せてしまう。そのため、propsの型をチェックすることが推奨されている。

主に利用されているライブラリ等

新規でやる場合は、TypeScriptでやったほうがおすすめ

TypeScriptだと、interfaceで型を定義してやればよく、シンプルに記述できる

interface Props {
  name: string
}

interface State {}

class UserName extends React.Component<Props, State> {
  render() {
    <div>
      {this.props.name}
    </div>
  }
};
export default UserName;

最近の記事