React 中 useState hook 是什么？

Ant Design Pro 中经常看到这样的代码，例如 table list 中：

const AdminUsers: React.FC = () => {
  /** 新建窗口的弹窗 */
  const [createModalVisible, handleModalVisible] = useState<boolean>(false);
  const [currentRow, setCurrentRow] = useState<API.AdminUser>();
  ...
}

这里面的 useState 是什么意思呢？

useState 的用法

https://reactjs.org/docs/hooks-state.html

官方这个示例非常的简洁明了：

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useState 是 React 的一个 Hook.

React 为什么要引入 Hook 的概念

Hooks let you split one component into smaller functions based on what pieces are related (such as setting up a subscription or fetching data)

React 觉得 class 的形式非常难以理解，所以想以 Hook 的方式摒弃 class

Hooks let you use more of React’s features without classes

所以，总结起来，Hook 的定义是：

Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don’t work inside classes — they let you use React without classes.

React.FC

React.FC 是 React.FunctionComponent 的缩写。

setData 界面不更新问题

状态更新

在 Vue 中可以对数据进行突变，但是在 React 不推荐这样子做。尤其是通过 props 传递数据时。组件内部使用的 React hooks 仅仅只会进行浅比较。因此直接生成新的 props 对象，请勿直接更新某个 props 数据下某一个属性，这样组件将无法刷新状态。

解决方法很简单

不实用全局变量，而是在 setState 之前新定义一个 config，然后对子属性赋值即可。
这样每次都是一个新对象，就不会出现浅比较的问题。

参考

https://reactjs.org/docs/hooks-state.html
http://datav-react.jiaminghi.com/guide/#%E7%94%A8%E5%89%8D%E5%BF%85%E7%9C%8B

关于作者 🌱

我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊，或者关注我的个人公众号“大象工具”，查看更多联系方式