React系列之开发大型网站最佳实践

React最佳实践

author huangteng

---

前言

react构建应用的细枝末节的问题。看起来无关痛痒，实则关系到整个应用的结构是否合理，实现是否合理，性能是否优化，小细节看出大问题。
整理出一些实践细节，满满的都是套路。不分顺序。

实践

1. 我们是可以在componentDidMount或者componentDidUpdate中去执行ajax  获取数据，但是这样代码臃肿，结构混乱，性能降低，交给rudex吧，ajax的操作都放到action中不是最佳实践吗?

2.  事实证明ajax越来越让我们难以接收了，是不是考虑替代方式，比如websocket，或者是我想说的window.fetch()，虽然只有chrome和ff支持，不过有polyfill嘛，兼容不是问题啊

3.  生命周期函数中的逻辑写太多了不好吧亲，可以想法子丢在render中一部分啊。

4.  this.state = { } 中不要有计算哦亲，什么obj.name + “sss”之类的

5.  其实应该少用state， 用props 挺好

6.  开发过程中对组件树的良好设计可以事半功倍

7.  可以忘记吃饭也不要忘记PropTypes 验证哦

8.  能用三元判断符，就不用 If ，直接放在 render()里

9.  不要把 display logic 写在componentWillReceiveProps或componentWillMount中，把它们都移到 render()中去。(与第3重复，只是强调一下)

10.  合理运用context可以简化一下开发

11.  pureRender优化可以减少重复加载的浪费

12.  immutable data的使用是必须的

13.  尽量多用无状态组件(函数声明组件)

14.  区别开state和props，参考

http://www.jianshu.com/p/90a72128ec76
简单粗暴的说就是多用props，少用state，不能用state的情况
1. 除本组件及子组件外，你要用的属性别的组件还要用的，不要放在state
2. 可以被计算或者退到出来的不要放在state里

15.  确保你的component很小，简单说return()里面的代码超过10行，就是太大了，应该拆分了。

16.   自定义函数bind(this)一定写在constructor中

17.  想想reducer的按需加载

18.  你可以在componentDidUpdate里做的更多。比如要实时获取数据

componentDidUpdate(){    if(this.props.data !==data){        request('http://.......')    }}

19.   大量数据都放进store注定了你的应用会卡爆的

20.   合理使用react-redux的connect函数可以优化结构哦

21.   待续