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。比如在重复获取验证码这种操作的时候,会重复定时,从而出现倒计时非常快的现象。