问题

以下是要翻译的内容：

在下面的代码中，我可以在哪里调用constructor()和componentDidMount事件：

export const Home = props => (props.isAuthenticated ? (
  <DashBoard {...props} />
) : (<Marketing {...props} />));

上面的代码是什么意思，它是如何工作的？

export const Home = props => (props.isAuthenticated ? (
  <DashBoard {...props} />
) : (<Marketing {...props} />));

答案1

得分: 2

以下是翻译好的部分：

这是一个功能性组件，正确格式化后可能更容易阅读：

export const Home = props => (
  props.isAuthenticated ? ( 
    <DashBoard {...props} /> // 如果已经认证，则返回并渲染仪表板
  ) : (
    <Marketing {...props} /> // 否则返回并渲染营销页面
  )
);

在功能性组件中，使用useEffect钩子与空的依赖数组来实现与基于类的组件的componentDidMount等效的操作。钩子在挂载时被调用，并在其依赖数组中的变量更新时被调用。

效果钩子

export const Home = props => {
  useEffect(() => console.log("我刚刚挂载了！", []); // 空数组，所以在组件挂载时只调用一次
    
  return (
    props.isAuthenticated ? ( 
      <DashBoard {...props} /> // 如果已认证，则返回并渲染仪表板
    ) : (
      <Marketing {...props} /> // 否则返回并渲染营销页面
    )
  );
};

export const Home = props => (
  props.isAuthenticated ? ( 
    <DashBoard {...props} /> // if authenticated return and render Dashboard
  ) : (
    <Marketing {...props} /> // else return and render Marketing
  )
);

export const Home = props => {
  useEffect(() => console.log("I just mounted!", []); // empty so called once when the component is mounted

  return (
    props.isAuthenticated ? ( 
      <DashBoard {...props} /> // is authenticated return and render Dashboard
    ) : (
      <Marketing {...props} /> // else return and render Marketing
    )
  );
};

答案2

得分: 0

在函数组件中无法使用React生命周期钩子。请参考以下React文档了解生命周期钩子的用法，并将函数组件转换为类组件。

https://reactjs.org/docs/state-and-lifecycle.html

export default class Home extends React.Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() {}

  render() {
    const { isAuthenticated } = this.props;
    return (
      <>
        {isAuthenticated ? <DashBoard {...this.props} /> : <Marketing {...this.props} />}
      </>
    );
  }
}

export default class Home extends React.Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() {}

  render() {
    const { isAuthenticated } = this.props;
    return (
      <>
        {isAuthenticated ? <DashBoard {...this.props} /> : <Marketing {...this.props} />}
      </>
    );
  }
}

答案3

得分: 0

export const Home = props => (props.isAuthenticated ? (
  <DashBoard {...props} />
) : (<Marketing {...props} />));

Details

上述代码是一个函数组件，目前函数组件可以处理我们在基于类的组件中使用的所有生命周期方法。

所以，在 React.js 版本 16.8 之前，我们可以在函数组件中拥有状态和生命周期方法，但它仅用于呈现元素，就像是一个展示性组件一样。因此，对于复杂的应用程序，我们需要将函数组件转换为基于类的组件，以处理单个状态更改。

这促使了 hooks 的出现，您可以在 React.js 的官方文档中详细了解更多信息。

至于您的情况，如果您需要在 componentDidMount 中调用方法，可以按照下面的方式调用：

useEffect(() => {
  // 在类基础组件中的 componentDidMount 中的逻辑
}, [])

因此，第二个参数是 useEffect 的依赖项，用于触发它。

如果您像这样传递它，它将在每次渲染时调用：

useEffect(() => {})

如果您像这样传递它，它将在从 props 或 state 更改传递的变量时调用：

useEffect(() => {}, [data, userName])

希望这能更好地理解问题。

<details>
<summary>英文:</summary>

    export const Home = props =&gt; (props.isAuthenticated ? (
      &lt;DashBoard {...props} /&gt;
    ) : (&lt;Marketing {...props} /&gt;));

**Details**

So the above code is a functional component, currently functional components can handle all the lifecycle methods that we use in class based components

So prev, before 16.8 of reactjs we can have state and life cycle methods in a functional components, It was only used for rendering the elements like as a presentational components. So at a point for complex applications we need to convert the functional components to class based components to handle a single state change


So this made the evolution of hooks, you can read more on the official docs of react js

So comming to your case if you need to call the method in componentDidMount, you can call as shown below

useEffect(() =&gt; {
  // your logic same as componentDidMount in class based components
}, [])


So the second argument is the dependencies for the useEffect to trigger

if you pass it as like this it will call every time 

    useEffect(() =&gt; {})


If you pass it as like this it will call whenever the passed variable changes from props or state 

    useEffect(() =&gt; {}, [data, userName])

I hope this will give a better understanding of the problem

</details>