使用React Hook新特性遇到的一些问题

一、参数变化触发数据更新

使用场景：获取Table数据等

当Table数据的页码和筛选项变化的时候，想触发获取数据的方法运行

  1. import React, { useState, useEffect } from 'react'
  3. export default () => {
  4.     const [page, setPage] = useState(1)
  5.     const [dataSource, setDataSource] = useState([])
  7.     funtion loadData( ) {
  8.         getdata({
  9.             page,
  10.             pageSize
  11.         }).then(res => setDataSource(res.data))
  12.     }
  13.     // useEffect方法为函数组件渲染的时候会默认触发一次，当page参数变化的时候，loadData方法也会触发一次
  14.     // useEffect的第二个参数为一个数组，可以添加多个数组对象，如[page, search]
  15.     useEffect(loadData, [page])
  16. }

二、销毁函数组件的时候，怎么设置回调函数

使用场景：设置了定时器等方法的时候，组件销毁的时候清理定时器释放内存

  1. import React, { useState, useEffect } from 'react'
  3. export default () => {
  4.     const [count, setCount] = useState(0)
  5.     const timer = setInterval(() => {
  6.         setCount(count + 1)
  7.     }, 1000)
  8.     // useEffect方法的第一个参数是一个函数，函数可以return一个方法，这个方法就是在组件销毁的时候会被调用
  9.     useEffect(() => {
  10.         return () => {
  11.             clearInterval(timer)
  12.         }
  13.     }, [])
  14. }

三、如何拿到函数组件内的ref三、如何拿到函数组件内的ref

使用场景：子组件内使用了一些输入框Input等组件的时候，想在父组件内获取子组件的Input的ref方法

  1. import React, { useState, useEffect } from 'react'
  2. import { Input } from 'antd'
  4. export const Child = React.forwardRef((props, ref) => {
  5.     // 当外部传入ref时，可以通过forwardRef的第二个参数获取到ref属性的值
  6.     // ref如果有值，就赋值把控制权给父组件；若为空，则可以在子组件内部控制Input
  7.     const inputRef = ref || React.createRef()
  8.     return <>
  9.         <Input ref={inputRef} />
  10.     </>
  11. })
  13. export default class Father extends React.Component {
  14.     constuctor (props) {
  15.         super(props)
  16.         this.inputRef = React.createRef()
  17.     }
  19.     componentDidMount () {
  20.         // 1妙后让Child组件的Input标签聚焦
  21.         setTimeout(() => {
  22.             this.textRef.current.focus()
  23.          }, 1000)
  24.     }
  26.     render () {
  27.         // 通过ref传递inputRef参数，从而获取到Input的控制权
  28.         return <>
  29.             <Child ref={this.inputRef} />
  30.         </>
  31.     }
  32. }

四、用函数组件制作Table列表，筛选条件让useState十分臃肿

使用场景：Table的筛选项有page、search、dateTime、order、type等等

如果给每个筛选项加一个useState来控制的话，不得不说代码会比较臃肿，难以维护且不优雅（装起来了就），下面就来解决一下这个痛点

  1. // utils.js
  2. import { useState } from 'react'
  3. export default (initial, setPage) => {
  4.   const [state, setState] = useState(initial)
  5.   return [state, function (newState) {
  6.       // 每次筛选条件变化的时候，就重新设置到第一页,
  7.     setPage && setPage(1)
  8.     // 新的覆盖参数覆盖掉老的参数
  9.     setState({ ...state, ...newState })
  10.   }]
  11. }
  13. // index.js
  14. import React, { useState, useEffect } from 'react'
  15. import { Table } from 'antd'
  16. import useMergeFilter from './utils'
  18. export default () => {
  19.     const [dataSource, setDataSource] = useState([])
  20.     const [page, setPage] = useState(1)
  21.     const [total, setTotal] = useState(0)
  22.     const [filter, setFilter] = useMergeFilter({ keyword: undefined, status: '' }, setPage)
  24.     function loadData () {
  25.         // 将参数展开传入
  26.         getdata({ page, pageSize, ...filter }).then(res => setDataSource(res.data))
  27.     }
  28.     // 每次filter和page变化都会触发loadDate函数运行
  29.     useEffect(loadData, [filter, page])
  31.     return <>
  32.         <div className='filter'>
  33.           // 只需在回调函数里执行setFilter并传入需要的参数，就能触发列表更新
  34.           <Input.Search placeholder='搜索' onSearch={value => setFilter({ keyword: value })} />
  35.           <Select defaultValue='' onChange={value => setFilter({ status: value })}>
  36.             <Select.Option value='A'>A</Select.Option>
  37.             <Select.Option value='B'>B</Select.Option>
  38.           </Select>
  39.         </div>
  40.         <Table
  41.             columns={columns()}
  42.             dataSource={dataSource}
  43.         />
  44.     </>
  45. }

五、新特性函数组件结合antd的表单form组件

使用场景：函数组件内使用表单，获取form属性

这个使用场景就比较多了，正常的类组件我们都会，antd的官方也有介绍；但用函数组件写有的同学就会有点懵，form去哪里取

  1. import React, { useState, useEffect } from 'react'
  2. import { Form, Button } from 'antd'
  4. // 抛出函数组件的时候，通过Form.create()方法生成的新的组件，可以通过({ form })的形式拿到整个表单的form对象
  5. // 下面就可以随心所欲的操作form内的表单数据了
  6. const Demo  = ({ form }) => {
  7.     const handleSubmit = (e) => {
  8.         e.preventDefault()
  9.         form.validateFields((err, values) => {
  10.           console.log('err', err)
  11.           console.log('values', values)
  12.         })
  13.     }
  14.     <Form onSubmit={handleSubmit}>
  15.         <div>
  16.             <FormItem label='用户ID'>
  17.                 {getFieldDecorator('id', {
  18.                 initialValue: '',
  19.                 })(
  20.                 <Input placeholder='输入用户名id' />
  21.                 )}
  22.             </FormItem>
  23.             <Form.Item>
  24.                 <Button type='primary' htmlType='submit'>提交</Button>
  25.             </Form.Item>
  26.         </div>
  27.     </Form>
  28. }
  29. const WrappedRegistrationForm = Form.create()(Demo)
  30. export default WrappedRegistrationForm