React：在父级中使用子级设置状态的最佳方法

Question

我开始第一个问题...我一直在搜索，但找不到最佳实践。

我的解决方案（也许很愚蠢）： 我有一个 parent 表单，其中包含一个子选项。

const [periodo, setPeriodo] = useState('0')

const  cambiarPeriodo=(e)=> { setPeriodo(e) }

<NewSelect value ={periodo} onchange={(e) => { cambiarPeriodo(e) }}  />    

子功能组件选择：

const  periodosChange=(e)=> {
  props.onchange(e.target.value);

}
<Select value={props.value} custom name="periodo" id="periodo"  onChange={periodosChange}  > 

选项是通过带有 useEffect 的 axios 数据库查询填充的。

当用户在列表中选择一个选项时，触发一个 onchange 回调函数并在父级中设置状态。

由于setState，父子重载，清除用户选择。解决方案是通过 prop 将状态传递给孩子并将其分配给 select 的值。 value={props.value}..

有没有更好的方法，或者这是一个标准程序？实际上我希望孩子根本不要重新加载，因为选择列表永远不会改变......尝试过 React.memo 但无法使其工作

Answer 1

有一个名为shouldComponentUpdate() 的基于类的组件生命周期挂钩，您可以使用它来防止子组件在列表不变的情况下重新渲染。但这意味着您必须将子组件从功能组件转换为基于类的组件。

另一种选择是使用useMemo() 并记忆整个组件，如here 所示。