Question

我一直在尝试通过从 Parent 组件在不同的时间间隔传递不同的值作为道具来更新 Child 组件。 >无需重新渲染父组件。在这种情况下，子组件似乎没有更新。但是，当我在Parent组件上执行setState时，它可以工作，这肯定不是一种理想的方法。与Angular / Vue一样，更新道具（或@Input）也很容易。

父项：

function Parent()
{
  let value = 0;

  setTimeout(()=>{value = 10}, 1000);

  return (
    <Child value={value} />
  )
}

子组件：

function Child(props)
{
  return (<div>{props.value}</div>)
}

值在1000毫秒后仍显示0。

谢谢。

Answer 1

我一直试图通过在不重新渲染父组件的情况下，以不同的时间间隔从父组件传递作为道具的不同值来更新子组件。

在此特定示例中，如果不渲染父级，就无法渲染子级。

但是，肯定可以使用Context API使用更高的构图来实现。

//   v Container with Context provider
<Container>
  <Parent>
//     v Can be rendered without Parent's rendering
    <Child />
  </Parent>
</Container>

//  v In your case, can't be achieved.
<Parent>
//  v Must be aware of props change,
//    therefore, the parent must be rendered.
  <Child />
</Parent>

Answer 2

不是理想的方法

对。如果父级不使用状态，则将其移至子级。

 function Parent() {
    return <Child />;
 }

 function Child() {
   const [value, setValue] = useState("");
   useTimeout(() => setValue("Parent doesn't update"), 1000);
   return (<div>{value}</div>)
 }

function useTimeout(fn, time) {
  React.useEffect(() => {
     const timer = setTimeout(fn, time);
     return () => clearTimeout(timer);
  }, []);
]

如何在不使用React功能组件重新渲染父对象的情况下更新道具

2 个答案: