ホームページ > 記事 > ウェブフロントエンド > 反応ステートレス書き込みとは何ですか?
反応ステートレス書き込みとは何ですか?
- 藏色散人オリジナル
- 2021-11-26 11:51:341111ブラウズ
react のステートレスな記述メソッドは "{props.xxx}" です。そのステートレス コンポーネントは主にテンプレートの定義、親コンポーネントの props から渡されたデータの受け取り、"{props.xxx" の式の使用に使用されます。 }" 小道具をテンプレートに入れます。
この記事の動作環境: Windows7 システム、react17.0.1、Dell G3。
ステートレスな反応を記述する方法は何ですか?
React でステートレス コンポーネントとステートフル コンポーネントを記述する方法とその違い
##React のコンポーネントは、主にステートレス コンポーネントとステートフル コンポーネントの 2 つのカテゴリに分類されます。 1. ステートレス コンポーネントは主に、テンプレートを定義し、親コンポーネントの props から渡されたデータを受け取り、式 {
props.xxx} を使用して props をテンプレートに詰め込むために使用されます。ステートレス コンポーネントは、コンポーネントの再利用を容易にするためにテンプレートを純粋に保つ必要があります。ステートレス コンポーネントは次のように作成します: var Header = (props) = (
<p>{props.xxx}</p>
);
export default Header
2. ステートフル コンポーネントは主に対話ロジックとビジネス データを定義するために使用されます (Redux を使用するとビジネス データを抽出して均一に管理できます)。 .state.xxx} の式は、ビジネス データをコンテナ コンポーネント (ステートフル コンポーネントはコンテナ コンポーネントと呼ぶこともでき、ステートレス コンポーネントは表示コンポーネントと呼ぶこともできます) のインスタンスにマウントし、表示コンポーネントに props を渡します。表示コンポーネントは小道具を受け取り、小道具をテンプレートに詰め込みます。次のようにステートフル コンポーネントを作成します:
class Home extends React.Component {
constructor(props) {
super(props);
};
render() {
return (
<header></header> //也可以写成<header></header>
)
}
}
export default Home
これは公式のデフォルトの書き込みメソッドです。コンストラクターでは、デフォルトでパラメータを渡す必要があり、サブクラスのインスタンスを取得するには super() メソッドを呼び出す必要があります。 。しかし、さらに混乱するのは、なぜこれらのパラメータを渡す必要があるのか、そしてこれらのパラメータを渡すと何の役に立つのかということです。
render() のコンポーネントの観点から見ると、コンストラクターはパラメーターを渡さずにコンポーネント インスタンスの props 属性を取得できるためです。次のように:
class Home extends React.Component {
constructor() {
super();
};
render (){
return(
<p>
<header></header>
</p>
);
};
};
class Header extends React.Component {
constructor() {
super();
};
render() {
return (
<p>{this.props.name}</p> //构造函数中并没有传递props属性，这里通过{this.props.name}依然获取到了值
);
};
};
これは理解しやすいです。render() メソッドはサブコンポーネント プロトタイプのメソッドであるためです。インスタンス属性を取得するときは、これを通じてアクセスする必要があります。これを削除すると、インスタンス属性にアクセスできなくなります。それらを入手できるようになります。
次に、コンストラクター内のプロパティにアクセスしたい場合はどうすればよいかという疑問が生じます。この時点で、サブコンポーネント インスタンスの props 属性にアクセスできるように、コンストラクター コンストラクターで props パラメーターを渡す必要があります。次のとおりです:
class Header extends React.Component {
constructor(props) {
super();
this.name = props.name; //获取到子组件实例上的props.name属性，赋值给实例属性name
};
render() {
return (
<p>{this.name}</p>
);
};
};
別の質問があります。なぜ super(props) メソッドで props 属性を渡す必要があるのですか?次の例を見てください:
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {
nameOne: props.name,
nameTwo: this.props.name //super()方法中传递了props属性，this.props才可以获取到name属性
}
};
render() {
return (
<p>{this.state.nameOne}{this.state.nameTwo}</p>
);
};
};
実際、props.name と this.props.name の値は同じですが、それでも異なります。props.name の props は、サブコンポーネントの属性 props. ですが、 this.props.name の props はサブコンポーネントの属性 props ではありません。値は同じですが、これらの props は実際にはスーパー メソッドが呼び出されたときに親クラス Component に渡されます。したがって、 this.props .name は、コンポーネントの親クラスの props 属性を取得します。 React のソース コードを見てください:
サブクラスのスーパー メソッドが props パラメーターを親クラス Component に渡し、コンポーネントが props パラメーターをそのインスタンス属性 props にマウントしていることがわかりましたか。したがって、コンストラクターでこれを使用できるのは、props パラメーターをスーパー メソッド props.xxx
に渡すことによってのみです。props パラメーターがスーパー メソッドに渡されていない場合、値を取得するときにエラーが報告されます。 this.props.name の。 this.props を取得し、 uniffed として表示します: 次のように:
class Header extends React.Component {
constructor(props) {
super();
this.state = {
nameOne: this.props.name,
nameTwo: this.props
};
console.log(this.props.name); //报错
console.log(this.props); //undifined
};
render() {
return (
<p>{this.state.nameOne}{this.state.nameTwo}</p>
);
};
};
この記述方法の本質は、サブコンポーネント Header のインスタンス属性 props をインスタンス属性 state.nameOne および state.nameTwo に割り当てることです。簡単に言えば、Header サブコンポーネントは state 属性を作成し、独自の props 属性を独自の state 属性に割り当てます。
this.props が unknown と出力するのはなぜですか? props はサブコンポーネントを呼び出すときに渡されるパラメーターであるため、コンストラクター内で props にアクセスすることはできません。そのため、this.props.name については、間違いなくエラーが報告されます。
したがって、コンストラクターの props パラメーターと super の props パラメーターについては、コンストラクターで this.props と props を使用しない場合、パラメーターを渡す必要はまったくありません。それ以外の場合は、参照を渡します。ただし、this.propsとpropsでは取得される値は同じなので、どちらを書いても大丈夫です。ただし、両方のパラメータは公式ドキュメントに記載されています。厳密にするために、それらをすべて書き留めてみましょう。
しかし、個人的には今でもこの書き方が好きです。
constructor(props) {
super(props);
this.state = {
name: props.name
}
};
これを追加しないものは価値であり、これを追加するものは重要です。
#React のコンポーネントは、主にステートレス コンポーネントとステートフル コンポーネントの 2 つのカテゴリに分類されます。 1. ステートレス コンポーネントは主に、テンプレートを定義し、親コンポーネントの props から渡されたデータを受け取り、式 {props.xxx} を使用して props をテンプレートに詰め込むために使用されます。ステートレス コンポーネントは、コンポーネントの再利用を容易にするためにテンプレートを純粋に保つ必要があります。ステートレス コンポーネントは次のように作成します: var Header = (props) = (
<p>{props.xxx}</p>
);
export default Header
2. ステートフル コンポーネントは主に対話ロジックとビジネス データを定義するために使用されます (Redux を使用するとビジネス データを抽出して均一に管理できます)。 .state.xxx} の式は、ビジネス データをコンテナ コンポーネント (ステートフル コンポーネントはコンテナ コンポーネントと呼ぶこともでき、ステートレス コンポーネントは表示コンポーネントと呼ぶこともできます) のインスタンスにマウントし、表示コンポーネントに props を渡します。表示コンポーネントは小道具を受け取り、小道具をテンプレートに詰め込みます。次のようにステートフル コンポーネントを作成します:
class Home extends React.Component {
constructor(props) {
super(props);
};
render() {
return (
<header></header> //也可以写成<header></header>
)
}
}
export default Home
これは公式のデフォルトの書き込みメソッドです。コンストラクターでは、デフォルトでパラメータを渡す必要があり、サブクラスのインスタンスを取得するには super() メソッドを呼び出す必要があります。 。しかし、さらに混乱するのは、なぜこれらのパラメータを渡す必要があるのか、そしてこれらのパラメータを渡すと何の役に立つのかということです。
render() のコンポーネントの観点から見ると、コンストラクターはパラメーターを渡さずにコンポーネント インスタンスの props 属性を取得できるためです。次のように:
class Home extends React.Component {
constructor() {
super();
};
render (){
return(
<p>
<header></header>
</p>
);
};
};
class Header extends React.Component {
constructor() {
super();
};
render() {
return (
<p>{this.props.name}</p> //构造函数中并没有传递props属性，这里通过{this.props.name}依然获取到了值
);
};
};
これは理解しやすいです。render() メソッドはサブコンポーネント プロトタイプのメソッドであるためです。インスタンス属性を取得するときは、これを通じてアクセスする必要があります。これを削除すると、インスタンス属性にアクセスできなくなります。それらを入手できるようになります。
次に、コンストラクター内のプロパティにアクセスしたい場合はどうすればよいかという疑問が生じます。この時点で、サブコンポーネント インスタンスの props 属性にアクセスできるように、コンストラクター コンストラクターで props パラメーターを渡す必要があります。次のとおりです:
class Header extends React.Component {
constructor(props) {
super();
this.name = props.name; //获取到子组件实例上的props.name属性，赋值给实例属性name
};
render() {
return (
<p>{this.name}</p>
);
};
};
別の質問があります。なぜ super(props) メソッドで props 属性を渡す必要があるのですか?次の例を見てください:
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {
nameOne: props.name,
nameTwo: this.props.name //super()方法中传递了props属性，this.props才可以获取到name属性
}
};
render() {
return (
<p>{this.state.nameOne}{this.state.nameTwo}</p>
);
};
};
実際、props.name と this.props.name の値は同じですが、それでも異なります。props.name の props は、サブコンポーネントの属性 props. ですが、 this.props.name の props はサブコンポーネントの属性 props ではありません。値は同じですが、これらの props は実際にはスーパー メソッドが呼び出されたときに親クラス Component に渡されます。したがって、 this.props .name は、コンポーネントの親クラスの props 属性を取得します。 React のソース コードを見てください:
サブクラスのスーパー メソッドが props パラメーターを親クラス Component に渡し、コンポーネントが props パラメーターをそのインスタンス属性 props にマウントしていることがわかりましたか。したがって、コンストラクターでこれを使用できるのは、props パラメーターをスーパー メソッド props.xxx
に渡すことによってのみです。props パラメーターがスーパー メソッドに渡されていない場合、値を取得するときにエラーが報告されます。 this.props.name の。 this.props を取得し、 uniffed として表示します: 次のように:
class Header extends React.Component {
constructor(props) {
super();
this.state = {
nameOne: this.props.name,
nameTwo: this.props
};
console.log(this.props.name); //报错
console.log(this.props); //undifined
};
render() {
return (
<p>{this.state.nameOne}{this.state.nameTwo}</p>
);
};
};
この記述方法の本質は、サブコンポーネント Header のインスタンス属性 props をインスタンス属性 state.nameOne および state.nameTwo に割り当てることです。簡単に言えば、Header サブコンポーネントは state 属性を作成し、独自の props 属性を独自の state 属性に割り当てます。
this.props が unknown と出力するのはなぜですか? props はサブコンポーネントを呼び出すときに渡されるパラメーターであるため、コンストラクター内で props にアクセスすることはできません。そのため、this.props.name については、間違いなくエラーが報告されます。
したがって、コンストラクターの props パラメーターと super の props パラメーターについては、コンストラクターで this.props と props を使用しない場合、パラメーターを渡す必要はまったくありません。それ以外の場合は、参照を渡します。ただし、this.propsとpropsでは取得される値は同じなので、どちらを書いても大丈夫です。ただし、両方のパラメータは公式ドキュメントに記載されています。厳密にするために、それらをすべて書き留めてみましょう。
しかし、個人的には今でもこの書き方が好きです。
constructor(props) {
super(props);
this.state = {
name: props.name
}
};
これを追加しないものは価値であり、これを追加するものは重要です。
推奨される学習: 「
react ビデオ チュートリアル以上が反応ステートレス書き込みとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。