ホームページ > 記事 > ウェブフロントエンド > React でコンポーネントを作成する 3 つの方法は何ですか?
react コンポーネントの 3 つの方法と特徴を以下に紹介しますので、皆様のお役に立てれば幸いです。
1. 機能コンポーネント:
(1) 構文:
function myConponent(props) { return `Hello${props.name}` }
(2) 機能:
追加されたフック API は公式 Web サイトにあります。以前はステートレス コンポーネントでしたが、現在はステートフルにできるようになっています。
コンポーネントはこのオブジェクトにアクセスできません
ライフサイクル メソッドにアクセスできません
(3) 提案:
可能であれば、ステートレス コンポーネントを使用して、コンポーネントをシンプルかつステートレスに保つようにしてください。 [作成者が意味するのは、親コンポーネントを使用して子コンポーネントを制御し、子コンポーネントは表示に使用され、親コンポーネントはロジックを担当することを試みることです]
#2. es5 の React.createClass コンポーネント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 属性タイプとコンポーネントのデフォルト属性は、コンポーネント インスタンスの属性ではなく、コンポーネント クラスの属性として使用されるため、クラスが使用されます。 コンポーネント作成の基本原則を覚えておいてください:
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 サイトの他の関連記事を参照してください。