前言

还有即将在国外投身秋招的小伙伴吗？本文是将在写大项目过程中用到的实践React useState心得翻译成英文的笔记，给将要在国外面试和在国内想学习英文的小伙伴们都做个参考~

React useState

• const [state, setState] = useState(0)

  • The argument of useState is the default value of state
  • useState always returns 2 values, the first is the state, the second is the function to set the state. We usually destructure the array like this
  • Every time setState is called, the component will be re-rendered with the updated value of state

• You can only use hooks inside a function component

• Hooks must execute in the exact same order for each component render!

  • useState call does not receive any information about which state variable it refers to.
  • Instead, hooks rely on a stable call order on every render of the same component
  • Internally, React holds an array of state pairs for every component. It also maintains the current pair index, which is set to 0 before rendering. Each time you call useState, React gives you the next state pair and increments the index
  • Thus, you cannot call useState inside a conditional block, because it may or may not execute, thus messing up the order. A linter plugin throws errors if you do this.
  • You can only call hooks at the top level, aka no loops, no conditionals, no blocks around them

• Pitfall of updating state!

  • The incorrect way of updating state: setState(state - 1)
  • The correct way: setState(prevValue => prevValue - 1)
  • The correct way is to let setState take in a function to update the previous value!
  • Because if you write setState(state - 1) twice, you expect it to minus 2, but the value of state in each call is still the value when the component is first rendered! So, if state = 1 at first, then both times you're writing setState(0), so it won't minus 2!
  • Instead, if you write the function version, the previous value is directly used, so you can minus 2 in this way.

• When useState() takes in a function

  • useState(() => {...})
  • If useState() only takes in a value (or even another function not defined inside it with arrow notation!), this default function is run every time the function component renders. If there's a lot of computation inside the initialization function, re-running it every time will be slow.
  • So useState() can take in a function. When this happens, the function will only run the first time the component renders

• Using an object as initial state

  • When a state is updated, the new state overrides the old state, instead of merging into it!

  • So if you want to only update 1 attribute of the object, and keep the rest, remember to add in the old values as well!

  • setState(prevState => {...prevState, count : prevState.count - 1})

    • Spread out the prevState using ...prevState!

• Thus, it's more desirable to use multiple state hooks for an object with many attributes! It avoids the overriding above.

Reference

Learn useState In 15 Minutes - React Hooks Explained

总结

useState替代了以前用class管理state的方式，hook的灵活性使大家可以用许多个useState把复杂的object拆开管理。useState有一些quirks，比如useState和setState里面，写value和写function的效果是不一样的，为了避免bug需要特别注意~