Maison > Article > interface Web > Quelques détails de réaction que vous n'avez peut-être pas remarqués ! (Résumer)
Quelques détails de réaction que vous n'avez peut-être pas remarqués ! (Résumer)
- 青灯夜游avant
- 2021-02-11 08:55:532187parcourir
Avez-vous déjà remarqué ces détails en réaction ? L'article suivant résume certains détails de React que vous n'avez peut-être pas remarqués. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.
[Recommandations de didacticiel associées : Tutoriel vidéo React]
Quelques points de connaissances détaillés dans React :
1. L'utilisation des composants get in (comme getter pour les classes)
Connaissances ES6 : les classes de classe également avoir leur propre Le getter et le setter s'écrivent comme suit :
Class Component {
constructor() {
super()
this.name = ''
}
// name的getter
get name() {
...
}
// name的setter
set name(value) {
...
}
}L'utilisation de get dans le composant React est la suivante :
/*
* renderFullName的getter
* 可以直接在render中使用this.renderFullName
*/
get renderFullName () {
return `${this.props.firstName} ${this.props.lastName}`;
}
render() {
return (
<div>{this.renderFullName}</div>
)
}Alors quelle est l'utilisation du getter dans le composant React ? ?
constructor (props) {
super()
this.state = {};
}
render () {
// 常规写法，在render中直接计算
var fullName = `${this.props.firstName} ${this.props.lastName}`;
return (
<div>
<h2>{fullName}</h2>
</div>
);
}// 较为优雅的写法:，减少render函数的臃肿
renderFullName () {
return `${this.props.firstName} ${this.props.lastName}`;
}
render () {
var fullName = this.renderFullName() <div>{ fullName }</div> }// 推荐的做法：通过getter而不是函数形式，减少变量
get renderFullName () {
return `${this.props.firstName} ${this.props.lastName}`;
}
render () {
<div>{ this.renderFullName }</div>
}Si vous connaissez Vue, alors vous connaissez la propriété calculée : {} Sa couche inférieure utilise également le getter, mais le getter de l'objet n'est pas le getter de la classe
// 计算属性，计算renderFullName
computed: {
renderFullName: () => {
return `${this.firstName} ${this.lastName}`;
}
}L'un des avantages du calcul de Vue est :
Propriétés calculées par rapport à l'exécution de fonctions : il y aura une mise en cache, réduisant ainsi les calculs ---> Les propriétés calculées ne seront réévaluées que lorsque leurs dépendances associées changeront . .
Cela signifie que tant que firstName et lastName n'ont pas changé, accéder plusieurs fois à la propriété calculée renderFullName renverra immédiatement le résultat du calcul précédent sans avoir à réexécuter la fonction.
Alors, le getter de React a-t-il également l'avantage de la mise en cache ? ? ? La réponse est : Non, le getter en réaction ne fait pas d'optimisation de la mise en cache !
2. Séquence d'exécution d'attr et d'événement du composant :
A. Composants parent-enfant : sous forme d'accessoires, le parent le transmet à l'enfant
B. Le même composant : le dos recouvre le devant.
En vous basant sur les règles ci-dessus, afin que l'attr ait le poids le plus élevé, il doit être placé dans le composant le plus bas et la position doit être aussi loin que possible.
<-- 父组件Parent | 调用子组件并传递onChange属性 -->
<div>
<Child onChange={this.handleParentChange} />
</div>
<-- 子组件Child | 接收父组件onChange， 自己也有onChange属性 -->
<input {...this.props} onChange={this.handleChildChange} />À ce stade, le onChange exécuté par le composant Child exécute uniquement l'événement handleChildChange et l'événement handleParentChange ne sera pas exécuté.
- 1. Que se passe-t-il si vous avez uniquement besoin d'exécuter handleParentChange manage ? ? En entrée {...this.props} et onChange={this.handleChildChange > Changer de position.
- 2. Que se passe-t-il si les deux événements doivent être exécutés ? ? Dans le composant enfant HandlechildChange Exécuter this.props.handleParentchange La différence entre l'abréviation de méthode sous la forme ES6 : fn = () => {} et fn() {} :
export default Class Child extends Component {
constructor (props) {
super()
this.state = {};
}
// 写法1，这是ES6的类的方法写法
fn1() {
console.log(this)
// 输出 undefined
}
// 写法2，这是react的方法写法
fn2 = () => {
console.log(this)
// 输出：Child {props: {…}, context: {…}, refs: {…}, …}
}
render () {
return (
<div>
<button onClick={this.fn1}>fn1方法执行</button >
<button onClick={this.fn2}>fn2方法执行</button >
</div>
);
}
}Il y a deux façons d'écrire cela, à l'intérieur de la fonction Le pointage est différent. Alors ils n'ont rien en commun ? ? , Les trois situations suivantes sont identiques :
Cas 1 : Lorsque this n'est pas utilisé à l'intérieur de la fonction, les deux sont égaux.// 写法1，这是ES6的类的方法写法
fn1() {
return 1 + 1
}
// 写法2，这是react的方法写法
fn2 = () => {
return 1 + 1
}Cas 2 : Lorsque les deux sont exécutés directement dans le rendu. // 写法1，这是ES6的类的方法写法
fn1() {
console.log(this)
// Child {props: {…}, context: {…}, refs: {…}, …}
}
// 写法2，这是react的方法写法
fn2 = () => {
console.log(this)
// 输出：Child {props: {…}, context: {…}, refs: {…}, …}
}
render () {
return (
<div>
<button onClick={() => {
this.fn1();
}}>fn1方法执行</button >
<button onClick={() => {
this.fn2();
}}>fn2方法执行</button >
</div>
);
}
// 写法1，这是ES6的类的方法写法
fn1() {
console.log(this)
// Child {props: {…}, context: {…}, refs: {…}, …}
}
// 写法2，这是react的方法写法
fn2 = () => {
console.log(this)
// 输出：Child {props: {…}, context: {…}, refs: {…}, …}
}
render () {
return (
<div>
<button onClick={this.fn1}>fn1方法执行</button >
<button onClick={this.fn2.bind(this)}>fn2方法执行</button >
</div>
);
}Remarque, ne le confondez pas avec l'abréviation de méthode de l'objet dans ES6. Voici l'abréviation de méthode de l'objet Objet :
Ruan Yifeng ES6 : http:/. /es6.ruanyifeng.com/#docs/object
4. Référence : https://doc.react-china.org/docs/lists-and-keys.html
La manière normale d'écrire jsx est d'écrire une syntaxe similaire au HTML dans le rendu, avec des balises imbriquées dans des balises e388a4556c0f65e1904146cc1a846beeee638be535987cc982c635f11d15b58f94b3e26ee717c64999d7867364b1b4a3, avec js, utilisez { accolades }.
Mais je ne sais pas si vous avez remarqué que les tableaux peuvent être imbriqués dans les balises et s'afficher normalement.
function NumberList(props) {
const numbers = [1,2,3,4,5];
// listItems是数组numbers通过map返回的，本质也是个数组。
const listItems = numbers.map((number) =>
<li>{number}</li>
);
return (
<ul>
// 可以替换成 [ <li>1</li>, <li>2</li>, .....]
{listItems}
</ul>
);
}Comme indiqué ci-dessus, le tableau à l'intérieur de la balise peut être rendu correctement, il existe alors la méthode d'écriture suivante :
renderItem(name) {
const A = <li key={'a'}>A</li>,
B = <li key={'b'}>B</li>,
C = <li key={'c'}>C</li>,
D = <li key={'d'}>D</li>;
let operationList;
switch (name) {
case 1:
operationList = [A , B, C]
break;
case 2:
operationList = [B, C, D]
break;
case 0:
operationList = [A]
break;
}
return operationList;
}
render() {
// this.renderItem() 执行结果是数组
return (
<ul>{ this.renderItem() }</ul>
)
}更多编程相关知识，请访问：编程视频！！
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!