是否可以在 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;
}

根据评论进行编辑

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

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()，但计数器可以工作。）