TIL react 02(アセンブリとアウトライン)

コンポーネントとProps

概念的に、コンポーネントはJavaScript関数に似ています.
propsという入力を受信すると、
反応ユニットに戻ります.
構成部品を定義する最も簡単な方法はJavaScript関数を記述することです.

function Welcome(props) {
  return <h1> Hello, {props.name}</h1>;
}

構成部品の名前は常に大文字で始まる.
この関数は、データを含むpropsオブジェクトパラメータを受信する.
反応素子を戻すので、有効な反応素子です.
これらの素子はJavaScript関数であるため,その名の通り関数素子である.
さらに、classを使用して構成要素を定義することもできる.

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>
  }
}

上記2つの構成部品は同じ構成部品です.
ここで重要なのは、反応器がクラス素子のrender()方法を自動的に実行することである.
classを使用してコンポーネントを作成するには、いくつかの追加機能を使用します.
これについてはstateの処理時に詳しく説明します.

レンダー構成部品

反応素子は、ユーザ定義の素子としても表すことができる.

const element = <Welcome name="Sara" />

ユーザ定義の構成部品で作成されたエンティティが見つかった場合、
JSX言語ツリーとサブアイテムを単一のオブジェクトとしてコンポーネントに渡します.
このオブジェクトはpropsと呼ばれます.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

上記のコードをレンダリングすると、次のことが起こります.

<Welcome name="Sara" />  エリメントロ  コールReactDOM.render().

反応  {name: 'Sara'}を道具に、  Welcome  構成部品を呼び出します.

Welcome  結果は構成部品  <h1>Hello, Sara</h1>  ライセンスを返却します.

応答DOM  <h1>Hello, Sara</h1>  DOMを効果的に更新して要素を一致させる.

Fragments

1つの構成部品に複数の構成部品を戻す方法.

class Table extends React.Component {
  render() {
    return (
      <table>
        <tr>
          <Columns />
        </tr>
      </table>
    );
  }
}

class Columns extends React.Component {
  render() {
    return (
      <div>
        <td>Hello</td>
        <td>World</td>
      </div>
    );
  }
}

このような素子があると仮定する
私が望む出力結果は次のとおりです.

<table>
  <tr>
    <td>Hello</td>
    <td>World</td>
  </tr>
</table>

実際には以下のように出力されます.

<table>
  <tr>
    <div>
      <td>Hello</td>
      <td>World</td>
    </div>
  </tr>
</table>

このようにした原因は以下の通りです.
構成部品は1つの最上位セグメントのみを返さなければなりません.
そのため、Columnsもdivのラベルで子供たちを保護した.Fragementsは、これらの問題を解決するために生じたものである.

class Columns extends React.Component {
  render() {
    return (
      <React.Fragment>
        <td>Hello</td>
        <td>World</td>
      </React.Fragment>
    );
  }
}

Columnsがこのように記述されると、
複数のユニットを出力するようにします.
このように書くときの出力結果は、私が望んでいる出力結果になります.

<table>
  <tr>
    <td>Hello</td>
    <td>World</td>
  </tr>
</table>

Fragmentをより簡潔に書く方法があります.

class Columns extends React.Component {
  render() {
    return (
      <>
        <td>Hello</td>
        <td>World</td>
      </>
    );
  }
}

ただし、fragmentにキーがある場合は、構文で明確に宣言する必要があります.

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // React는 `key`가 없으면 key warning을 발생합니다.
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

条件付きレンダリング

応答では、条件レンダリングはJavaScriptで条件文を使用するのと同じです.
次の2つの構成部品があるとします.

function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}

上記の構成部品を条件付きでレンダリングするには
下図のように記入すればいいです.

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

ReactDOM.render(
  // Try changing to isLoggedIn={true}:
  <Greeting isLoggedIn={false} />,
  document.getElementById('root')
);

if-else文を使用する必要がある場合は、3つの演算子を使用する必要があります.

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
    </div>
  );
}

読みやすさは悪いが、より大きな式にも使用できる.

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      {isLoggedIn
        ? <LogoutButton onClick={this.handleLogoutClick} />
        : <LoginButton onClick={this.handleLoginClick} />
      }
    </div>
  );
}

次の例では、エラーの条件付きレンダリングを作成します.

const tweet = <Tweet writer="Pangho">
  {
    if (nowLearning) {
      return 'React'
    } else {
      return 'Videogame'
    }
  }is Awesome!
</Tweet>

下図のように修正可能です.

function React(props) {
  return <div>React</div>
}

function Videogame(porps) {
  return <div>Videogame</div>
}

function Tweet(props) {
  const user = props.writer;
  return (
    <div> {user}: {nowLearning ? <React /> : <Videogame />}is Awesome!</div>
  )
}

このように記述すると、条件付きレンダリングになります.

Props

関数構成部品またはクラス構成部品は、構成部品自体のpropsを変更できません.
関数は、入力値を変更せずに常に同じ入力値の同じ結果を返します.
純関数と呼ぶ.
反応器はこれらの純粋な関数規則を厳格に守らなければならないからだ.
反応素子は,自分のpropsを操作する際には,純粋な関数のように操作しなければならない.
(同じ入力値については、入力値を変更せずに同じ結果を返します.)

リストとキー

構成部品でリストをレンダリングする方法について
まず、JavaScriptはmap()関数を使用します.
リストを変換する方法を知っています.

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);
console.log(doubled);

上記の例は、JavaScriptで使用されるmap()例である.numbers配列の値を2倍にし、doubled変数に新しい配列を割り当てます.
ログのコードを確認します.
反応においても,アクセサリーリストに配列する方式はほぼ同じである.
Ellimentアクセントを作成し、カッコを使用してJSXに含めることができます.

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li>{number}</li>
)

配列のmap()法と同様に,パラメータとしてコールバック関数に入る値は同じである.

現在処理中の要素(currentValue)

現在処理中の要素のインデックス値

メソッドの配列

これにより、並べた数だけレイヤーを作ることができます.
こうして作られたアクセサリーはlistItemsに保存されている.
これをDOMにレンダリングすればいいです

ReactDOM.render(
  <ul>{listItems}</ul>
  document.getElementById('root')
);

上記の例では、1～5の数字からなるリストを示します.
これを素子にすると、次のようにできます.

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li>{number}</li>
  );
  return (
  <ul>{listItems}</ul>
  )
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />
  document.getElementById('root')
);

問題は、ここでコードを実行すると、リスト内の各項目に鍵を追加する必要があるという警告が表示されます.
keyは、別名リストを作成する際に含める必要がある特殊な文字列属性です.
これらの警告を除去するには、まずlistItemsにkeyを割り当てる必要があります.

  const listItems = numbers.map((number) =>
    <li key={number.toString()}>{number}</li>
  );

keyは、反応器がどの項目を変更、追加、または削除するかを決定するのに役立ちます.
装飾に安定した固有性を与え、内部に並ぶ装飾に指定する.
キーを指定する最善の方法は、アイテムを一意に識別可能な文字列に指定することです.
ほとんどの場合、データのidは鍵として使用されます.
データにidがない場合は、インデックスを鍵として使用します.
DOMノードのサブノードを再帰的に処理する場合、応答はデフォルトで
同時に2つのリストを巡回して、違いがあれば変更します.
キーがない場合、2つのリストは同じなので、違いは見つかりません.
あなたが望むようにリストを変更することはできません.
逆に、キーがある場合は、2つのリストのキー値を比較し、違いを探して変更します.
そういう理由で、必ず鍵が必要です.なぜkeyが必要なの?