react es6 中变量数组 定义在什么位置？

Question

react es6 中变量数组 定义在什么位置？

let arr0 = [7,8,9]
class WatchStore extends Component {
  constructor(props) {
    super(props);
    this.state = {
      arr: [4,5,6]
    }
  }
  this.arr2 = [1,2,3]
}

上面三个数组定义的方法，该用哪种方法？
数组数据不需要渲染的，只做暂时缓存对比新数据使用

Answer 1

谢邀！
感谢 @Getaj 、 @lixuejiang 、@dablwow80 等所有参与问题讨论的朋友！该问题确实是一个好问题，忍不住给作者点个赞！经过一番折腾，我大致说一下我的收获：

this.state方式
React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。对于渲染UI，state是十分有用的。反过来讲，如果不需要渲染UI，就不应该用state，如果state并不是用于渲染UI，虽然在这里使用并没有错，但我们是把state和UI联系在一起的，这也算得上语义问题！至于this.state到底会不会触发render函数或diff算法？答案是不会的，除非你调用setState()和forceUpdate()。

let arr0 和 this.arr2 方法
从变量使用经验法则来说，变量应该限制在最窄的范围内。如果变量在更大的范围内声明, 例如let arr0在类之外声明, 但不在类之外使用, 则就不应该在类之外声明它，这是最好的做法, 因为它消除了不必要的范围污染，虽然这种方式在这里一点错没有, 至少这是一个良好的编码习惯。因此, 选择在constructor使用this.arr2将是最合适的，这样写法表示该变量属于组件本身, 而不是状态, 并将其限制在尽可能最窄的范围内。

参考链接：
https://reactjs.org/docs/reac...
https://reactjs.org/docs/reac...
https://stackoverflow.com/que...

Answer 2

理论上数组引用没变不会影响react组件更新，定义在哪都无所谓
个人觉得逻辑上放在外面比较好，让组件数据更清晰一点

Answer 3

谢邀，一直以来我都没考虑过这个问题
1.关于放在state里的常量是不是会发生re-render,我认为是不会的，所以更不会产生diff，react重新渲染的前提是state有更新，也就是调用了setState方法，而且对componentShouldUpdate没做处理的情况下，才会触发re-render，而如果这里用的是常量，那么应该是不会有在代码里进行setState的操作的，所以对性能应该不会有什么影响
2.我理解的state里的数据是要和view关联的，因为react的思想是view=render(state)，如果你的数据不需要在view里显示，那么没必要放到state里

Answer 4

首先，因为数组与组件render无关，所以不应该放到组件state里。
其次，数组变量是用于缓存中间变量，属于组件实例对象的私有属性，而不是常量，也不是所有实例对象的共享变量，如果数组放在class外部定义，是会被所有class实例对象所共享的，任何一个实例对象都可以修改这个数组变量。这显然也符合你的需求。
综上，使用this.arr定义数组最合适。

另外，可以参考我的这篇文章：https://segmentfault.com/a/11...，有介绍Props、State和组件的普通属性的用法。

Answer 5

ES6编码规范里的属性是直接定义在类里的，比如name = "name"