preface

Because React’s functional components are easy to use (as opposed to the Class component), I’ll focus on using functional components to run development. In this blog series, I’m going to share what I’ve learned about the Hook apis.

The Hooks series includes the following:

• useState
• useReducer
• useContext
• useEffect
• useMemo
• useRef
• Customize the Hook

Start with a simple example

export default function App() {
  const initValue = 0;
  const [n, setN] = useState(initValue);
  const add = () = > {
    setN(n + 1);
  };
  return (
    <div className="App">
      <button onClick={add}>+ 1, where n: {n}</button>
    </div>
  );
}
Copy the code

This defines a button that, when clicked, n+1 updates the view.

UseState usage

const [state, setState] = useState(initValue)

UseState takes an initial value, which can be an object or a simple data type.

During initial rendering, the state returned is the same as the value of the first argument (initValue) passed in.

The setState returned is a function that receives a new state value and queues a re-rendering of the component.

The rules

Use Hooks only in React function components.

UseState cannot be used in internal looping, conditional, nested methods.

SetState Asynchronous update

Interface code

export default function App() {
  const initValue = 0;
  const [n, setN] = useState(initValue);
  const add = () = > {
    setN(n + 1);
 +  console.log(n)
 +  setN(n+1)
 +  console.log(n)
  };
  return (
    <div className="App">
      <button onClick={add}>+ 1, where n: {n}</button>
    </div>
  );
}
Copy the code

SetN is asynchronous and cannot be updated immediately. Instead, after all synchronization code is executed, the view is updated again. At this time, the input value of n is still the old value, and has not been updated.

SetN transfer function

SetN can pass functions, taking the old n and returning a new value

The above code works if modified to the following

export default function App() { const initValue = 0; const [n, setN] = useState(initValue); const add = () => { + setN((oldN) => { + console.log(oldN); + return oldN + 1; }); + setN((oldN) => { + console.log(oldN); + return oldN + 1; }); }; <div className="App"> <button onClick={add}>+1, n:{n}</button> </div>; }Copy the code

If possible, it is recommended to use functions in preference.

State can be an object

Call setState when state in useState is an object. UseState does not automatically merge updated objects. You can merge updated objects using a function called setState in conjunction with the expansion operator.

The wrong sample

export default function App() {
  const initValue = { n: 0.m: 0 };
  const [state, setState] = useState(initValue);
  const addN = () = > {
    setState((state) = > {
      return { n: state.n + 1 };
    });
  };
  const addM = () = > {
    setState((state) = > {
      return { m: state.m + 1 };
    });
  };
  return (
    <div className="App">
      <button onClick={addN}>+ 1, where n: {state. N}</button>
      <button onClick={addM}>+ 1, m: {state. M}</button>
    </div>
  );
}
Copy the code

State will not automatically help us merge, so we need to use… Operator to help us manually merge.

The correct sample

export default function App() {
  const initValue = { n: 0.m: 0 };
  const [state, setState] = useState(initValue);
  const addN = () = > {
    setState((state) = >{+return { ...state, n: state.n + 1 };
    });
  };
  const addM = () = > {
    setState((state) = >{+return { ...state, m: state.m + 1 };
    });
  };
  return (
    <div className="App">
      <button onClick={addN}>+ 1, where n: {state. N}</button>
      <button onClick={addM}>+ 1, m: {state. M}</button>
    </div>
  );
}
Copy the code

conclusion

• UseState returns a pair of arrays, the first value being the initial value and the second value being a setter method for state
• If state is an object, we need to merge it manually
• When setState is passed, it can be a function or a value. If you rely on the old state, it is best to use the function form

Reference documentation

Introduction to Ruan Yifeng Hooks

CS_Joe Nuggets share