React使用总结

React使用过程中的经验总结:

• 封装form组件.可以只用Form.create()包裹封装的组件。
• changeState方法重载,
  
  • (value,key) state 的直接属性和值
  • (value,"key_parent,key_child....") 中间用, 隔开，表明state中属性的属性。
  • [{value:value,key:key}] 批量更新state的直接属性。
  • [{value:value,key:"key_parent,key_child"}] 批量更新state 中属性的属性。
• Ant_design 中Table 的Radio 和 checkbox 可以和onRowClick 合并，都仅仅只是改变选中ids数组 ，然后再componentWillUpdate或者componentWillReceiveProps生命周期中遍历再给上其他需要的值，这样可以避免onSelect和onRowClick一些相同的代码.
• 在ComponentWillUpdate(nextProps,nextState)不能给nextState直接赋值一个对象，也就是说组件中不能改变组件的state的引用;（未确认）但是有replaceState函数或许能用。
• 使用对象的属性时候，一定要校验对象存在，不能直接调用，state&&state.prototype
• (待实现)封装no-flux或者refast的execute方法，看能不能在发送请求之前Loading，之后hide(),或者再封装到父类中。;
• 可以在Constructor方法中通过判断来源哪里，然后通过call调用不同的方法来初始化当前类。场景:“记一笔”页面会有不同的来源都到这个页面，那么constructor方法写的很乱。
• 从中间件中得到的启发(待实践)：代码分为业务代码和非业务代码的技术代码(中间件);那么代码就可以这样来区分一下，例如”校验功能”就是中间件代码;还有就是”异步重复加载中间件”，有些数据需要不断从后台来抽取，那么就可以弄一个中间件
• 代码流程的控制也有两种：return和callback
• React有如下的一些函数:setProps,replaceProps,setState,replaceState,forceUpdate
• React的setState是异步执行的(根据生命周期在render方法调用之前已经放到队列中的一起来更新,（自己理解的，看了网上源码，没看懂。。。。）)，但是在addEventListener,setTimeout,ajax回调中this.setState是立即触发的,因为这些已经跳出了生命周期函数了。
• React-router中withRoute的用法(不知道哪天突然出现的,网上的依然看不懂。。。),正常来说用Route匹配的组件会有额外的关于路由的props,普通的组件是没有的，但是用withRoute包装过后，在它被渲染的时候，就会有路由的相关信息，但是他的路由信息是他的上层组建中那个放在Route component中组件的信息。
• setState的三种方式:
  
  • 对象,执行两次只加1
    setState({demo:this.state.demo+1});
  • 函数，执行两次加 2
    setState((preState,preProps)=>{return {demo:preState.demo+1}});
    -封装异步
    syncSetState(obj){
return new Promise(
function(resolve,reject){
this.setState(obj,resolve)
}.bind(this));};
\\调用
syncSetState(obj).then(function(){console.log(this.state);})

• 前端会存在需要不断调用的接口，那么这个时候可以写一个中间件;
  
/*
url:需要调用的接口；
compareFun(success,error);对加载完成的数据进行处理，并在比对完成之后调用不同的函数来处理比对结果;类似事件监听了,
*/
function syncLoadData(时间间隔,url,compareFun)；
//还需要获取下来之后存到数据集中，然后提供方法获得数据