react hooks—useState篇

基本使用

1const [state, setState] = useState(initialState);

initialState可以是基本类型、对象、数组，也可以是函数，但函数必须是纯函数。

返回值则包括当前渲染的state以及setState函数。set函数可以是一个新的状态，也可以是一个用前一个状态来计算新状态的函数。

给函数组件给予状态

更新状态

1. 用前一次的状态更新状态
2. 更新对象或者数组的状态，必须要一个新的对象或数组，也可以用immer来操作

避免重复初始化状态

在用函数初始化状态的时候，最好别用调用函数的写法，例如：

1const [state, setState] = useState(createState())

应该直接将初始化函数传递给useState()

储存前一次的状态

当父组件传递状态给子组件时，可用useState()储存前一次的状态，且必须将set函数放到判断语句当中，否则造成无限循环。

原理

注意事项

在使用usestate()的时候需要注意以下几点：

• 当在严格模式中，useState()会运行两次，目的是为了检查初始化函数和set函数是否是纯函数。
• set函数仅更新下一次的状态，无法在set函数后直接获取新的值。如果在需要获取dom的场景下，可采用flashSync，但可能会造成性能问题。
• 当发现视图没有更新的时候，需要考虑新状态和旧状态是否发生了变化，特别是对象和数组。
• 在组件渲染时，set函数应当放在条件语句里面，否则会造成无限循环