Деструктуризация в компоненте класса React
Есть ли другой способ использования деструктуризации ES6 в компоненте React Class без необходимости делать это в каждом методе?
Я использую ту же опору (this.prop.page) в методах constructor, componentDidMount(), componentDidUpdate() и render():
class SinglePage extends React.Component {
constructor(props) {
super(props);
const { page } = this.props;
//...
}
componentDidMount() {
const { page } = this.props;
//...
}
componentDidUpdate() {
const { page } = this.props;
//...
}
render() {
const { page } = this.props;
return (
//...
);
}
}
exports default SinglePage;
Есть ли способ сделать это только один раз?
@Jonas Wilms Спасибо :)
Используйте функциональный компонент, зачем вам класс?
преобразовать в функциональный компонент.. 8)
Я думаю, проблема в том, что мне нужны методы жизненного цикла :(
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Есть, если вы можете использовать последнюю версию реакции с хуками. UseEffect заменит didMount и didUpdate, а также конструктор без функционального компонента. Я рекомендую прочитать эту статью о хуке useEffect. https://overreacted.io/a-complete-guide-to-useeffect/
Да! Хуки — это путь, который вы должны исследовать!
useEffect предназначен для обработки случаев, когда вы будете использовать методы жизненного цикла в компонентах класса. Вы можете использовать один или несколько, в зависимости от ваших потребностей.
import React, { useEffect } from React;
function SinglePage({ page }) {
useEffect(() => {
// componentDidMount() {
}, []); // empty array here means it'll only run after the first render
useEffect(() => {
// componentDidMount() {
// componentDidUpdate() {
}); // no second are means it runs after every render
useEffect(() => {
// componentDidMount() {
// componentDidUpdate() {
}, [page]); // runs on initial render and whenever `page` changes
useEffect(() => {
return () => cancelTheThings(); // componentWillUnMount() {
}); // return a function from your useEffect function to have it run before unmount
return {
//...
}
}
export default SinglePage;
Нет. Или, по крайней мере, не в хорошем смысле.