クローンエンコーディングの復元2

Map?

各

コールfunc

const friends = ["a", "b", "c"]

friends.map(current => {
	console.log(current);
    return 0;
    })

=> frends = [0, 0, 0]
another example

const foodILike = [
	{
		name : "a",
		image : "a_i"
	},
	{
		name : "b",
		image : "b_i"
	}
]

function Food({name, image}){
	return <div>
		<h2>I love {name}</h2>
		<h2>This is image {image}</h2>
	</div>
}

function App() {
  return (
    <div>
      <h1>hello!</h1>
	  {foodILike.map(dish => (<Food name={dish.name} image={dish.image}/>))}
    </div>
  );
}

index.js:1 Warning: Each child in a list should have a unique "key"prop.

誰もがリスト内の子供smsの唯一のキーアイテムを持っているはずです.

=>各itemdp idを追加しkey={dish.id}を追加して問題を解決
=>keypropはFoodとして伝達できません.これは主にreact内部で使用するためです.

alt prop?

画像要素にはalt支柱が必要であり、これは盲人に提供される機能

である.

alt={name}

Check props

prop-types
:私が受け取った道具が私の欲しい道具かどうかを確認します.
=>転送セクションで発生する可能性のあるエラーを確認する(複数のオプションがある)

ex)

rating : "sdf"
rating : PropTypes.number.isRequired

=> index.js:1 Warning: Failed prop type: Invalid prop rating of type string supplied to Food , expected number .
//proptypeの名前は他に使えません.

render?

reactは、classコンポーネントのプレゼンテーション方法を自動的に実行します.

class App extends React.Component{
	state = {
    	count : 0
    };
	render() {
      return <div>The number is : {this.state.count}</div>;
    }
}

State?

Stateは、propsと同様にAppコンポーネントのレンダリング結果に影響を与えるデータを持つオブジェクトですが、

です.
異なる点は、

props(関数パラメータのように)が要素に渡され、ステータス(関数で宣言された変数のように)が要素で管理されることです.

propsを使用していますが、stateを使用する理由は、使用する側と実現する側を徹底的に分離し、それぞれの利便性を目指しているからです.

州は直接変更してはならない.

なぜclasscomponentをインポートしますか?

州だから
=>stateはオブジェクトであり、componentのデータを格納するスペースがあり、データが変化するため

である.

class App extends React.Component{
	state = {
    	count : 0
    };
    ...
}

このようなものはrender funcの中に置くべきです

reactはclass componentのプレゼンテーションを自動的に実行します.

function component vs class component

関数:一部のコンテンツを返し、

を画面に表示します.

クラス:reactコンポーネントから展開され、

が表示されます.

<button onClick={this.add()}

-> this.add():即時呼び出し
-> this.add:クリック時のみ呼び出す

ボタンをクリックするたびに自動的にレンダリング方法を実行

の下のコードは動作しません(ステータスを直接変更しようとしているため)

class App extends React.Component{
	state = {
    	count : 0
    };
  	add = () => {
  		this.state.count = 1;
  	};
    minus = () => {
  		this.state.count = -1;
  	};
	render() {
      return (
  		<div>
          <h1>The number is : {this.state.count}</h1>
          <button onClick={this.add}>Add</button>
          <button onClick={this.minus}>Minus</button>
  </div>;
    }
}

setStateを呼び出すと、reactはstateをリフレッシュしrender funcを呼び出します.

setStateを使用しない場合、新しいstateを持つrender funcは呼び出されません.

class App extends React.Component{
	state = {
    	count : 0
    };
  	add = () => {
  		this.setState({ count : 1});
  	};
    minus = () => {
  		this.setState({ count : -1});
  	};
	render() {
      return (
  		<div>
          <h1>The number is : {this.state.count}</h1>
          <button onClick={this.add}>Add</button>
          <button onClick={this.minus}>Minus</button>
  </div>;
    }
}

  this.setState({ count : this.state.count + 1});

いいコードじゃない

  this.setState(current => ({ count: current.count + 1}));

stateを設定する場合、reactionで外部状態に依存しない最適な方法

Life cycle method

デフォルトではreactがcomponentを作成および削除する方法

mounting

次の方法は、構成部品インスタンスを作成し、DOMに挿入するときに、順番に呼び出されます.

コンストラクタ():jsでclassを作成するときに呼び出される

render()

コンポーネントDidMount():データを取得します.

updating

propsまたはstateが変更された場合、リフレッシュされます.次の方法は、構成部品の再レンダリング時に順番に呼び出されます.

render()

componentDidUpdate()

unmounting

DOMから構成部品を削除すると、次の方法が呼び出されます.

コンポーネントWillUnmount():コンポーネントが離れたときに呼び出されます.