在使用React钩子的函数组件中声明的函数

时间:2019-04-01 12:19:23

标签: javascript reactjs

我认为,我的问题更着重于性能方面。在以下情况下,我正在渲染选择组件。

每次选择重新呈现自身时,在重新声明onValueChange函数时是否存在问题(或性能问题)?因为在其他情况下,我们将不得不回到仅声明一次onValueChange函数的类。

在这种特殊情况下,将此功能放在同一文件中将意味着发送几乎所有接收到的参数以及其余const。

export default function CustomSelect({data, keyFn, displayFn, onChange}) {
    const [selectedObj, setSelectedObj] = useState({})
    const [selectedObjId, setSelectedObjId] = useState('')

    const onValueChange = event => {
        //use of data, keyFn, displayFn, onChange
        onChange && onChange(selectedObj)
    }

    return (
        <select onChange={onValueChange} ...>
            ...
        </select>
    )  
}

1 个答案:

答案 0 :(得分:0)

您无需回到基于类的位置,只需将函数放在文件中,而不是放在函数组件中即可。

或者,您可以使用useCallback()之类的东西来记住函数的结果。

参考here