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虚假时，console.log(props.authLoginSuccess)块将阻止运行props.authLoginSuccess。因此，如果您不希望它最初运行，即在安装组件时，只需确保props.authLoginSuccess最初是false。

Answer 3

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

const [isMounted, setIsMounted] = React.useState(false);

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

这样，它将仅在安装组件后执行。

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

3 个答案: