Apakah tulisan tanpa kewarganegaraan bertindak balas?

Kaedah tindak balas penulisan tanpa kewarganegaraan ialah "{props.xxx}". Komponen tanpa kewarganegaraannya digunakan terutamanya untuk menentukan templat, menerima data yang dihantar daripada prop komponen induk dan menggunakan ungkapan "{props.xxx }" Letakkan prop ke dalam templat.

Persekitaran pengendalian artikel ini: sistem Windows 7, react17.0.1, Dell G3.

Apakah cara untuk menulis tanpa kewarganegaraan sebagai tindak balas?

Cara menulis komponen stateless dan stateful komponen dalam React and the difference

Komponen dalam React terbahagi terutamanya kepada dua kategori: komponen stateless dan komponen stateful.

1. Komponen tanpa kewarganegaraan digunakan terutamanya untuk mentakrifkan templat, menerima data yang dihantar daripada prop komponen induk dan menggunakan ungkapan {props.xxx} untuk memasukkan prop ke dalam templat. Komponen tanpa kewarganegaraan harus memastikan templat tulen untuk memudahkan penggunaan semula komponen. Buat komponen stateless seperti berikut:

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

2 Komponen stateful digunakan terutamanya untuk mentakrifkan logik interaksi dan data perniagaan (jika Redux digunakan, data perniagaan boleh diekstrak dan diuruskan secara seragam), gunakan {this.state.xxx} melekapkan data perniagaan ke contoh komponen kontena (komponen stateful juga boleh dipanggil komponen kontena, dan komponen stateless juga boleh dipanggil komponen paparan), dan kemudian hantar prop kepada komponen paparan, dan komponen paparan Terima prop dan masukkan props ke dalam templat. Cipta komponen stateful seperti berikut:

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

Ini ialah kaedah penulisan lalai rasmi Dalam pembina, parameter diluluskan secara lalai, dan kaedah super() dipanggil untuk mendapatkan contoh subkelas. . Tetapi apa yang lebih mengelirukan ialah mengapa parameter ini harus diluluskan, dan apakah kegunaan lulus parameter ini?

Oleh kerana dari perspektif komponen dalam render(), pembina boleh mendapatkan atribut props pada contoh komponen tanpa lulus parameter. Seperti berikut:

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}依然获取到了值
        );
    };
};

Ini lebih mudah difahami, kerana kaedah render() ialah kaedah pada prototaip subkomponen Apabila mendapatkan atribut contoh, ia mesti diakses melalui ini , ia tidak boleh diperolehi.

Kemudian persoalan datang, bagaimana jika kita mahu mengakses prop dalam pembina? Pada ketika ini, kita perlu lulus parameter props dalam pembina pembina supaya kita boleh mengakses atribut props pada contoh subkomponen. Seperti berikut:

class Header extends React.Component {
    constructor(props) {
        super();
        this.name = props.name;  //获取到子组件实例上的props.name属性，赋值给实例属性name
    };
    render() {
        return (
            <p>{this.name}</p>
        );
    };
};

Ada satu lagi soalan, kenapa kita perlu lulus atribut props dalam kaedah super(props)? Lihat contoh berikut:

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

Malah, nilai props.name dan this.props.name adalah sama, tetapi ia masih berbeza adalah sub-komponen. Atribut props, tetapi props dalam this.props.name bukanlah prop atribut subkomponen Walaupun nilainya adalah sama, props ini sebenarnya dihantar ke Komponen kelas induk apabila super kaedah dipanggil, jadi .props.name ini memperoleh atribut props dalam kelas induk Komponen. Lihat kod sumber React:

Perhatikan bahawa kaedah super subkelas menghantar parameter props kepada Komponen kelas induk, dan Komponen melekapkan parameter props pada prop atribut instancenya. Oleh itu, anda hanya boleh menggunakan ini dalam pembina dengan menghantar parameter props kepada kaedah super, props.xxx

Jika parameter props tidak diluluskan dalam kaedah super, ralat akan dilaporkan apabila mendapat nilai daripada ini.props.name. Dapatkan ini.props dan paparkannya sebagai tidak terurai: seperti berikut:

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

Intipati kaedah penulisan ini adalah untuk menetapkan prop atribut instance bagi Pengepala sub-komponen kepada atribut instance state.nameOne dan state .nameTwo daripada Pengepala sub-komponen Ia adalah mudah, dalam erti kata lain, subkomponen Pengepala mencipta atribut keadaan, dan kemudian menetapkan atribut props sendiri kepada atribut keadaannya sendiri.

Mengapa this.props dicetak tidak ditentukan? Oleh kerana prop ialah parameter yang diluluskan semasa memanggil subkomponen, prop tidak boleh diakses di dalam pembina, jadi untuk this.props.name, tidak ada keraguan bahawa ralat akan dilaporkan.

Jadi, untuk parameter props dalam pembina dan parameter props dalam super, jika anda tidak menggunakan this.props dan props dalam pembina, anda tidak perlu lulus parameter sama sekali. Jika tidak, lulus rujukan. Tetapi nilai yang diperoleh adalah sama untuk ini. prop dan prop, jadi anda boleh menulis salah satu. Walau bagaimanapun, kedua-dua parameter ditulis dalam dokumentasi rasmi. Jadi demi ketegasan, mari kita tulis semuanya.

