是否可以在 useEffect 挂钩中渲染组件？

Question

我只是想知道，是否可以在 useEffect 挂钩中渲染组件。 我有两个组件，比如说 A 和 B。 在组件 A 中，我的 useEffect 挂钩如下。 在测试钩子内的某些条件时，我想渲染一个组件 B。

export default function A() {
  const [location, setlocation] = usestate(null);
  useEffect(() => {
    if (condition) {
      <B />; // it does not render anything though
    } else {
      //code
    }
  }, [location]);
}

export default function B() {
  const test = () => {
    console.log("testing");
  };
  return (
    <View style={styles.container}>
      <Button title={"Click Me"} onPress={test} />
    </View>
  );
}

Answer 1

无论如何，这不是你想使用useEffect 的地方。

由于location是一个状态原子，它的改变会导致重新渲染，所以效果钩子是不必要的。 （我认为// code 比你在这里说的更复杂......）

对于等效但有效的示例，

export default function A() {
  const [location, setlocation] = useState(null);
  if (condition) {
    return <B />;
  }
  // code
  return null;
}

基于 cmets 编辑

要强制重新渲染（卸载 + 重新安装）组件，您可以使用任意键：

export default function A() {
  const [location, setlocation] = useState(null);
  React.useEffect(() => {
    // ....
  }, [location]);
  return <B key={location} />;
}

根据效果中的条件强制它重新渲染，

export default function A() {
  const [location, setlocation] = useState(null);
  const [conditionCounter, setConditionCounter] = useState(0);
  React.useEffect(() => {
    if(condition) {
      setConditionCounter(c => c + 1);
    }
  }, [location]);
  return <B key={conditionCounter} />;
}

（或者可能只是 new Date() 或 Math.random()，但可以使用计数器。）