Einige wichtige Tools für einen Rockstar-Entwickler
Hallo Habr. Im Rahmen der Rekrutierung für den Kurs " React.js Developer " haben wir eine Übersetzung des Materials vorbereitet.
Wir laden alle zur offenen Demo-Lektion "Webpack and Babel" ein . In dieser Lektion werden wir uns mit modernen und leistungsstarken JavaScript-Chips befassen - Webpack und Babel. Wir zeigen Ihnen, wie Sie mit Webpack ein React-Projekt von Grund auf neu erstellen. Begleiten Sie uns!
ReactJS hat standardmäßig eine hohe Leistung. Aber von Zeit zu Zeit haben Sie die Chance, es noch besser zu machen. Und die wundervolle React-Community hat sich dafür einige fantastische Bibliotheken ausgedacht.
Heute werden wir über sieben solcher Bibliotheken sprechen, die die Qualität Ihres Codes verbessern und gleichzeitig die Leistung verbessern können.
Lasst uns beginnen.
... ... ...
1. Abfrage reagieren
, React Query, React.
. , . . , Redux.
React Query
. .
const useFetch = (url) => {
const [data, setData] = useState();
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState(false);
useEffect(() => {
const fetchData = async () => {
setIsError(false);
setIsLoading(true);
try {
const result = await fetch(url);
setData(result.data);
} catch (error) {
setError(error);
}
setIsLoading(false);
};
fetchData();
}, [url]);
return {data , isLoading , isError}
}
() React Query
, React Query. , .
import { useQuery } from 'react-query'
const { isLoading, error, data } = useQuery('repoData', () =>
fetch(url).then(res =>res.json()
)
)
, .
. . .
2. React Hook Form
React Hook Form - , .
-.
(UI)
, , React Hook Form .
React Hook Form
.
function LoginForm() {
const [email, setEmail] = React.useState("");
const [password, setPassword] = React.useState("");
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
console.log({email, password});
}
return (
<form onSubmit={handleSubmit}>
<input
type="email"
id="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<input
type="password"
id="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
</form>
);
}
React Form
React Hook Form.
function LoginForm() {
const { register, handleSubmit } = useForm();
const onSubmit = data => console.log(data);
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {...register("email")} />
<input {...register("password")} />
<input type="submit" />
</form>
);
}
. .
. . .
3. React Window
React Window . , 1 000 . , 1000 .
. .
1 000
import React, {useEffect, useState} from 'react';
const names = [] // 1000 names
export const LongList = () => {
return <div>
{names.map(name => <div> Name is: {name} </div>)}
<div/>
}
1000 , 10-20 .
React Window
React Window.
import { FixedSizeList as List } from 'react-window';
const Row = ({ index, style }) => <div style={style}> Name is {names[index]}</div>
const LongList = () => (
<List
height={150}
itemCount={1000}
itemSize={35}
width={300}
>
{Row}
</List>
);
, . , , .
. . .
4. React LazyLoad
- , , . , , .
React LazyLoad - , . , .
LazyLoad
, .
import React from 'react';
const ImageList = () => {
return <div>
<img src ='image1.png' />
<img src ='image2.png' />
<img src ='image3.png' />
<img src ='image4.png' />
<img src ='image5.png' />
</div>
}
LazyLoad
LazyLoad.
import React from 'react';
import LazyLoad from 'react-lazyload';
const ImageList = () => {
return <div>
<LazyLoad> <img src ='image1.png' /> <LazyLoad>
<LazyLoad> <img src ='image2.png' /> <LazyLoad>
<LazyLoad> <img src ='image3.png' /> <LazyLoad>
<LazyLoad> <img src ='image4.png' /> <LazyLoad>
<LazyLoad> <img src ='image5.png' /> <LazyLoad>
</div>
}
. . .
5. (Why Did You Render)
React-. , .
, Why Did You Render, . , , .
.
import React, {useState} from 'react'
const WhyDidYouRenderDemo = () => {
console.log('render')
const [user , setUser] = useState({})
const updateUser = () => setUser({name: 'faisal'})
return <>
<div > User is : {user.name}</div>
<button onClick={updateUser}> Update </button>
</>
}
export default WhyDidYouRenderDemo
.
, , .
. . .
6. Reselect
Redux, . , Redux , - , , , - .
Reselect , , .
, Redux .
. , .
. .
.
import { createSelector } from 'reselect'
const shopItemsSelector = state => state.shop.items
const subtotalSelector = createSelector(
shopItemsSelector,
items => items.reduce((subtotal, item) => subtotal + item.value, 0)
)
const exampleState = {
shop: {
items: [
{ name: 'apple', value: 1.20 },
{ name: 'orange', value: 0.95 },
]
}
}
. . .
7. Deep Equal
Deep Equal - , . . JavaScript, , , , .
.
const user1 = {
name:'faisal'
}
const user2 ={
name:'faisal'
}
const normalEqual = user1 === user2 // false
( ), ( ) .
Deep Equal, 46 . , .
var equal = require('deep-equal');
const user1 = {
name:'faisal'
}
const user2 ={
name:'faisal'
}
const deepEqual = equal(user1 , user2); // true -> exactly what we wanted!
. . .
. , React.
, . !