React:用来自子级的值设置父级状态的最佳方式

Question

这里的第一个问题。。。我一直在搜索，但找不到最佳实践。

我的解决方案(也许很愚蠢(：我有一个父窗体，它有一个子窗体select。

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}  > 

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

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

由于使用了setState，父级和子级重新加载并清除了用户选择。解决方案是通过prop将状态传递给子级，并将其赋值为select<选择value={props.value}..

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

Answer 1

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

另一种选择是使用useMemo()并存储整个组件，如图所示。