Namun, saya secara peribadi masih menyukai cara penulisan ini.

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

Yang tanpa ini adalah nilainya, dan yang dengan ini adalah kuncinya.

Komponen dalam React terbahagi terutamanya kepada dua kategori: komponen tanpa status dan komponen stateful.

1. Komponen tanpa kewarganegaraan digunakan terutamanya untuk mentakrifkan templat, menerima data yang dihantar daripada prop komponen induk dan menggunakan ungkapan {props.xxx} untuk memasukkan prop ke dalam templat. Komponen tanpa kewarganegaraan harus memastikan templat tulen untuk memudahkan penggunaan semula komponen. Buat komponen stateless seperti berikut:

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

2 Komponen stateful digunakan terutamanya untuk mentakrifkan logik interaksi dan data perniagaan (jika Redux digunakan, data perniagaan boleh diekstrak dan diuruskan secara seragam), gunakan {this.state.xxx} melekapkan data perniagaan ke contoh komponen kontena (komponen stateful juga boleh dipanggil komponen kontena, dan komponen stateless juga boleh dipanggil komponen paparan), dan kemudian hantar prop kepada komponen paparan, dan komponen paparan Terima prop dan masukkan props ke dalam templat. Cipta komponen stateful seperti berikut:

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

Ini ialah kaedah penulisan lalai rasmi Dalam pembina, parameter diluluskan secara lalai, dan kaedah super() dipanggil untuk mendapatkan contoh subkelas. . Tetapi apa yang lebih mengelirukan ialah mengapa parameter ini harus diluluskan, dan apakah kegunaan lulus parameter ini?

Oleh kerana dari perspektif komponen dalam render(), pembina boleh mendapatkan atribut props pada contoh komponen tanpa lulus parameter. Seperti berikut:

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}依然获取到了值
        );
    };
};

Ini lebih mudah difahami, kerana kaedah render() ialah kaedah pada prototaip subkomponen Apabila mendapatkan atribut contoh, ia mesti diakses melalui ini , ia tidak boleh diperolehi.

Kemudian persoalan datang, bagaimana jika kita mahu mengakses prop dalam pembina? Pada ketika ini, kita perlu lulus parameter props dalam pembina pembina supaya kita boleh mengakses atribut props pada contoh subkomponen. Seperti berikut:

class Header extends React.Component {
    constructor(props) {
        super();
        this.name = props.name;  //获取到子组件实例上的props.name属性，赋值给实例属性name
    };
    render() {
        return (
            <p>{this.name}</p>
        );
    };
};

Ada satu lagi soalan, kenapa kita perlu lulus atribut props dalam kaedah super(props)? Lihat contoh berikut:

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

Malah, nilai props.name dan this.props.name adalah sama, tetapi ia masih berbeza adalah sub-komponen. Atribut props, tetapi props dalam this.props.name bukanlah prop atribut subkomponen Walaupun nilainya adalah sama, props ini sebenarnya dihantar ke Komponen kelas induk apabila super kaedah dipanggil, jadi .props.name ini memperoleh atribut props dalam kelas induk Komponen. Lihat kod sumber React:

Perhatikan bahawa kaedah super subkelas menghantar parameter props kepada Komponen kelas induk, dan Komponen melekapkan parameter props pada prop atribut instancenya. Oleh itu, anda hanya boleh menggunakan ini dalam pembina dengan menghantar parameter props kepada kaedah super, props.xxx

Jika parameter props tidak diluluskan dalam kaedah super, ralat akan dilaporkan apabila mendapat nilai daripada ini.props.name. Dapatkan ini.props dan paparkannya sebagai tidak terurai: seperti berikut:

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

Intipati kaedah penulisan ini adalah untuk menetapkan prop atribut instance bagi Pengepala sub-komponen kepada atribut instance state.nameOne dan state .nameTwo daripada Pengepala sub-komponen Ia adalah mudah, dalam erti kata lain, subkomponen Pengepala mencipta atribut keadaan, dan kemudian menetapkan atribut props sendiri kepada atribut keadaannya sendiri.

Mengapa this.props dicetak tidak ditentukan? Oleh kerana prop ialah parameter yang diluluskan semasa memanggil subkomponen, prop tidak boleh diakses di dalam pembina, jadi untuk this.props.name, tidak ada keraguan bahawa ralat akan dilaporkan.

Jadi, untuk parameter props dalam pembina dan parameter props dalam super, jika anda tidak menggunakan this.props dan props dalam pembina, anda tidak perlu lulus parameter sama sekali. Jika tidak, lulus rujukan. Tetapi nilai yang diperoleh adalah sama untuk ini. prop dan prop, jadi anda boleh menulis salah satu. Walau bagaimanapun, kedua-dua parameter ditulis dalam dokumentasi rasmi. Jadi demi ketegasan, mari kita tulis semuanya.

Namun, saya secara peribadi masih menyukai cara penulisan ini.

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

Yang tanpa ini adalah nilainya, dan yang dengan ini adalah kuncinya.

Pembelajaran yang disyorkan: "

tutorial video bertindak balas"

Atas ialah kandungan terperinci Apakah tulisan tanpa kewarganegaraan bertindak balas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!