The react of the hook

The usage rules of hook

• Hooks used in function components cannot be used in class components
• Normal functions can’t hook either
• Use hooks in loop conditions

hook

• useState
• useEffect

Function components must have a big camel name

const Example: React.FC = () = > {
    return (
        <>
            Example
        </>)}Copy the code

Click me to watch video tutorial, less detours

UseState hook

const Example: React.FC = () = > {
    const [count, setCount] = useState<number>(0)
    return (
        <>
            <h1>Count the value of {count}</h1>
            <br />
            <Button type='primary' onClick={()= >{setCount(count + 1)}}> Click add 1</Button>
        </>)}Copy the code

Compare the class component to the function component to see what lifecycle the hook hooks into

The declaration cycle of a class component

interface IState {
    count: number
}

class Example1 extends Component<any.IState>{
    constructor(props: any) {
        super(props)
        this.state = {
            count: 0
        }
    }
    add = () = > {
        this.setState((state) = > ({
            count: state.count + 1}}))// Load complete
    componentDidMount() {
        document.title = 'Example1:click ' + this.state.count + ' times'
    }
    // This is updated with state
    componentDidUpdate() {
        document.title = 'Example1:click ' + this.state.count + ' times'
    }
    render() {
        return (
            <>
                <h1>Count the value of {this. State. The count}</h1>
                <br />
                <Button type='primary' onClick={this.add}>Click on add 1</Button>
            </>)}}Copy the code

Hooks are much simpler to initialize the hook with useState and then useEffect the lifecycle

const Example: React.FC = () = > {
    const [count, setCount] = useState<number> (0)
    // Check the component's declaration cycle
    useEffect(() = > {
        document.title = 'click ' + count + ' times'
    })
    return (
        <>
            <h1>Count the value of {count}</h1>
            <br />
            <Button type='primary' onClick={()= >{setCount(count + 1)}}> Click add 1</Button>
        </>)}Copy the code

Side effect hook problem

// Function components should start with a capital letter
const Example: React.FC = () = > {
    const [count, setCount] = useState<number>(0)
    const timer = setInterval(() = > {
        setCount(count + 1)},1000)
    // Check the component's declaration cycle
    useEffect(() = > {
        document.title = 'click ' + count + ' times'
    })
    return (
        <>
            <h1>Count the value of {count}</h1>
            <br />
            <Button type='primary' onClick={()= >{setCount(count + 1)}}> Click add 1</Button>
        </>)}Copy the code

How to solve the problems caused by hook

const Example: React.FC = () = > {
    const [count, setCount] = useState<number>(0)
    const timer = setInterval(() = > {
        setCount(count + 1)},1000)
    // Check the component's declaration cycle
    useEffect(() = > {
        document.title = 'click ' + count + ' times'
        // Check in our component uninstallation lifecycle here
        return () = > {
            clearInterval(timer)
        }
    })
    return (
        <>
            <h1>Count the value of {count}</h1>
            <br />
            <Button type='primary' onClick={()= >{setCount(count + 1)}}> Click add 1</Button>
        </>)}Copy the code

Returns a function that clears side effects

    useEffect(() = > {
        document.title = 'click ' + count + ' times'
        // Check in our component uninstallation lifecycle here
        return () = > {
            clearInterval(timer)
        }
    })
Copy the code

What happens in the class component

class Example1 extends Component<any.IState>{
    constructor(props: any) {
        super(props)
        this.state = {
            count: 0
        }
    }

    private timer: any

    add = () = > {
        this.setState((state) = > ({
            count: state.count + 1}}))// Load complete
    componentDidMount() {
        document.title = 'Example1:click ' + this.state.count + ' times'
        this.timer = setInterval(() = > {
            this.setState((state) = > ({
                count: state.count + 1}})),1000)}// This is updated with state
    componentDidUpdate() {
        document.title = 'Example1:click ' + this.state.count + ' times'
    }
    componentWillUnmount() {
        clearInterval(this.timer)
    }
    render() {
        return (
            <>
                <h1>Count the value of {this. State. The count}</h1>
                <br />
                <Button type='primary' onClick={this.add}>Click on add 1</Button>
            </>)}}Copy the code

Ke.qq.com/webcourse/i…