React 中 useState hook 是什么?

更新日期: 2021-10-25 阅读次数: 2099 字数: 434 分类: ReactJS

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 聊聊, 查看更多联系方式