H5页面开发笔记（react技术栈）

1、子组件接收父组件的参数，要在子组件的componentDidMount函数中更改当前组件的state，若写在componentWillMount函数中，则会导致初始化界面UI的时候不能得到预期的效果。这是因为willMount方法会在dom还没有渲染完成的时候就会触发，而这时父组件传给子组件的界面初始状态state还未到达，而didMount方法是组件在完全挂载到网页上才会被调用执行，保证数据的加载。在这方法中调用setState方法会触发重渲染，从而能达到预期效果。

 

2、与组件界面UI无关的变量，不要都放在state中。这是因为setState方法更改state的过程是异步的。举个栗子：更改state中A属性的状态后，立即调用另一个方法，而另一个方法是需要用到属性A的，经调试发现马上更改后立即获取，是获取不到最新的state中的变量值的。通常如果一个属性值并不控制整体界面的UI，可以将其直接挂在this对象上，而不需要放进state中。这样就能实时获取到属性的最新值了。即使这个属性控制着子组件的UI，也是可以这么做的。

 

3、设置同样字体大小，chromel浏览器上有时会显示偏大的解决方案：给指定元素设置max-height的值即可。

 

4、封装好的组件A，在渲染的时候为列表接收来自父组件的参数。渲染这样一个组件A列表，有可能只有第一个组件的状态能正确的跟数据状态匹配上，而其他组件不能，这个时候需要用componentDidMount方法与componentWillReceiveProps搭配使用，前者用于组件第一次接收父组件传来的contentInformation redux，而非首次接收参数则需要使用componentWillReceiveProps(nextProps)接收。

5、组件中设置定时器时需要注意销毁，否则会出现bug。比如在重复获取验证码这种操作的时候，会重复定时，从而出现倒计时非常快的现象。