时间戳

首页 > 解决方案 > 将函数传递给子组件是个好主意吗？

javascript - 将函数传递给子组件是个好主意吗？

问题描述

我有一个父子组件。

在子组件中，输入字段发生了变化，我想让父母知道这个变化。所以我现在这样做的方式是这样的。

//parent component
const [text, setText] = useState<any>('');

<childComponent :text={text} :setText={setText} />

//child component
export const childComponent: React.FC<childComponent> = ({
  text,
  setText
}) => {

   return (
     <input :value={text} onChange={(value) => setText(value)} />
   )

}

这是正确的做法吗？也许我应该将普通函数从父级传递给子级，并且在父级的那个函数中，我应该调用setText. 真的不确定。

我来自vue.js我真正喜欢整个概念的世界$emit。在孩子身上，你可以这样写：

<input onChange={(val) => { $emit('updateInput', val) } />

// and in the parent

<childComponent @updateInput={(val) => parentValue = val}

基本上，大多数时候，您不需要将功能从父母传递给孩子，我真的很喜欢这一点。

对于您如何在 React 中处理此问题，我将不胜感激。

标签： javascriptreactjsreact-native

解决方案

这很好，这是孩子与父母交流的常用方式。

然而，有一些事情需要考虑。当您直接在 JSX 模板中编写回调时，它会在每个渲染周期重新评估，这意味着每次都会创建一个新函数。

有两个 React 钩子可以帮助缓解这种情况（这可能会导致性能问题）useCallback和useMemo. 它们都有助于记忆函数，以便在进一步的渲染周期中再次发送它们。

推荐阅读