React hook useEffect 每次挂载组件时都会导致初始渲染

Question

我是 React 钩子的新手。所以，我想用 React 钩子实现 componentWillReceiveProps。我使用 React.useEffect(( 是这样的：

React.useEffect(() => {
    console.log(props.authLoginSuccess);  // initially called every time, the component renders
  }, [props.authLoginSuccess]);

return ( //JSX...)
onst mapStateToProps = (state: any): StateProps => {
  return {
    authLoginSuccess: selectAuthLoginSuccess(state) //used selector to select authLoginSuccess
  };
};
export default connect(
  mapStateToProps,
  // mapDispatchToProps
  { authLogin, toggleLoadingStatus } 
)(Auth);

问题是，每次组件最初渲染时都会调用 useEffect，这是我不想要的。我只希望它在"props.authLoginSuccess"更改时呈现。

Answer 1

由于您希望效果不在初始渲染时运行，因此可以通过使用useRef

const initialRender = useRef(true);
React.useEffect(() => {
    if(initialRender.current) {
        initialRender.current = false;
    } else {
        console.log(props.authLoginSuccess);  // initially called every time, the component renders
    }
  }, [props.authLoginSuccess]);

Answer 2

将其包装在如下所示的if条件下：

React.useEffect(() => {
  if (props.authLoginSuccess) {
    console.log(props.authLoginSuccess);
  }
}, [props.authLoginSuccess]);

请注意，效果仍将运行 - 无论是最初还是每次props.authLoginSuccess更改时(这没关系！

if块将防止在props.authLoginSuccess是假时运行console.log(props.authLoginSuccess)。因此，如果您不希望它最初运行，即在组件挂载时，只需确保最初false props.authLoginSuccess。

Answer 3

您可以添加另一个状态来监视组件是否已挂载。

const [isMounted, setIsMounted] = React.useState(false);
React.useEffect(() => {
  if (isMounted) {
    console.log(props.authLoginSuccess);
  } else {
    setIsMounted(true);
  }
}, [props.authLoginSuccess]);

这样，它只会在挂载组件时执行。