Javascript 如何删除在React中包含子组件的功能记忆组件的渲染器？

在为几个不同的输入编写处理程序时，我遇到了重新呈现包含子组件的组件的问题。如何删除渲染器

只有不带子级的组件和使用useMemo的组件不会被渲染

这只是代码的一部分。 在这里

const-App=（）=>{
const[clicksNum，setClicks]=useState（0）；
const countClicks=useCallback（（）=>{
设定点击次数（c=>c+1）；
}, []);
const[values，handleChange]=useInputHandler({
initValues:{simple:，counter:，empty:}
});
useffect（（）=>{
日志（“值：”，值）；
}，[values，clicksNum]）；
返回(
{你好}
{clicksNum}
);
};

---

我希望输入组件不会在每次单击按钮时重新渲染。在这种情况下，只需重新绘制第二个输入（其名称为计数器）。因为它封装了状态的值（单击SNUM。

您的输入会重新呈现，因为它的子项会发生更改

{Hello}

在每次渲染时都是不同的实例

如果将其替换为以下内容：

const hello = useMemo(() => <div>Hello</div>, []);

const hello=usemo（（）=>hello，[]）；

只有当任何依赖项发生更改时，它才会创建一个新实例。没有依赖项，您的重新渲染将消失

通过记忆任何组件，始终可以防止不必要的重新渲染，只有当任何依赖项发生更改时，才会重新渲染

const memoizedInput = React.useMemo(
  () => (
    <Input onChange={handleChange} name="simple" value={values.simple}>
      <Button onClick={countClicks} />
    </Input>
  ),
  [handleChange, countClicks, values.simple]
);

const memoizedInput=React.usemo(
() => (
),
[handleChange、countClicks、values.simple]
);

这实际上很有趣，一旦删除

{Hello}

只有第二个输入会重新启动。@keysl，是的。但是如果需要这个组件呢？例如，我需要发送的不是

{Hello}

，而是

。这对你有帮助吗you@JanakaDissanayake这不正是我需要的。：）您的示例演示了如何将道具从子组件传递到父组件，而无需进行不必要的重画。但在我的例子中，父组件必须不重新绘制未更改的子组件。是的，我理解这一点。但是，如果您不使用

Hello

，而是放置使用memo函数创建的组件，该怎么办？例如，如果您将我的

组件放在那里。这也不起作用。尽管子组件已被记忆。在这种情况下怎么办？这是主要问题。：）这里有一个小小的修改。你可以记忆你的输入组件，不是吗？像这样的东西怎么样：它可以正常工作。但这种方法真的正确吗？如果

已经被记忆了，为什么还要把它包装起来呢？按下按钮时，传递给

的道具不会改变。请注意，React.memo和React.usemo是两种不同的方法。您不能使用React.memo优化使用React.children道具的组件，React.memo不会记忆子道具。如果确实希望在该级别上进行优化，则可以对创建子级的函数调用进行meoize处理，并解决该问题。还可以从输入组件返回由React.usemo计算的值，并添加属性依赖项。所以你不必像那样记下每一个输入。

const hello = useMemo(() => <div>Hello</div>, []);

const memoizedInput = React.useMemo(
  () => (
    <Input onChange={handleChange} name="simple" value={values.simple}>
      <Button onClick={countClicks} />
    </Input>
  ),
  [handleChange, countClicks, values.simple]
);