React でコンポーネントを定義するクラス

今回はReactにおけるクラス定義コンポーネントとは何か、そしてReactでクラス定義コンポーネントを使用する際の注意点について説明します。以下は実践的なケースですので見てみましょう。

React を学び始めて間もなく、教師のチュートリアルでクラス コンポーネントの使用例を見ましたが、情報に矛盾があり、いくつかの疑問が生じました:

• クラスは必要ですか?コンポーネント constructor constructor() を定義しますか?

• super() で props パラメータを渡す必要がありますか?

• バインディングイベントはconstructor()で実行する必要がありますか?

次のように要約された情報を検索します:

クラスコンポーネント:

コンポーネントを定義すると、 関数を使用できます コンポーネントとクラス定義コンポーネントを定義します ()

関数定義コンポーネントの簡単な紹介コンポーネントの定義の違い:

• State は関数コンポーネントでは使用できません。また、コンポーネントの ライフサイクル メソッドも使用できません。

• 関数コンポーネントはすべて props を受け入れる表示コンポーネントです。 DOM のレンダリング

• 関数コンポーネントには this はありませんが、次のように、this.props を使用して メソッドの props を置き換えます。

• クラス ローカル状態およびライフサイクルメソッドをコンポーネントで使用できます。

クラス定義コンポーネントのインスタンス:

<span style="color: #000000">class GreetingInput extends React.Component{<br>//构造函数<br>    constructor(props){<br>        super(props);//将props传入到<a href="http://www.php.cn/code/12195.html" target="_blank">构造方法</a>中<br>        this.state={name:"Tom"};//初始化state的值<br>        this.switchName=this.switchName.bind(this);<br>    }<br>//自定义的switchName方法，用作事件处理<br>    switchName(){<br>       if(this.state.name==="Tom"){<br>          this.setState({name:"Jerry"});//修改state的值<br>        }else{<br>          this.setState({name:"Tom"});<br>        }<br>   } <br>//render方法  渲染在UI上的内容<br>   render(){<br>      return(<br>        <p><br>          <h1>hello,{this.state.name}</h1><br>          <button onClick={this.switchName}>{this.state.name==="Tom"? "Jerry":"Tom"}</button><br>        </p><br>      );<br>   }<br>}   <br>ReactDOM.render(<br>  <GreetingInput/>,document.getElementById("root")<br>);</span>

質問 1: クラスコンポーネントでconstructor()を定義する必要がありますか?

ES6 にはクラスの新しい概念があり、クラスに明示的な定義がない場合は、デフォルトで空のコンストラクター メソッドが追加されます。 constructor 状態とバインディング イベントを初期化するため、状態またはバインディング イベントを初期化する必要がある場合は、コンストラクター メソッドを明示的に定義し、コンストラクター メソッドで状態とバインディング イベントを初期化する必要があります

質問 2:

super の内部には正確に何がありますか() props パラメータを渡さないのですか?

まず、コンストラクタメソッドが明示的に宣言されている場合は、superを呼び出す必要があります。つまり、コンストラクタメソッドがある場合にのみ、superを呼び出す必要があります

またまた、super()に遭遇しました。いくつかの例では、パラメーター props を渡さずに super() と super(props) を使用するにはどうすればよいですか?

React は、コンストラクター メソッドを除くコンポーネント内の任意の場所に props を自動的に設定します。そのため、コンポーネントの非コンストラクター メソッドで props を使用する場合、それを渡さずに直接使用できます。 しかし コンストラクターで props を使用したい場合は、コンストラクターで props にアクセスできるように、props を super に渡す必要があります。そうでない場合は、props を渡す必要はありません。

質問 3: バインディング イベントは、constructor() で実行する必要がありますか?

前述したように、イベントは通常コンストラクターでバインドする必要がありますが、bind を呼び出したくない場合は、次のメソッドを使用することもできます。アロー関数の初期化メソッドの場合、上記の例は次のようになります。

class GreetingInput extends React.Component{//构造函数方法    
constructor(props){
        super(props);        
        this.state={name:"Tom"};
        
    }//自定义的switchName方法，用作事件处理   下边用的是属性初始化语法
    switchName=()=>{       
    if(this.state.name==="Tom"){          
    this.setState({name:"Jerry"});
        }else{          
        this.setState({name:"Tom"});
        }
   } 
//render方法  渲染在UI上的内容   
render(){      
return(        
<p>
          <h1>hello,{this.state.name}</h1>
          <button onClick={this.switchName}>{this.state.name==="Tom"? "Jerry":"Tom"}</button>
        </p>      );
   }
}   
ReactDOM.render(  <GreetingInput/>,document.getElementById("root")
);

関数内の this ポインターは関数自体を指します。 したがって、クラスのコンストラクターでは、イベント関数を のインスタンスにバインドする必要があります。このクラス

但箭头函数里的this指针，指向其拥有者，也就是class ，因此一个简易的方式是，在类中尽可能使用箭头函数定义函数

2、在回调函数中使用箭头函数

class GreetingInput extends React.Component{//构造函数方法    
constructor(props){
        super(props);        
        this.state={name:"Tom"};
        
    }//自定义的switchName方法，用作事件处理    
    switchName(){       
    if(this.state.name==="Tom"){          
    this.setState({name:"Jerry"});
        }else{          
        this.setState({name:"Tom"});
        }
   } 
//render方法  渲染在UI上的内容   使用下边这个语法  有个问题就是每次switchName 渲染的时候都会创建一个不同的回调函数   
render(){      
return(        
<p>
          <h1>hello,{this.state.name}</h1>
          <button onClick={(e) => this.switchName(e)}>{this.state.name==="Tom"? "Jerry":"Tom"}</button>
        </p>      );
   }
}   
ReactDOM.render(  <GreetingInput/>,document.getElementById("root")
);

注意：当回调函数作为一个属性值传入低阶组件，上述这种方法可能会进行额外的重新渲染。

我们通常建议在构造函数中绑定或使用属性初始化器语法来避免这类性能问题。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

正则表达式怎么在字符串中提取数字

Vue.js的表单输入绑定
Reactive Form的自定义验证器

以上がReact でコンポーネントを定義するクラスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。