Question

我在React类组件中有许多方法。组件本身会收到许多道具。

我想知道我是否应该使用道具并在构造函数中将每个道具添加为this.propName，然后使用this.propName访问道具。这是一个例子。什么是最佳做法？

const classComponent = class classComponent extends Component {
  constructor(props) {
    super(props) 
    this.propA = props.propA
    this.propB = props.propB
  }

  methodA() {
    console.log(this.propA)
  }
}

替代

const classComponent = class classComponent extends Component {
  constructor(props) {
    super(props) 
  }

  methodA() {
    console.log(this.props.propA)
  }
}

Answer 1

创建变量后，它会使用内存，即使您引用类型（如数组或对象），也会使文件变大。为您的类/函数已经可访问的变量创建新名称是没有意义的，所以不要这样做。

Answer 2

State and Lifecycle部分中React.js的官方文档说明：

虽然React本身设置了this.props，this.state具有特殊含义，但如果您需要存储未使用的内容，可以手动向该类添加其他字段用于视觉输出。

在您的情况下，很可能它应该保留为prop。每当你传递任何东西作为参数时，在React.js哲学中它将是prop，它很可能是视觉效果的一个组成部分。

Answer 3

您处理props的方式不允许组件在收到新道具时更新;主要是因为constructor只被调用一次 - 在创建组件时。

更好的方法是在render函数中使用Destructuring赋值：

render() {
  {propA, propB, ...rest} = this.props;
  //Rest code here, using propA, propB
  //However, don't use this.propA, or this.propB
}

如果您仍想按照自己想要的方式进行操作，则必须在组件中添加以下功能，以便在收到新道具时更新组件：

componentWillReceiveProps(nextProps) {
  this.propA = nextProps.propA;
  this.propB = nextProps.propB;
}

正如您所看到的，必须包含不必要的代码，因此我认为这是一种错误的方法！

将道具添加到构造函数中作为this.prop

3 个答案: