Hooks. If you are a newbie to Hooks, you want to build your application using Hooks. Don’t worry. All you have to do is learn hooks with me, and in half an hour you’ll know React hooks and use them to refactor your project

  • First we need to learn about the Hooks API
  • Understand the four commonly used apis
  • Custom Hooks
  • Better use of the Hooks library
  • Other apis and valuable documentation

First we need to learn about the Hooks API

  1. Based on the API
    • useState
    • useEffect
    • useContext
  2. The other API
    • useReducer
    • useCallback
    • useMemo
    • useRef
    • useImperativeMethods
    • useLayoutEffect

Understand the four commonly used

  • useState
  • useEffect
  • useCallback
  • useRef

useState

const [state, setState] = useState(initialState);
Copy the code

At the time of initial rendering, the state returned is the same as the value passed as the first parameter.

The setState function is used to update state. It accepts a new state value and queues the component for re-rendering.

useEffect

const id = props;
const [value, setValue] = useState(1)
useEffect(() => {
    dosomething();
},[id, value]);
Copy the code

UseEffect the useEffect function plays an important role in the React lifecycle. Unlike componentDidMount and componentDidUpdate, The function passed to useEffect fires after Layout and paint during a delay event. We can also think of useEffect as a collection of lifecycle functions, Before in the life cycle of didMount didUpdate, WillReceiveProps, WillUnmount can function as the first parameter dosomething in useEffect execution. The first argument is the function dosomething(), and the second argument is an array in which dosomething() is executed whenever the IDS and values in the array change.

useCallback

useEffect(() => {
    getDeviceSituation(projectId);
}, [getDeviceSituation, projectId]);

const getDeviceSituation = useCallback((id) => {
  dispatch({
    type: 'runTimeCenter/getDeviceSituation',
    payload: {
      projectId: id,
    },
  });
}, [dispatch]);

const onClickTag = () => {
    getDeviceSituation(projectId);
 };
 return (
    <div onclick = {onClickTag}></div>
 )
Copy the code
  1. UseEffect: To execute a wrapped method in useEffect, the wrapped method must be wrapped with useCallback, and the second argument is to listen for the status value.
  2. UseCallback returns a function that listens for a state value, which can be interpreted as a useEffect with a function return value.

useRef

Two purposes

  1. DOM manipulation (similar to the use of render props), the useRef returns a mutable ref object whose.current property is initialized as an initialValue to be passed. The returned object persists throughout the life of the component.
function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}
Copy the code

2. Instantiate the field to preserve any mutable values

const string = useRef('aaa');
Copy the code

Custom Hooks

function useInputValue(initialValue) {
  const [value, setValue] = useState(initialValue);
  const onChange = (event) =>  {
    setValue(event.currentTarget.value);
  };

  return {
    value,
    onChange
  };
}
function Demo(props){
   const name = useInputValue('sss') 
    return( <input {... name} /> ) }Copy the code

Does it feel like the code is clean so I can fix all the components that are Hooks? Custom Hooks.

Better use of the Hooks library

  1. ESlint plugin for react-hooks rules
  2. React custom hooks library
  3. React Native Custom hooks component library

Other apis and valuable documentation

The other five apis can be found on the official website, but I won’t introduce them here.

A complete guide to Dan useEffect by Hooks