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

React でコンポーネントを作成する 3 つの方法とその類似点と相違点の紹介:

1. 機能コンポーネント

(推奨チュートリアル: react チュートリアル)

1. 文法

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

2. 機能

新しいフック API については、公式 Web サイトにアクセスしてください。以前はステートレスでしたが、コンポーネントはステートフルにできるようになりました

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

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

3. 提案:

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

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

1. 構文

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

2. 機能

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

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. 機能:

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

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

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

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

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

2. コンポーネントには 1 つのルート ノードのみを含めることができます (このルート ノードをタグで囲みたくない場合は、Fragment

3 を導入できます。機能コンポーネントを使用して、シンプルかつステートレスに保つようにしてください。

最後に、比較してみましょう関数コンポーネントとそのクラスコンポーネント 関数の書き方の違い:

親コンポーネントが制御する状態の比較

関数コンポーネント:

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