react 的 input onchange如何配合useEffect

Question

<AtInput
  value={holder_info.mobile}
  onChange={val => updateHolder(val, "mobile")}
></AtInput>
<AtInput
  value={holder_info.name}
  onChange={val => updateHolder(val, "name")}
></AtInput>

如上图，即使updateHolder用useCallback包裹了也没用,因为onChange传递的是()=> { return updateHolder }，传递到AtInput中每次都会没认为是一个新函数。

这就导致一个重复渲染的问题：某一个AtInput触发onchange,导致父组件更新，其他AtInput组件侦测到传递下来的onChange函数的变化，也触发re-render。这该如何避免呢

Answer 1

导致组件更新，是因为你在updateHolder中set了state吧，那必然会触发useEffect，不然怎么能render到改变呢，不想让其他组件render的话，就把相关组件用memo包起来吧。

Answer 2

如果AtInput re-render没有造成性能问题就让它re-render呗。避免AtInput无效re-render可以这样：

const handleMobileChange = useCallback((val) => {
    updateHolder(val, "mobile")
}, [updateHolder])

const handleNameChange = useCallback((val) => {
    updateHolder(val, "name")
}, [updateHolder])

<AtInput
  value={holder_info.mobile}
  onChange={handleMobileChange}
></AtInput>
<AtInput
  value={holder_info.name}
  onChange={handleNameChange}
></AtInput>