反応ステートレス書き込みとは何ですか?-フロントエンドQ&A-php.cn

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 から渡されたデータを受け取り、式 {

var Header = (props) = (
    <p>{props.xxx}</p>
);
export default Header

ログイン後にコピー

class Home extends React.Component {
    constructor(props) {
        super(props);
    };
    render() {
        return (
            <header></header>  //也可以写成<header></header>
        )
    }
}
export default Home

ログイン後にコピー

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() メソッドはサブコンポーネントプロトタイプのメソッドであるためです。インスタンス属性を取得するときは、これを通じてアクセスする必要があります。これを削除すると、インスタンス属性にアクセスできなくなります。それらを入手できるようになります。

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 のソースコードを見てください:

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>
        );
    };
};

ログイン後にコピー

しかし、個人的には今でもこの書き方が好きです。

constructor(props) {
    super(props);
    this.state = {
        name: props.name
    }
};

ログイン後にコピー

これを追加しないものは価値であり、これを追加するものは重要です。

推奨される学習: 「

react ビデオチュートリアル

」

以上が反応ステートレス書き込みとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

反応ステートレス書き込みとは何ですか?

render() のコンポーネントの観点から見ると、コンストラクターはパラメーターを渡さずにコンポーネント インスタンスの props 属性を取得できるためです。次のように:

render() のコンポーネントの観点から見ると、コンストラクターはパラメーターを渡さずにコンポーネント インスタンスの props 属性を取得できるためです。次のように:

render() のコンポーネントの観点から見ると、コンストラクターはパラメーターを渡さずにコンポーネントインスタンスの props 属性を取得できるためです。次のように:

render() のコンポーネントの観点から見ると、コンストラクターはパラメーターを渡さずにコンポーネントインスタンスの props 属性を取得できるためです。次のように: