Ant Design Pro V5精讲（基础篇三）：useState

React Hooks背景

   一门技术的出现，一定是为了解决相应的痛点，在React Hooks（不翻译成什么钩子函数，就叫英语名更好理解）。Hooks没有出现前，一般的做法就是一个大的系统的UI由各个独立的小型UI，实现组件的复用。但经常碰到这些组件业务逻辑代码无法分离，这时候Hook出现了，它在不编写Class页面组件的情况下，可以使用State以及其他的React特性。

小结：让函数组件具有了state功能，同时改变了按组件的生命周期写业务功能的编程思想。

useState应用场景

   以前我们在给React类组件初始化state一般是构造函数时，并且需绑定this。现在useState出现了，就是为了给函数组件增加State功能，state本身属于组件的私有属性，以前说过React的组件的数据，主要props和state，前者用来接受父组件的传值，即接收外部的通信参数（它不可修改），后者是组件本身的state（数据）用来完成与用户或者服务交互形成的数据（它是可修改的）。

小结： 让函数组件和类组件一样，具备state的功能。

useState的特性

• 异步函数
• 与this无关
• 只能在函数组件中生效，在class中不起作用。
• 运用必须遵守Hook规则，即两条（只能在最顶层使用Hoo，只在函数组件中调用hook）
• 只能用setState来更新
• 数组解构法来定义
• 可以定义多个useState，而类组件只能定义一个this.setState()方法完成初始化。
• 更新State变量总是替换它，而不是象this.state一样合并它。

useState用法示例

语法：const [state, setState] = useState(initialState);

讲解：

---

初始化定义：

1.直接给值初始化，例如：const [userName,setUserName] = useState<string>('张三');

2.函数式初始化，例如：

     const [count,setCount] = useStae(){};

     当初始化需要复杂计算时，可以传入一个函数，例如：

const [state, setState] = useState(() => {
  const initialState = someExpensiveComputation(props);
  return initialState;
});

更新state：

setState(newState);

函数式更新：当通过先前的state计算得出时，例如：

setCount(prevCount => prevCount - 1)}

合并式更新

const [state, setState] = useState({});
setState(prevState => {
  // 也可以使用 Object.assign
  return {...prevState, ...updatedValues};
});

开发常见问题：

1.state不能动态更新，因为异步函数，所以setState()不要和console.log一起调试用，因为console.log永远比它快执行，而setState的值变化只能生命周期运行完成后才会更新。

2.当某些时候需要依赖前一个state值时，采用函数式更新，它能实现动态更新。

3.当在事件中操作state，setState的更新一定就是异步的。

4.当定义对象时(即有多个值项时），可以用useReducer代替useState会更省事一些。