将span隐藏的函数_React进阶之路----hook (函数钩子)与Antd(UI组件)

HOOK

1.什么是hook技术React16.8新增的特性：可以让你在不编写 class 的情况下使用 state，React没有破坏性的改动 ，100%向后兼容，解决了在组件中复用状态逻辑很难得问题。

渐进策略：没有计划从React中移除class。hook和现有代码可以同时进行工作，你可以渐进式的 使用他们。

2.useState(函数组件)可以在函数组件中使用state，节省的代码的书写useState的使用：

class的情况下我们在class的构造函数中创建state，存储我们的数据，使用use之后我们只需要useState定义值，在对数据进行修改得时候也是不需要对调用setState方法的。

这里const [count, setCount] = useState(0); 等价于const count=useState(0)[0]函数组件的写法：

或者：

读取state：我们之前在class中读取count数据需要this.state.count,在函数中，我们可以直接用count。

更新State：在class中需要调用this.setState方法，在函数中直接进行修改。

使用多个State变量：const [todos, setTodos] = useState([{ text: '学习 Hook' }]);

3.useEffect(副作用)

在函数组价中执行副作用的操作useEffect使用：

在React的class组件中，render函数是不应该有副作用的，我们一般在React更新后执行我们的操作，可以理解为 useEffect 等价于 componentDidMount 或者 componentDidUpdate

Antd

一、Antd安装手册地址：https://ant-design.gitee.io/docs/react/introduce-cn

Antd.Design是一个React和Angular的UI组件库，来自蚂蚁金服，已经是现在React的UI组件的标准了 。

第一步、使用步骤---安装依赖：

第二步、去node_modules文件夹里面找到antd文件夹，进入dist文件夹，将样式表复制出来。

复制到项目的根目录，而不是app子文件夹中的css文件夹中。 然后在index.html页面link引入Antd样式。

第三步、用到什么组件，直接import什么组件即可。

二、Antd组件的基本使用1.栅格布局antD中提供了Row和Col组件，要搭配使用。一个Row表示一个行，行里面有Col。

Col身上必须有span属性，一个Row内部的所有Col的span数值相加，必须是24。

比如设置为12，就是一半宽度。

2.Table表格

何时使用？

a.当有大量结构化的数据需要展现时；b.当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。

dataSource表示数据数组，columns表示列的配置描述

3.走马灯

何时使用？

a.当有一组平级的内容；

b.当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现；

c.常用于一组图片或卡片轮播。