H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【Web前端问题】react es6 中变量数组 定义在什么位置?

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]
}

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

回答:

谢邀!
感谢 @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…

回答:

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

回答:

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

回答:

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

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

回答:

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

本文地址:H5W3 » 【Web前端问题】react es6 中变量数组 定义在什么位置?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址