写在前面

反应在16.8版本正式发布了钩子。关注了很久，最近正好有一个小需求，赶紧来试一下。

需求描述

需求很简单，部门内部的一个数据查询小工具。大致长成下面这样：

用户首次访问页面，会拉取数据展示。输入筛选条件，点击查询后，会再次拉取数据在前端展示。

需求实现

使用反应类组件的写法

如果使用以前的班级写法，简单写一下，代码可能大概长成下面这样：

从“反应”导入做出反应；从导入{选项卡、输入、范围时间、按钮、表格}。/components '；类应用扩展了做出反应.组件{.state={ type: []，id: ' '，title: ' '，date: []，data list :[]} component dimont(){ this。fetch data()；}渲染(){选项卡值={这个。国家。type } OnChange={ this。handletychange }/Input值={this.state.id}标签=' ID ' OnChange={ this。handleIdChange }/Input值={这个。国家。ID }标签='标题onChange={ this。处理标题更改}/范围时间值={这个。国家。日期} onChange={ this。handlet range time change }/Button OnClick={ this。handlerquerytnclick }查询/Button Table dataList={ this。国家。dataList }/} fetchData(){ 0.这个。setstate({ DataList })；} HandleTypeChange(){ 0.this.setState({ type，})；} handleIdChange(){ 0.this.setState({ id，})；} HandleTitleChange(){ 0.this.setState({ title，})；} handleRangeTimeChange(){ 0.this.setState({ date，})；} handlequeryntclick(){ 0.} .}使用反作用钩的写法

关于反作用钩的相关内容，这里就不赘述了。可以直接查看反应官方文档，写得非常好。

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

本次需求其实就两个逻辑：1、输入筛选项。2、查询数据

主页面一个钩子，处理筛选项以及数据展示。数据请求逻辑单独弄一个钩子。

主页面挂钩：

从“反应”导入React，{ useState，useEffect }；从导入{选项卡、输入、范围时间、按钮、表格}。/components '；const App=()={ //数据类型const tab=[{ key : 1，value: '类型1' }，{ key: 0，value: '类型2' }];const [tab，setTab]=useState(1)；//数据ID const [dataId，setDataid]=useState(' ')；//标题const [title，setTitle]=useState(' ')；//时间区间，默认为至今一周时间立即常量=日期。now()；const [timeRange，setTimeRange]=useState([now-1000 * 60 * 60 * 24 * 7，now])；//数据列表const [dataList，setDataList]=useState([])；//点击搜索按钮函数handleBtnClick() { //请求数据.}返回节类名='应用'标题'数据查询/tab标签='类型tab={ tab } tab={ tab } onChange={ setTab }/Input value={ dataId }占位符='请输入数据标识"更改={设置数据标识}标识/输入输入值={标题}占位符="请输入数据标题onChange={setTitle}标题/输入时间范围标签='数据时间value={ time range } onChange={ handleTimeChange }/article class name=' BTN-容器' Button type=' primary ' onClick={ handleBtnClick }查询/Button/article Table dataList={ dataList }/Table/section }；上面的代码，完成了筛选项的处理逻辑。下面来实现负责数据请求的钩子。

数据请求挂钩：

从“反应”导入React，{ useState，useEffect }；从""导入跨域请求./tools/jsonp '；函数我的提取(URL){//是否正在请求中const [isLoading，setIsLoanding]=useState(false)；//请求参数const [queryParams，setQueryParams]=useState(null)；//请求结果const [data，setData]=useState(null)；//向接口发起请求const FetchDATa=async()={ if(查询参数===null){ return；} setIsLoanding(true)；const RES=await jsonp({ URL : URL，数据：查询参数})；setData(RES)；setIsLoanding(false)；} //只要查询参数改变，就发起请求useEffect(()={ fetchData()；}，[查询参数])；//供外部调用const DoGet=(params)={ setqueryParams(params)；}返回{ isLoading，data，doGet } }导出默认我的方面；在主页面中，引用数据请求挂钩：

从“反应”导入React，{ useState，useEffect }；从导入{选项卡、输入、范围时间、按钮、表格}。/components '；从""导入我的版本/我的取物；const App=()={ //使用数据请求hooks const { isLoading，data，DoGet }=my pecth(' http://XXX ')；//数据类型const tab=[{ key : 1，value: '类型1' }，{ key: 0，value: '类型2' }];const [tab，setTab]=useState(1)；//数据ID const [dataId，setDataid]=useState(' ')；//标题const [title，setTitle]=useState(' ')；//时间区间，默认为至今一周时间立即常量=日期。now()；const [timeRange，setTimeRange]=useState([now-1000 * 60 * 60 * 24 * 7，now])；//数据列表const [dataList，setDataList]=useState([])；//点击搜索按钮函数handleBtnClick() { //点击按钮后请求数据const params={ }；标题(参数。title=title)；dataId(参数。dataId=dataId)；参数。starttime=String(时间范围[0])；参数。结束时间=字符串(时间范围[1])；doGet(params)；}//数据改变后，重新渲染列表。 //这里相当于组件更新。当数据发生改变时，重新渲染页面useEffect(()={ setDataList(数据);},[数据]);//首次进入页面时，无任何筛选项。拉取数据，渲染页面//useEffect。第二个参数为一个空数组，相当于在组件安装时执行该「副作用」useEffect(()={ DoGet({ })；}, []);返回节名称='应用'标题='数据查询/tab标签='类型tab={ tab } tab={ tab } onChange={ setTab }/Input value={ dataId }占位符='请输入数据标识"更改={设置数据标识}标识/输入输入值={标题}占位符="请输入数据标题onChange={setTitle}标题/输入时间范围标签='数据时间value={ time range } onChange={ handletime change }/article class name=' BTN-容器' Button type=' primary '正在加载={ isLoading } onClick={ handleBtnClick }查询/Button/article Table dataList={ dataList }/Table/section }；关于反作用钩的一些思考

使用钩住写完这个需求，最直观的感受就是，代码写起来很爽。不需要像以前那样写很多的setState。其次就是

钩住的美国石油学会(美国石油协会)设计得很优秀，一个useState的就能将【状态】和【变更状态的逻辑】两两配对做出反应的基本思想就是【数据到视图的映射】,在钩住中，使用使用效果来表明其中的【副作用】,感觉反应官方也倾向于不区分组件安装和组件更新。

从美国石油学会(美国石油协会)设计就能看出，钩子提倡组件状态细粒度地拆分。在一个钩住组件中，可能包含很多的状态，如果用户的某些操作，需要同时修改两个状态，那么我需要分别调用这两个状态的修改逻辑，这样会导致组件被重新提出两次。而在使用班级写法的组件中，只需要一次设置国家就好。这样看来，钩子中提出两次的操作，可能会带来些许的性能问题？这就要求我们在设计组件结构和状态时，多斟酌，多抽象。

一些关于钩子的常见问题，官方也有很棒的文档：https://reactjs.org/docs/hooks-faq.html

写在后面

本文通过工作中的一个小需求，完成了一次react hooks的实践，但是上面的代码还有很多需要优化的地方。这次练习让我最直观的接触到了react hooks，也帮助我进一步了解了react团队的一些想法。满足期望。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。