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

php中世界最好的语言

リリース： 2018-05-26 13:58:46

オリジナル

1851 人が閲覧しました

今回は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中文网其它相关文章！