Mais conteúdo relacionado Semelhante a React Back to the Future (20) React Back to the Future13. import React from 'react';
import OtherComponent from './OtherComponent';
const MyComponent = props => (
<div>
<OtherComponent />
</div>
);
14. import React from 'react';
import OtherComponent from './OtherComponent';
const MyComponent = props => (
<div>
<OtherComponent />
</div>
);
15. import React from 'react';
import OtherComponent from './OtherComponent';
const MyComponent = props => (
<div>
<OtherComponent />
</div>
);
19. const MyComponent = (props) =>
<div>
<Suspense fallback={<div>Loading..</div>}>
<OtherComponent />
</Suspense>
</div>
20. const MyComponent = (props) =>
<div>
<Suspense fallback={<div>Loading..</div>}>
<OtherComponent />
</Suspense>
</div>
34. Hard to debug / read
Prop clashing
Wrapper hell
HOC / renderProps
37. class Counter extends React.Component {
state = {
count: 1
};
render() {
return (
<button
onClick={() => this.setState({ count: this.state.count + 1 })}>
{ this.state.count }
</button>
);
}
}
State - Classes
38. class Counter extends React.Component {
state = {
count: 1
};
render() {
return (
<button
onClick={() => this.setState({ count: this.state.count + 1 })}>
{ this.state.count }
</button>
);
}
}
State - Classes
39. class Counter extends React.Component {
state = {
count: 1
};
render() {
return (
<button
onClick={() => this.setState({ count: this.state.count + 1 })}>
{ this.state.count }
</button>
);
}
}
State - Classes
40. const Counter = () => {
const [count, setCount] = useState(1);
return (
<button onClick={() => setCount(count + 1)}>
{ count }
</button>;
)
}
State - Hooks
41. const Counter = () => {
const [count, setCount] = useState(1);
return (
<button onClick={() => setCount(count + 1)}>
{ count }
</button>;
)
}
State - Hooks
42. const Counter = () => {
const [count, setCount] = useState(1);
return (
<button onClick={() => setCount(count + 1)}>
{ count }
</button>;
)
}
State - Hooks
43. const Counter = () => {
const [count, setCount] = useState(1);
return (
<button onClick={() => setCount(count + 1)}>
{ count }
</button>;
)
}
State - Hooks
44. const Counter = () => {
const [count, setCount] = useState(1);
const [value, setValue] = useState(‘’);
return (
<button
onClick={() => setCount(count + 1)}>{ count }
</button>;
)
}
State - Hooks
45. const Counter = () => {
const [count, setCount] = useState(1);
const [value, setValue] = useState(‘’);
return (
<button
onClick={() => setCount(count + 1)}>{ count }
</button>;
)
}
State - Hooks
46. Side Effects - Classes
componentDidMount() {
console.log("effect");
}
componentDidUpdate() {
console.log("effect");
}
52. function useCurrentWidth() {
const [width, setWidth] = useState(
() => document.body.clientWidth
);
const resize = () => {
setWidth(document.body.clientWidth);
}
useEffect(() => {
window.addEventListener('resize', resize);
return () => window.removeEventListener('resize', resize);
}, []);
return width;
}
53. function useCurrentWidth() {
const [width, setWidth] = useState(
() => document.body.clientWidth
);
const resize = () => {
setWidth(document.body.clientWidth);
}
useEffect(() => {
window.addEventListener('resize', resize);
return () => window.removeEventListener('resize', resize);
}, []);
return width;
}
54. function useCurrentWidth() {
const [width, setWidth] = useState(
() => document.body.clientWidth
);
const resize = () => {
setWidth(document.body.clientWidth);
}
useEffect(() => {
window.addEventListener('resize', resize);
return () => window.removeEventListener('resize', resize);
}, []);
return width;
}
55. function useCurrentWidth() {
const [width, setWidth] = useState(
() => document.body.clientWidth
);
const resize = () => {
setWidth(document.body.clientWidth);
}
useEffect(() => {
window.addEventListener('resize', resize);
return () => window.removeEventListener('resize', resize);
}, []);
return width;
}
56. const MyComp = () => {
const width = useCurrentWidth();
return <span>{ width }</span>;
}
57. const MyComp = () => {
const user = useCurrentUser();
return <span>{ user.name }</span>;
}
59. How Does React Know?
const [name, setName] = useState(‘’);
const [role, setRole] = useState(‘’);
63. const [count, setCount] = useState(1);
const [count2, setCount2] = useState(1);
Component1
State
Current Cell
Count1
Count2
Current Component
64. const [count, setCount] = useState(1);
const [count2, setCount2] = useState(1);
Component1
State
Current Cell
Count1
Count2
Current Component
70. Rules of Hooks
•Must be used in the same order
•No conditionals, no loops
•Must be called at top level
•Must be called from a functional component
83. React Roadmap
• Suspense for Code Splitting - Already
Shipped 16.6 with
• React Hooks - ~Q1 2019
• Concurrent Mode - ~Q2 2019
• Suspense for Data Fetching - ~mid
2019
• All minor releases