Question

我要去的第一个问题...我一直在搜索，找不到最佳实践。

我的解决方案（可能是愚蠢的）：我有一个父母表格，其中有一个子选项。

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 回调函数并在父级中设置状态。

由于设置状态，父级和子级重新加载并清除了用户选择。解决的办法是通过将状态传递给孩子并将其分配给选择值。 <选择 value = {props.value} ..

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

Answer 1

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

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

反应：用子项的值在父项中设置状态的最佳方法

1 个答案: