Some understanding after learning React Hook

React Hook is the first contact in an interview in September, when the interviewer asked me you know Hook it? I was at that time? ? ? (All of you to make the brain expression package)

Later, anxious to find a job, after the beginning of the entry is also busy, getting almost forgotten this thing. React added that the Chinese version of the Hook after a while I just look at this.

Some read the official document recording the following some of their own records and insights:

stateHook：

       In the absence of hook stateless component refers to a function component, but after its hook assembly process given the function of the state functions, the purpose of the core (usually implemented by HOC and render props in a state before the processing logic of the multiplexing, the individual is generally used HOC).

stateHook use is relatively simple:

const HookTest:SFC = () => {
    const [count, setCount] = useState(0);// 通过useState函数创建函数的state及state的处理函数

    return (
        <div>
            <div>{count}</div>
            <button onClick={() => setCount(count + 1)}>增加</button>
        </div>
    )
}

 Here useState method:

Observation typeScript declaration document useState of:

 See useState accepts any type of a parameter, and returns an array of length 2, the first value in the array is a State, is a function of the second value

Parameter may be a function or a function value, if it has, then the function parameter is a state before update.

effectHook：

effectHook is to distinguish functional logic, the logic function of preventing the life cycle of the various logic code division result in dispersion, effectHook logic processing function codes are all accomplished in vivo, as before without the need to write different life cycles, respectively. effct call to order depends on the order declared in the function assembly. effectHook will delete the original effect on the function of each component update and create a new effect

useEffect use:

import React,{ useState, SFC, useEffect } from 'react';

const HookTest:SFC = () => {
    const [count, setCount] = useState(0);
    const [name, setName] = useState('maxiao')

    useEffect(() => {
        console.log('effect');
        document.title = count.toString();
        if(count > 5){
            setName('hyq');
        }
    },[count]);


    return (
        <div>
            <div>{count}</div>
            <button onClick={() => setCount(count + 1)}>增加</button>
            <div>{name}</div>
        </div>
    )
}

export default HookTest;

Here useEffect method:

Also analyzed according to typeScript document:

The first parameter is a callback function useEffect, the second optional parameter, an array of read-only type.

The callback function is operating you need to be in the DOM after the update is complete, the second argument: a callback will be performed only when the data in the array changes.

 

There useContext (I have not read O (∩_∩) O)

Secondly, there are many derived from the hook, direct official website screenshot it:

Of course, you can also customize your own hook, but this requires a combination of actual business logic for the job.

 

These are their own after watching the official document finishing something out of their own, do not know is not properly understood, and if wrong, hope you noted

 

over