React (cunoscut și sub numele de React.js) este una dintre cele mai populare biblioteci de dezvoltare front-end JavaScript. Iată o colecție de sintaxă și utilizare React pe care le puteți folosi ca ghid sau referință la îndemână.
Exemplu de componentă React
Componentele sunt reutilizabile în React.js. Puteți injecta valoare în recuzită așa cum este prezentat mai jos:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Faisal Arkan" />;
ReactDOM.render(
element,
document.getElementById('root')
);name="Faisal Arkan" va da valoare în {props.name} din function Welcome(props) și returnarea unei componente care a dat valoare de name="Faisal Arkan". După aceea, React va reda elementul în html.
Alte modalități de declarare a componentelor
Există multe modalități de a declara componente atunci când utilizați React.js. Există două tipuri de componente, Fara stare componente și starea de stat componente.
Starea de stat
Componente de tip clasă
class Cat extends React.Component {
constructor(props) {
super(props);
this.state = {
humor: 'happy'
}
}
render() {
return(
<div>
<h1>{this.props.name}</h1>
<p>
{this.props.color}
</p>
</div>
);
}
}Componente fără stare
Componente funcționale (funcția săgeată din ES6)
const Cat = props => {
return (
<div>
<h1>{props.name}</h1>
<p>{props.color}</p>
</div>;
);
};Componente de returnare implicite
const Cat = props =>
<div>
<h1>{props.name}</h1>
<p>{props.color}</p>
</div>;Exemplu React Fragment
Fragmentele sunt o modalitate de a reda mai multe elemente fără a utiliza un element de împachetare. Când încercați să redați elemente fără o etichetă de închidere în JSX, veți vedea mesajul de eroare Adjacent JSX elements must be wrapped in an enclosing tag. Acest lucru se datorează faptului că atunci când JSX transpilează, creează elemente cu numele lor corespunzătoare de etichete și nu știe ce nume de etichetă să utilizeze dacă sunt găsite mai multe elemente.
În trecut, o soluție frecventă la acest lucru a fost utilizarea unui div wrapper pentru a rezolva această problemă. Cu toate acestea, versiunea 16 din React a adus adăugarea de Fragment, ceea ce face ca acest lucru să nu mai fie necesar.
Fragment acționează ca un wrapper fără a adăuga divs inutile la DOM. Îl puteți folosi direct din importul React sau îl puteți deconstrui:
import React from 'react';
class MyComponent extends React.Component {
render(){
return (
<React.Fragment>
<div>I am an element!</div>
<button>I am another element</button>
</React.Fragment>
);
}
}
export default MyComponent;// Deconstructed
import React, { Component, Fragment } from 'react';
class MyComponent extends Component {
render(){
return (
<Fragment>
<div>I am an element!</div>
<button>I am another element</button>
</Fragment>
);
}
}
export default MyComponent;Versiunea 16.2 React a simplificat acest proces în continuare, permițând ca etichetele JSX goale să fie interpretate ca fragmente:
return (
<>
<div>I am an element!</div>
<button>I am another element</button>
</>
);Exemplu de reacție JSX
JSX
JSX este prescurtarea pentru JavaScript XML.
JSX este o expresie care folosește instrucțiuni HTML valide în JavaScript. Puteți atribui această expresie unei variabile și o puteți folosi în altă parte. Puteți combina alte expresii JavaScript valide și JSX în cadrul acestor instrucțiuni HTML plasându-le în paranteze ({}). Babel compilează în continuare JSX într-un obiect de tip React.createElement().
Expresii cu o singură linie și cu mai multe linii
Expresia cu o singură linie este ușor de utilizat.
const one = <h1>Hello World!</h1>;Când trebuie să utilizați mai multe linii într-o singură expresie JSX, scrieți codul într-o singură paranteză.
const two = (
<ul>
<li>Once</li>
<li>Twice</li>
</ul>
);Folosind numai etichete HTML
const greet = <h1>Hello World!</h1>;Combinarea expresiei JavaScript cu etichete HTML
Putem folosi variabile JavaScript în paranteze.
const who = "Quincy Larson";
const greet = <h1>Hello {who}!</h1>;De asemenea, putem apela alte funcții JavaScript în interiorul parantezelor.
function who() {
return "World";
}
const greet = <h1>Hello {who()}!</h1>;Este permisă doar o singură etichetă părinte
O expresie JSX trebuie să aibă o singură etichetă părinte. Putem adăuga mai multe etichete imbricate numai în elementul părinte.
// This is valid.
const tags = (
<ul>
<li>Once</li>
<li>Twice</li>
</ul>
);
// This is not valid.
const tags = (
<h1>Hello World!</h1>
<h3>This is my special list:</h3>
<ul>
<li>Once</li>
<li>Twice</li>
</ul>
);Exemplu de stare de reacție
Statul este locul de unde provin datele.
Ar trebui să încercăm întotdeauna să ne facem starea cât mai simplă posibilă și să minimalizăm numărul de componente stabile. Dacă avem, de exemplu, zece componente care au nevoie de date de la stat, ar trebui să creăm o componentă de container care să păstreze starea pentru toate.
Starea este practic ca un obiect global care este disponibil peste tot într-o componentă.
Exemplu de componentă de clasă cu stare:
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
// We declare the state as shown below
this.state = {
x: "This is x from state",
y: "This is y from state"
}
}
render() {
return (
<div>
<h1>{this.state.x}</h1>
<h2>{this.state.y}</h2>
</div>
);
}
}
export default App;Alt exemplu:
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
// We declare the state as shown below
this.state = {
x: "This is x from state",
y: "This is y from state"
}
}
render() {
let x1 = this.state.x;
let y1 = this.state.y;
return (
<div>
<h1>{x1}</h1>
<h2>{y1}</h2>
</div>
);
}
}
export default App;Actualizarea statului
Puteți modifica datele stocate în starea aplicației dvs. utilizând setState metodă pe componentă.
this.setState({ value: 1 });Ține minte că setState este asincron, deci ar trebui să aveți grijă când utilizați starea curentă pentru a seta o nouă stare. Un bun exemplu în acest sens ar fi dacă doriți să creșteți o valoare în starea dvs.
Calea gresita
this.setState({ value: this.state.value + 1 });Acest lucru poate duce la un comportament neașteptat în aplicația dvs. dacă codul de mai sus este apelat de mai multe ori în același ciclu de actualizare. Pentru a evita acest lucru, puteți transmite o funcție de apelare de actualizare către setState în locul unui obiect.
Calea cea buna
this.setState(prevState => ({ value: prevState.value + 1 }));Actualizarea statului
Puteți modifica datele stocate în starea aplicației dvs. utilizând setState metodă pe componentă.
this.setState({value: 1});Ține minte că setState poate fi asincron, deci ar trebui să aveți grijă atunci când utilizați starea curentă pentru a seta o nouă stare. Un bun exemplu în acest sens ar fi dacă doriți să creșteți o valoare în starea dvs.
Calea gresita
this.setState({value: this.state.value + 1});Acest lucru poate duce la un comportament neașteptat în aplicația dvs. dacă codul de mai sus este apelat de mai multe ori în același ciclu de actualizare. Pentru a evita acest lucru, puteți transmite o funcție de apelare de actualizare către setState în locul unui obiect.
Calea cea buna
this.setState(prevState => ({value: prevState.value + 1}));Calea mai curată
this.setState(({ value }) => ({ value: value + 1 }));Când este necesar doar un număr limitat de câmpuri în obiectul de stare, distrugerea obiectului poate fi utilizată pentru cod mai curat.
React State VS Props Exemplu
Când începem să lucrăm cu componentele React, auzim frecvent doi termeni. Sunt state și props. Deci, în acest articol vom explora care sunt acestea și cum diferă acestea.
Stat:
- Starea este ceva pe care îl deține o componentă. El aparține acelei componente particulare în care este definită. De exemplu, vârsta unei persoane este o stare a acelei persoane.
- Starea este mutabilă. Dar poate fi schimbat numai prin acea componentă care o deține. Deoarece eu doar îmi pot schimba vârsta, nu altcineva.
- Puteți schimba o stare folosind
this.setState()
Vedeți exemplul de mai jos pentru a vă face o idee despre stare:
Person.js
import React from 'react';
class Person extends React.Component{
constructor(props) {
super(props);
this.state = {
age:0
this.incrementAge = this.incrementAge.bind(this)
}
incrementAge(){
this.setState({
age:this.state.age + 1;
});
}
render(){
return(
<div>
<label>My age is: {this.state.age}</label>
<button onClick={this.incrementAge}>Grow me older !!<button>
</div>
);
}
}
export default Person;În exemplul de mai sus, age este starea de Person componentă.
Recuzită:
- Recuzita este similară cu argumentele metodei. Acestea sunt transmise unei componente în care este utilizată acea componentă.
- Recuzita este imuabilă. Sunt doar pentru citire.
Vedeți exemplul de mai jos pentru a vă face o idee despre accesorii:
Person.js
import React from 'react';
class Person extends React.Component{
render(){
return(
<div>
<label>I am a {this.props.character} person.</label>
</div>
);
}
}
export default Person;
const person = <Person character = "good"></Person>În exemplul de mai sus, const person = <Person character = "good"></Person> trecem character = "good" prop Person componentă.
Dă rezultate ca „Sunt o persoană bună”, de fapt sunt.
Mai sunt multe de învățat despre State și Recuzită. Multe lucruri pot fi învățate prin scufundarea efectivă în codificare. Deci, murdărește-ți mâinile prin codificare.
Reacționează Exemplu de componentă de ordin superior
În React, a Componenta de ordin superior (HOC) este o funcție care preia o componentă și returnează o componentă nouă. Programatorii folosesc HOC-uri pentru a realiza reutilizarea logică a componentelor.
Dacă ați folosit Redux’s connect, ați lucrat deja cu componente de ordin superior.
Ideea de bază este:
const EnhancedComponent = enhance(WrappedComponent);Unde:
-
enhanceeste componenta de ordin superior; -
WrappedComponenteste componenta pe care doriți să o îmbunătățiți; și -
EnhancedComponenteste noua componentă creată.
Acesta ar putea fi corpul enhance HOC:
function enhance(WrappedComponent) {
return class extends React.Component {
render() {
const extraProp = 'This is an injected prop!';
return (
<div className="Wrapper">
<WrappedComponent
{...this.props}
extraProp={extraProp}
/>
</div>
);
}
}
} În acest caz, enhance returnează un clasă anonimă care se extinde React.Component. Această nouă componentă face trei lucruri simple:
- Redarea
WrappedComponentintr-undivelement; - Transmiterea propriilor sale recuzite către
WrappedComponent; și - Injectarea unui suport suplimentar pentru
WrappedComponent.
HOC-urile sunt doar un model care folosește puterea naturii compoziționale a lui React. Acestea adaugă caracteristici unei componente. Există mult mai multe lucruri pe care le puteți face cu ele!
#Cele #mai #bune #exemple #reacție
Cele mai bune exemple de reacție
