Algunas herramientas esenciales para un desarrollador estrella de rock
Hola, Habr. Como parte del reclutamiento para el curso " React.js Developer " , preparamos una traducción del material.
Invitamos a todos a la lección de demostración abierta "Webpack y babel" . En esta lección, veremos chips JavaScript modernos y potentes: Webpack y Babel. Le mostraremos cómo crear un proyecto React desde cero usando Webpack. ¡Únete a nosotros!
ReactJS tiene un alto rendimiento por defecto. Pero de vez en cuando tienes la oportunidad de mejorarlo aún más. Y la maravillosa comunidad de React ha creado algunas bibliotecas fantásticas para eso.
Hoy vamos a hablar sobre siete de estas bibliotecas que pueden mejorar la calidad de su código al tiempo que mejoran el rendimiento.
Empecemos.
... ... ...
1. Reaccionar consulta
, 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.
, . !