usestate中的回调函数_React进阶之路hook(函数钩子)与Antd(UI组件)

点击上方蓝色字关注我们~

HOOK

1.什么是hook技术React16.8新增的特性&＃xff1a;可以让你在不编写 class 的情况下使用 state&＃xff0c;React没有破坏性的改动 &＃xff0c;100%向后兼容&＃xff0c;解决了在组件中复用状态逻辑很难得问题。渐进策略&＃xff1a;没有计划从React中移除class。hook和现有代码可以同时进行工作&＃xff0c;你可以渐进式的 使用他们。2.useState(函数组件)可以在函数组件中使用state&＃xff0c;节省的代码的书写useState的使用&＃xff1a;class的情况下我们在class的构造函数中创建state&＃xff0c;存储我们的数据&＃xff0c;使用use之后我们只需要useState定义值&＃xff0c;在对数据进行修改得时候也是不需要对调用setState方法的。这里const [count, setCount] &＃61; useState(0); 等价于const count&＃61;useState(0)[0]函数组件的写法&＃xff1a;或者&＃xff1a;读取state&＃xff1a;我们之前在class中读取count数据需要this.state.count,在函数中&＃xff0c;我们可以直接用count。更新State&＃xff1a;在class中需要调用this.setState方法&＃xff0c;在函数中直接进行修改。使用多个State变量&＃xff1a;const [todos, setTodos] &＃61; useState([{ text: &＃39;学习 Hook&＃39; }]);3.useEffect(副作用)在函数组价中执行副作用的操作useEffect使用&＃xff1a;在React的class组件中&＃xff0c;render函数是不应该有副作用的&＃xff0c;我们一般在React更新后执行我们的操作&＃xff0c;可以理解为 useEffect 等价于 componentDidMount 或者 componentDidUpdate

Antd

一、Antd安装手册地址&＃xff1a;https://ant-design.gitee.io/docs/react/introduce-cnAntd.Design是一个React和Angular的UI组件库&＃xff0c;来自蚂蚁金服&＃xff0c;已经是现在React的UI组件的标准了 。第第一步、使用步骤---安装依赖&＃xff1a;第二步、去node_modules文件夹里面找到antd文件夹&＃xff0c;进入dist文件夹&＃xff0c;将样式表复制出来。复制到项目的根目录&＃xff0c;而不是app子文件夹中的css文件夹中。 然后在index.html页面link引入Antd样式。第三步、用到什么组件&＃xff0c;直接import什么组件即可。二、Antd组件的基本使用1.栅格布局antD中提供了Row和Col组件&＃xff0c;要搭配使用。一个Row表示一个行&＃xff0c;行里面有Col。Col身上必须有span属性&＃xff0c;一个Row内部的所有Col的span数值相加&＃xff0c;必须是24。比如设置为12&＃xff0c;就是一半宽度。2.Table表格何时使用&＃xff1f;a.当有大量结构化的数据需要展现时&＃xff1b;b.当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。dataSource表示数据数组&＃xff0c;columns表示列的配置描述3.走马灯何时使用&＃xff1f;a.当有一组平级的内容&＃xff1b;b.当内容空间不足时&＃xff0c;可以用走马灯的形式进行收纳&＃xff0c;进行轮播展现&＃xff1b;c.常用于一组图片或卡片轮播。

往期回顾

前端大牛进阶--->React必会教程

前端发展方向指南—Vue运行机制

前端发展方向指南—Vue源码初始化

程序员择业疑惑&＃xff1a;前端要凉&＃xff1f;学习Vue还有必要吗&＃xff1f;

Vue源码必学指南&＃xff1a;flow(语法检查)以及rollup(模板打包)

·END·

极光学苑

带你飞向梦想的地方

微信号&＃xff1a;极光训练营

 谢谢你的“在看” ❤