RN基础

63次阅读

共计 952 个字符,预计需要花费 3 分钟才能阅读完成。

生命周期
1. getDefaultProps() 初始化一些默认的属性
2. constructor() 状态进行初始化
3. componentWillMount() render() 之前
4. render() 渲染组件
5. componentDidMount() 组件状态改变后执行
一般会将网络请求等加载数据的操作,放在这个函数里进行,来保证不会出现 UI 上的错误。
6. componentWillReceiveProps(nextProps) 当组件接收到新的 props 时,会触发该函数
7. shouldComponentUpdate() 控制状态改变后渲染视图
8. componentWillUpdate() 视图即将改变
9. componentDidUpdate() 视图已经改变后执行
10. componentWillUnmount() 即将销毁
安卓和 ios 的一些兼容问题
1.textinput
android 默认有下划线 ios 无
2.text
android 默认背景透明 ios 无
text 在 ios 下无法设置圆角,必须套 view
3.overflow:hidden
android 没效果 超出部分不可见 ios 可以
4.image 的 borderTopLeftRadius
ios 不可以 可以外面 套一层
5.scrollview 
    scrollEventThrottle ios 默认 16  android 默认 0    嵌套 listview 时  list 滑动 ios 有些时 list 滑   android 是 先滑 scrollview 滑完了 在 滑 list    建议修改布局直接使用 list  套所有
6. statusbar
android 可定制沉浸 ios 默认 沉浸

性能优化
一. 简单粗暴 setNativeProp
它直接在底层(DOM、UIView 等)而不是 React 组件中记录 state(这样会使代码逻辑难以理清)
二、使用 setState => shouldComponentUpdate
三、清楚 console.log
四、InteractionManager.runAfterInteractions 先动画后渲染数据 TouchableOpacity
五、使用 transform: [{scale}] 调整容器(图片)的宽高
六、点击变化,将作何的动画包装在 requestAnimationFrame 处理器中

正文完
 0