Question

考虑这三种声明数组arr的方式：

// One
const arr = [7,8,9]; 
class WatchStore extends Component {
  constructor(props) {
    super(props);
  }
  ......
}

// Two
class WatchStore extends Component {
  constructor(props) {
    super(props);
    this.state = {
      arr: [7,8,9],
    }
  }
  ......
}

// Three
class WatchStore extends Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() {
    this.arr = [7,8,9]; 
  }
  ......
}

哪一个是最“正确”并被认为是最佳做法？ <{1}}不需要渲染，它只是临时缓存。

Answer 1

从语义上讲，第二个与其他两个不同。原因是，如你所说：

arr不需要渲染，它只是临时缓存。

如果项目正在被主动更改并且对组件的状态非常重要，则只能将项目置于状态。即使你在初始渲染后没有变异，这也是一个语义问题。如果它不属于state，（因为它永远不会以对组件显示有意义的方式改变），它不应该进入状态。

至于第一和第三，它涉及一定程度的意见。我喜欢使用的经验法则是将变量限制在最窄的范围。如果在更高的范围内声明某些内容，例如第一个示例中的类外，但未在课程外使用，则不要在那里声明它。这是最好的做法，因为它消除了不必要的范围污染，即使它在这里并不真正适用，它也是一个好习惯。因此，选择第三个将是最正确的＆＃34;正确的＆＃34; 如果你在构造函数中设置this.arr，而不是生命周期挂钩，它在语义上传达了arr与组件本身有关但不是状态的想法，并限制{{尽可能缩小范围。

约书亚·鲁宾指出，不要使用生命周期钩子。没有理由这样做，因为你可以直接在构造函数中设置它。

Answer 2

如果arr永远不会更改，则无需将其存储为组件状态，并且还需要将其挂在不必要的生命周期挂钩componentDidMount上，这只是使组件复杂化。这留下了一个 - 至少非常清楚。

如果其他地方不需要this.arr，还可以在构造函数中设置arr。如果为了讨论，你想要生成一个具有不同arr定义的组件的多个实例，你可以考虑通过props将它传递给构造函数并在那里设置this.arr以便值是特定于组件的。

哪个在React ES6中使用三个变量定义更好？为什么？

2 个答案: