Реагирует constructor (), componentDidmount с переменной props

Question

Где я могу вызвать событие constructor () и componentDidmount с кодом ниже:

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

Что означает приведенный выше код и как он работает?

Answer 1

Это функциональный компонент, правильно отформатированный, возможно, немного легче для чтения:

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

В функциональных компонентах используйте хук useEffect с пустым массивом зависимостей для достижения эквивалента класса. на основе компонента componentDidMount. Хуки вызываются при монтировании и всякий раз, когда переменная в ее массиве зависимостей обновляется.

ловушка эффекта

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
    )
  );
};

Answer 2

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

Подробности

Таким образом, приведенный выше код является функциональным компонентом, в настоящее время функциональные компоненты могут обрабатывать все методы жизненного цикла, которые мы используем в компонентах на основе классов

Таким образом, до 16.8 из reactjs у нас могут быть методы состояния и жизненного цикла в функциональных компонентах. Он использовался только для визуализации элементов, таких как компоненты представления. Таким образом, в определенный момент для сложных приложений нам необходимо преобразовать функциональные компоненты в компоненты на основе классов для обработки одного изменения состояния

Так что это привело к эволюции хуков, вы можете прочитать больше на официальных документах о реагировании js

Итак, переходя к вашему случаю, если вам нужно вызвать метод в componentDidMount, вы можете вызвать, как показано ниже

useEffect (() => {// ваши логики c так же, как componentDidMount в компонентах на основе классов}, [])

Таким образом, второй аргумент - это зависимости для useEffect для запуска

, если вы передадите его таким образом, он будет вызываться каждый раз

useEffect(() => {})

Если вы передадите его таким образом, он будет вызываться всякий раз, когда переданная переменная изменяется из состояния или состояния

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

Надеюсь, это поможет лучше понять проблему

Answer 3

Вы не можете использовать обработчики реакционного жизненного цикла в функциональном компоненте. Обратитесь к приведенной ниже документации по использованию хуков жизненного цикла и по преобразованию функциональных компонентов в компоненты класса.

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} />}
      </>
    );
  }
}