Javascript 在构造函数中进行React属性分解。这是个好主意吗？

通常我会在render方法中对道具进行对象分解

比如：

这很无聊，因为如果我需要在我的对象中定义一个方法，也许我需要这里的道具，我需要在函数中再次解构我的道具

例如：

func = () => {
  const { props1, props2, props3 } = this.props;
}

---

有没有一种方法可以为组件执行一次？也许在构造函数中？

要只进行一次分解，我认为最好的方法是使用功能组件和钩子，如下面的示例所示

export default function Banans(props) {

    const {
        name,
        type,
        color
    } = props

    const bananaColor = () => {
        // here you can access the props without destructuring again
        console.log(color)
    }

    return (
        <div>
            {name}
            <button onClick={() => bananaColor()}>Banana color</button>
        </div>
    )
}

---

要只进行一次分解，我认为最好的方法是使用功能组件和挂钩，如下面的示例所示

export default function Banans(props) {

    const {
        name,
        type,
        color
    } = props

    const bananaColor = () => {
        // here you can access the props without destructuring again
        console.log(color)
    }

    return (
        <div>
            {name}
            <button onClick={() => bananaColor()}>Banana color</button>
        </div>
    )
}

---

如果组件是功能性的，您可以

常量myComponent=props=>{ 常量{props1，props2}=props； 回来 {props1} {props2}

---

}

如果组件功能正常，您可以

常量myComponent=props=>{ 常量{props1，props2}=props； 回来 {props1} {props2}

---

}是的。在构造函数中，您可以通过道具设置状态。但是，如果家长更改道具，您需要更改或不更改状态。查看此生命周期方法：

---

对。在构造函数中，您可以通过道具设置状态。但是，如果家长更改道具，您需要更改或不更改状态。查看此生命周期方法：

---

对于类组件，您只能在中（例如在构造函数中）分解一次道具，并将其保存为类属性，但您将面临的问题是，每当组件重新提交时，并且假设父组件传递的道具被更新，保存为类属性的初始解构属性值将由旧的和过时的渲染方法使用。因此，在这种情况下更新视图不起作用

Destructuring的主要优点是使语法简短，避免长表达式，例如，不要一次又一次地重复this.props。如果你两者都想要 destructuringshort syntax+updated propsupdated view正确的方法是每次在render方法中对它们进行分解，以便您可以直接使用它们，而无需另存为类成员

---

您还可以使用componentWillUpdate或componentWillReceiveProps挂钩，将道具另存为类属性，并在每次更新时进行更新，但同样，您需要使用该挂钩才能访问render方法中的道具。将它们保存在state中不是一个好主意，因为您需要再次分解this.state以获得更清晰的语法。

对于类组件，您只能在构造函数中分解一次props，并将其另存为类属性，但您将面临的问题是，每当重新检索组件时，假设父组件传递的道具被更新，保存为类属性的初始解构道具值将被旧的和过时的渲染方法使用。因此，在这种情况下更新视图不起作用

Destructuring的主要优点是使语法简短，避免长表达式，例如，不要一次又一次地重复this.props。如果你两者都想要 destructuringshort syntax+updated propsupdated view正确的方法是每次在render方法中对它们进行分解，以便您可以直接使用它们，而无需另存为类成员

您还可以使用componentWillUpdate或componentWillReceiveProps挂钩，将道具另存为类属性，并在每次更新时进行更新，但同样，您需要使用该挂钩才能访问render方法中的道具。将它们保存在state中不是一个好主意，因为您需要再次对this.state进行解构，以获得更清晰的语法

class Clock extends React.Component {
          constructor(props) {
            super(props);
            this.state = {
             props1 = props.props1,
             props2 = props.props2,
             props3 = props.props3
        };
          }

        func = () => {
          let sum = this.state.props1 + 1;
          code...
        }

          render() {
            return (
              <div>
                <h1>Hello, world!</h1>
                <h2>It is {this.state.props1}.</h2>
                <h2>It is {this.state.props2}.</h2>
                <h2>It is {this.state.props3}.</h2>
              </div>
            );
          }
        }