使用 React Hooks 重构类组件的示例详解_React_

import { Component } from "react"; class ManagingStateClass extends Component { state = { counter: 0, }; increment = () => { this.setState(prevState => { return { counter: prevState.counter + 1, }; }); }; decrement = () => { this.setState(prevState => { return { counter: prevState.counter - 1, }; }); }; render() { return ( 
Count: {this.state.counter}
IncrementDecrement
 ); } } export default ManagingStateClass;

import { useState } from "react"; const ManagingStateHooks = () => { const [counter, setCounter] = useState(0); const increment = () => setCounter(counter => counter + 1); const decrement = () => setCounter(counter => counter - 1); return ( 
Count: {counter}
IncrementDecrement
 ); }; export default ManagingStateHooks;

import { Component } from "react"; class StateChangesClass extends Component { state = { counter: 0, }; componentDidUpdate(prevProps, prevState) { localStorage.setItem("counter", this.state.counter); } increment = () => { this.setState(prevState => { return { counter: prevState.counter + 1, }; }); }; decrement = () => { this.setState(prevState => { return { counter: prevState.counter - 1, }; }); }; render() { return ( 
Count: {this.state.counter}
IncrementDecrement
 ); } } export default StateChangesClass;

import { useState, useEffect } from "react"; const StateChangesHooks = () => { const [counter, setCounter] = useState(0); const increment = () => setCounter(counter => counter + 1); const decrement = () => setCounter(counter => counter - 1); useEffect(() => { localStorage.setItem("counter", counter); }, [counter]); return ( 
Count: {counter}
IncrementDecrement
 ); }; export default StateChangesHooks;

import { Component } from "react"; class FetchingDataClass extends Component { state = { posts: [], }; componentDidMount() { this.fetchPosts(); } fetchPosts = async () => { const response = await fetch("https://jsonplaceholder.typicode.com/posts"); const data = await response.json(); this.setState({ posts: data.slice(0, 10), }); }; render() { return ( 
 {this.state.posts.map(post => { return 
{post.title}
; })} 
 ); } } export default FetchingDataClass

import { useState, useEffect } from "react"; const FetchingDataHooks = () => { const [posts, setPosts] = useState([]); const fetchPosts = async () => { const response = await fetch("https://jsonplaceholder.typicode.com/posts"); const data = await response.json(); setPosts(data.slice(0, 10)); }; useEffect(() => { fetchPosts(); }, []); return ( 
 {posts.map(post => { return 
{post.title}
; })} 
 ); }; export default FetchingDataHooks;

import { Component } from "react"; class CleanupClass extends Component { state = { width: window.innerWidth, height: window.innerHeight, }; componentDidMount() { window.addEventListener("resize", this.updateWindowSize, { passive: true, }); } componentWillUnmount() { window.removeEventListener("resize", this.updateWindowSize, { passive: true, }); } updateWindowSize = () => { this.setState({ width: window.innerWidth, height: window.innerHeight, }); }; render() { return ( 
 Window: {this.state.width} x {this.state.height} 
 ); } } export default CleanupClass;

import { useState, useEffect } from "react"; const CleanupHooks = () => { const [width, setWidth] = useState(window.innerWidth); const [height, setHeight] = useState(window.innerHeight); useEffect(() => { const updateWindowSize = () => { setWidth(window.innerWidth); setHeight(window.innerHeight); }; window.addEventListener("resize", updateWindowSize, { passive: true, }); return () => { window.removeEventListener("resize", this.updateWindowSize, { passive: true, }); }; }, []); return ( 
 Window: {this.state.width} x {this.state.height} 
 ); }; export default CleanupHooks;

import { Component } from "react"; import PreventRerenderClass from "./PreventRerenderClass.jsx"; function randomInteger(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } const fruits = ["banana", "orange", "apple", "kiwi", "mango"]; class PreventRerenderExample extends Component { state = { fruit: null, counter: 0, }; pickFruit = () => { const fruitIdx = randomInteger(0, fruits.length - 1); const nextFruit = fruits[fruitIdx]; this.setState({ fruit: nextFruit, }); }; componentDidMount() { this.pickFruit(); } render() { return ( 
 Current fruit: {this.state.fruit} | counter: {this.state.counter} 
挑一个水果 this.setState(({ counter }) => ({ counter: counter + 1, })) } > Increment  this.setState(({ counter }) => ({ counter: counter - 1 })) } > Decrement 
 ); } } export default PreventRerenderExample;

import { Component } from "react"; class PreventRerenderClass extends Component { shouldComponentUpdate(nextProps, nextState) { return this.props.fruit !== nextProps.fruit; } render() { return ( 
Fruit: {this.props.fruit}
 ); } } export default PreventRerenderClass;

import { useState, useEffect } from "react"; import PreventRerenderHooks from "./PreventRerenderHooks.jsx"; function randomInteger(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } const fruits = ["banana", "orange", "apple", "kiwi", "mango"]; const PreventRerenderExample = () => { const [fruit, setFruit] = useState(null); const [counter, setCounter] = useState(0); const pickFruit = () => { const fruitIdx = randomInteger(0, fruits.length - 1); const nextFruit = fruits[fruitIdx]; setFruit(nextFruit); }; useEffect(() => { pickFruit(); }, []); return ( 
 Current fruit: {fruit} | counter: {counter} 
挑一个水果 setCounter(counter => counter + 1)}> Increment  setCounter(counter => counter - 1)}> Decrement 
 ); }; export default PreventRerenderExample;

import { memo } from "react"; const PreventRerenderHooks = props => { return ( 
Fruit: {props.fruit}
 ); }; export default memo(PreventRerenderHooks);