[react]構成部品

3518 ワード

React テキストリンク

構成部品

のデータが提供されると、対応するUIが作成され、変更が発生すると、所与のタスク

が処理される.

ランダムメソッドを作成し、特殊機能

を追加できます.

1.端末で反応開発用のサーバのみを駆動する

<構成部品宣言方式>
1)関数構成部品

がより便利になると発表した.

メモリリソースがクラス構成部品より少ない

状態と生命APIは利用できないが、応答の更新に伴いhooks機能が導入され、問題が解決された

コード例

import React from 'react';
 
function App() {
    const name = "리액트";
    return (
      <div>{name}</div>
      )
}
export default App;

export default App;
2)クラス構成部品

ステータス機能とライフサイクル機能
定義

ランダムメソッド

render関数が必要であり、そこに表示する必要があるJSX

を返さなければならない.

コード例

import React, { Component } from 'react';
 
class App extends Component {
  render() {
    const name = 'react';
    return <div className="react">{name}</div>;
  }
}
 
export default App;

2.構成部品の作成

構成部品コードの宣言

ファイルリストのsrcディレクトリに新しいファイルを作成する
MyComponent.ファイル名をjs
▶︎ MyComponent.js関数素子

import React from 'react';
 
const MyComponent = () => {
    return <div>함수형 컴포넌트</div>;
};
 
export default MyComponent;
//

= () => {}ES 6に導入された矢印構文.
主に関数をパラメータとして渡すために使用されます.
functionキーワードは矢印関数の構文と大きく異なりませんが、矢印関数を使用するとより簡潔になるため、関数型素子の作成時に矢印構文を使用します.export default MyComponent;別のファイルからこのファイルをインポートする場合は、上記で宣言したMyComponentクラスを読み込みコードに設定します.
▶︎ MyComponent.jsクラス素子

import React, { Component } from 'react';
 
class MyComponent extends Component {
    render() {
        return (
            <div>
                나의 클래스형 컴포넌트
            </div>
        );
    }
}
 
export default MyComponent;

▶︎ App.js

import React from 'react';
import MyComponent from './MyComponent';
//MyComponent.js에 만든 컴포넌트 불러옴
 
const App = () => {
  return <MyComponent />;
};
 
export default App;

Reference

この問題について([react]構成部品), 我々は、より多くの情報をここで見つけました https://velog.io/@sue6e2/React-컴포넌트

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

CSSベース1

ubuntuはAMDグラフィックスドライブをインストールした後、システムの解決方法に入ることができません.