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