首页 > 代码库 > react 开发

react 开发

总结下过去一年的 react 开发经历

用的是 flux 开发流程,中间穿插一些 emitter,大体上是服从下图规范

技术分享

 flux 开发是以广播形式进行 trigger 的,通过 AppConstants 注册监听语句,UIActions 注册触发函数,AppDispatcher.register接收事件,根据UIActions 的  actionType 是否等于 AppConstants 的语句块来判断是否触发对应逻辑。

比较好用的 react 插件有 react-modal, rc-slider, react-number-input, react.pure.component

react router 单独拿出来说,在 componentDidMount生命周期内,可以通过以下语句注册routerWillLeave

this.props.router.setRouteLeaveHook(this.props.route, this.routerWillLeave);

这个的意义在于可以在<Link /> 触发跳转之前给予判断跳转条件,返回 false 则不跳转,默认返回 true
对于 react.pure.component 的使用,若当前组件内的 state 对象有多层嵌套则不建议使用,PureComponent 组件的刷新当且仅当自身的state,或者 props改变时触发,作用是
避免组件状态无更改的刷新,这类刷新通常出现在子组件嵌套在父组件当中例如

<Father>
  <Child />
</Father>

其中如果 Child 不是 PureComponent,那么 Father 状态更改了,Child 没有更改,Father 刷新了,Child 也就跟着刷新了,这个就是性能的浪费。

当然如果不用 PureComponent 就需要在 ShouldComponentUpdate(nextProps, nextState) 这个生命周期当中进行判断当前组件是否需要刷新。

另一个问题是 react 对数组 array 循环渲染时 key 的设置,切勿用1234567 这样的序号设置,出现问题是在array 出现删除元素的时候,会有一定概率出现渲染并未改变的问题,而且这个问题较难排查

react 开发