React でコンポーネントを作成する 3 つの方法は何ですか?

react コンポーネントの 3 つの方法と特徴を以下に紹介しますので、皆様のお役に立てれば幸いです。

1. 機能コンポーネント:

(1) 構文:

function myConponent(props) {
	return `Hello${props.name}`
}

(2) 機能:

追加されたフック API は公式 Web サイトにあります。以前はステートレス コンポーネントでしたが、現在はステートフルにできるようになっています。

コンポーネントはこのオブジェクトにアクセスできません

ライフサイクル メソッドにアクセスできません

(3) 提案:

可能であれば、ステートレス コンポーネントを使用して、コンポーネントをシンプルかつステートレスに保つようにしてください。 [作成者が意味するのは、親コンポーネントを使用して子コンポーネントを制御し、子コンポーネントは表示に使用され、親コンポーネントはロジックを担当することを試みることです]

#2. es5 の React.createClass コンポーネント

(1) 文法:

var myCreate = React.createClass({
	defaultProps: {
		//code
	},
	getInitialState: function() {
		return { //code };
	},
	render:function(){
		return ( //code );
	}
})

(2) 特徴:

このメソッドは比較的古いため、徐々に廃止される予定です

(無料ビデオ チュートリアルの推奨:

javascript ビデオ チュートリアル )

3、es6 モード クラス:

(1) 構文:

class InputControlES6 extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			state_exam: props.exam
		}
		//ES6类中函数必须手动绑定
		this.handleChange = this.handleChange.bind(this);
	}
	handleChange() {
		this.setState({
			state_exam: 'hello world'
		});
	}
	render() {
		return( //code )
	};
}

(2) 機能:

Member 関数は自動バインドされません。これには開発者が手動でバインドする必要があります。そうしないと、現在のコンポーネント インスタンス オブジェクトを取得できません。

State 状態はコンストラクターで初期化されます

props 属性タイプとコンポーネントのデフォルト属性は、コンポーネント インスタンスの属性ではなく、コンポーネント クラスの属性として使用されるため、クラスが使用されます。

コンポーネント作成の基本原則を覚えておいてください:

• コンポーネント名の最初の文字は大文字にする必要があります

• コンポーネントルート ノードのみが含まれます (このルート ノードをラベルで包みたくない場合は、Fragment を導入できます。Fragment の使い方を知らなくても問題ありません。著者の基礎知識を読むことができます)この記事の反応 (1))

• 関数コンポーネントをできるだけシンプルかつステートレスに保つために使用します。

最後に、同じ関数を作成する場合の関数コンポーネントとクラス コンポーネントの違いを比較してみましょう。

親コンポーネントによって制御される状態の比較

関数コンポーネント :

function App(props) {
	function handleClick() {
		props.dispatch({ type: 'app/create' });
	}
	return <div onClick={handleClick}>{props.name}</div>
}

クラス コンポーネント:

class App extends React.Component {
	handleClick() {
		this.props.dispatch({ type: 'app/create' });
	}
	render() {
		return <div onClick={this.handleClick.bind(this)}>{this.props.name}</div>
	}
}

セルフメンテナンス ステータスの比較

import React, { useState } from 'react';
function App(props) {
	const [count, setCount] = useState(0);
	function handleClick() {
		setCount(count + 1);
	}
	return <div onClick={handleClick}>{count}</div>
}

クラス コンポーネント:

class App extends React.Component {
	state = { count: 0 }
	handleClick() {
		this.setState({ count: this.state.count +1 })
	}
	render() {
		return <div onClick={this.handleClick.bind(this)}>{this.state.count}</div>
	}
}

関連する推奨事項:

react チュートリアル

以上がReact でコンポーネントを作成する 3 つの方法は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。