Para los futuros alumnos del curso "React.js Developer" hemos preparado una traducción del material.
También invitamos a todos a ver un seminario web abierto sobre el tema “ReactJS: Quick Start. Ventajas y desventajas".
. , . , .
2021 , . :
event.target.name
.
this
?
React hooks .
useMemo
.
.
React?
#1:
, OnFirstInputChange
, .
, , ? — .
. onChange
.
. onChange
. , .
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
item1: "",
item2: "",
items: "",
errorMsg: ""
};
this.onFirstInputChange = this.onFirstInputChange.bind(this);
this.onSecondInputChange = this.onSecondInputChange.bind(this);
}
onFirstInputChange(event) {
const value = event.target.value;
this.setState({
item1: value
});
}
onSecondInputChange(event) {
const value = event.target.value;
this.setState({
item2: value
});
}
render() {
return (
<div>
<div className="input-section">
{this.state.errorMsg && (
<p className="error-msg">{this.state.errorMsg}</p>
)}
<input
type="text"
name="item1"
placeholder="Enter text"
value={this.state.item1}
onChange={this.onFirstInputChange}
/>
<input
type="text"
name="item2"
placeholder="Enter more text"
value={this.state.item2}
onChange={this.onSecondInputChange}
/>
</div>
</div>
);
}
}
, . , , .
-, . event.target.name
. , . , onFirstInputChange
onSecondInputChange
.
onInputChange = (event) => {
const name = event.target.name;
const value = event.target.value;
this.setState({
[name]: value
});
};
, ? , , (state). switch .
#2: (binding) this
, , React this
onClick
onChange
. . *this*? this
(event handler) (component’ instance), , .
«», .
class Button extends Component {
constructor(props) {
super(props);
this.state = { clicked: false };
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.props.setState({ clicked: true });
}
render() {
return <button onClick={this.handleClick}>Click me!</button>;
);
}
, CLI createe-react-app
@babel/babel-plugin-transform-class-properties
>=7
babel/plugin-proposal class-properties
<7
.
: (event handler) (arrow function).
. , this
.
class Button extends Component {
constructor(props) {
super(props);
this.state = { clicked: false };
}
handleClick = () => this.setState({clicked: true });
render() {
return <button onClick={this.handleClick}>Click me!</button>;
);
}
! .
#3: React hooks
16.8.0, (state and lifecycle methods) React Hooks. , , .
useState hook. , , hook — React documentation..
Hook? Hook — , «» React. ,
useState
— Hook, React .
Hook? , , . Hook .
-, , setState
hook.
this.setState({
errorMsg: "",
items: [item1, item2]
});
useState
hook. hook react . . , ( ). , .
import React, { useState } from "react";
const App = () => {
const [items, setIems] = useState([]);
const [errorMsg, setErrorMsg] = useState("");
};
export default App;
items
, errorMsg
.
, :
import React, { useState } from "react";
const App = () => {
const [items, setIems] = useState([]);
const [errorMsg, setErrorMsg] = useState("");
return (
<form>
<button onClick={() => setItems(["item A", "item B"])}>
Set items
</button>
</form>
);
};
export default App;
state hooks ( ).
#4: useMemo
Memoization — . , , . .
hook useMemo
(memoized function). Hook useMemo
. React . , , .
, . a
b
. , useMemo hook
.
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
#5: (Pure functions, PF)
React, , . , , - React hooks.
, , .
, ?
— , , (mutable) . . .
React-. , React, . , , . , . .
function ascSort (a, b) {
return a < b ? -1 : (b > a ? 1 : 0);
}
function descSort (a, b) {
return b < a ? -1 : (a > b ? 1 : 0);
}
#6: React Hooks
useState
useMemo React hooks
. , React React hooks, .
React hooks, use, React hooks. , . , React hook .
React-, , 600 . , isScreenSmall
true
. false
. resize .
const LayoutComponent = () => {
const [onSmallScreen, setOnSmallScreen] = useState(false);
useEffect(() => {
checkScreenSize();
window.addEventListener("resize", checkScreenSize);
}, []);
let checkScreenSize = () => {
setOnSmallScreen(window.innerWidth < 768);
};
return (
<div className={`${onSmallScreen ? "small" : "large"}`}>
<h1>Hello World!</h1>
</div>
);
};
, isScreenSmall
. , , React hook.
import { useState, useEffect } from "react";
const useSize = () => {
const [isScreenSmall, setIsScreenSmall] = useState(false);
let checkScreenSize = () => {
setIsScreenSmall(window.innerWidth < 600);
};
useEffect(() => {
checkScreenSize();
window.addEventListener("resize", checkScreenSize);
return () => window.removeEventListener("resize", checkScreenSize);
}, []);
return isScreenSmall;
};
export default useSize;
React hook, use
.
React hook useSize
. useSize
hook , .
React custom hooks — . , use. . , "use", , , hook (). , hook, , rules of hooks ( ).
. !
import React from 'react'
import useSize from './useSize.js'
const LayoutComponent = () => {
const onSmallScreen = useSize();
return (
<div className={`${onSmallScreen ? "small" : "large"}`}>
<h1>Hello World!</h1>
</div>
);
}
:
, , . Asayer — , , , , - . , JS -.
! .