React Native - 太多的重新渲染

Question

我正在尝试创建一个 state 在其中显示某些组件的可见性，具体取决于道具是否为空。 我使用了代码中所示的 if 语句，但是，它会在发生太多重新渲染时产生错误。 如果我设置默认让 showComponents = false 或 true，一切正常。 关于如何解决此问题的任何想法，因为组件的可见性取决于道具是否为空。

代码：

const [showcComponents, setView] = useState(false);
...
if (props.params == undefined) {
setVisibility(false);
} else {
setVisibility(true);
}

Answer 1

对于发送到您的组件的每个更新，您都在调用 setVisibility(false/true)。 这可能会在创建渲染循环时弄乱渲染方法。 您应该尽量不要在钩子外调用 function。 假设您有一个可见性变量，您可以尝试：

...
useEffect(()=>{
    if(props.params === undefined && visibility === true){
         setVisibility(false);
    }else if(props.params !== undefined && visibility === false){
         setVisibility(true);
    }
}, [props.params]
)
...

Answer 2

此代码将导致无限的重新渲染周期。 因为每次组件渲染时都会调用setVisibility来重新渲染组件

const [showcComponents, setView] = useState(false);
useEffect(()=>{
  if (props.params == undefined) {
    setVisibility(false);
  } else {
    setVisibility(true);
  }
}, [props.params])

你也可以这样写更短：

useEffect(()=>{
    setVisibility(props.params !== undefined);
}, [props.params])