- Props属性
- 状态机思维
- 状态机变量
- UI重新渲染的过程
- React组件优化
Props属性
1、props属性：通过组件数传递给组件的，用于定制组件的参数
2、在基础组件中可以使用响应的props来控制组件的样式，数据源等
3、自定义的组件可以使用自定义props属性，在render函数中引用this.props.属性名即可。
通过属性定制可以提高自定义组件的复用性。
4、props可以用作event handler来与子组件通信
状态机思维
组件的数据源有两种：props和state。
props在制定组件的生命周期中不可变，对于需要改变的数据，使用state。
props是外部传递的，state是内部定义的
React框架将所有UI视为一个简单的状态机，任意一个UI场景是状态机中的一种状态。
根据状态机变量的值，React框架渲染出状态机的当前状态，单个UI场景此时被渲染出来。
状态机变量值改变，UI状态机也在改变状态，UI场景随之不停地被重新渲染。
状态机变量
将状态机变量视为“不可变的常量”，不要出现 “this.state.状态机变量名=value”
需要改变状态机变量的值时，只能使用 this.setState函数
需要可以直接改变的变量，可以直接使用成员变量。
努力让自定义的RN组件成为无状态的RN组件 / 尽可能减少有状态的RN组件的数量
任何动态的输入应设计为状态机变量：如用户的输入，网络请求返回数据，定时器被触发事件等
好的设计思路：
创建多个只负责渲染数据的无状态RN子组件，封装在一个有状态的RN父组件中，
把这个有状态的RN组件的状态机变量的值，通过props传给无状态的RN子组件。
这种设计思路下，有状态的RN组件封装了交互逻辑，无状态的RN组件负责渲染UI界面。
UI重新渲染的过程
需要重新渲染UI时，使用最多的是setState函数，此外还有replaceState函数和forceUpdate函数
合并状态机变量：
setState(object oldState ,function callback)
执行了一个已存在状态机变量与新状态机变量合并的过程，与状态机变量值相关的组件都会被刷新
判断是否渲染：
boolean shouldComponentUpdate(object nextProps, object nextState)
传入的两个对象代表接下来准备进行渲染基于的props和state
组件可以实现该函数，在重新渲染时，先调用，如果返回false，放弃渲染
替换状态机变量：
replaceState(object nextState ,function callback)
删除所有已存在的状态机变量，只剩下该函数中的状态机变量
不建议使用，对从React.component继承的ES6类无效
强制启动渲染：
forceUpdate(function callback)
会导致所有级别的所有UI组件重新读区，计算与渲染
调用原因：UI中可变数据来源必须从状态机变量/属性外获取
应尽量避免使用此函数
渲染过程：
ReactComponent render()
理论上可以在自己的代码中调用这个函数来重新刷新组件。
但正确的方法是修改组件的状态机变量/属性
React组件优化
1.减少Render次数（render的时候有大量的对象复制操作，会产生大量的react element对象，每次render都会重新产生一份，对JSC引擎的开销会持续增大）
1.1.在shouldComponentUpdate函数中判断是否渲染，如某些属性更新的时候，才去render
1.2.父组件的render被执行，子组件的render就会被执行，把Component换成PureComponent，
属性不变的时候，减少子组件的变化
1.3.setState中避免使用箭头函数，会产生新的引用，即使子组件写成pureComponent都没有用，要把函数写成全局的，这样不会产生新的引用
1.4.使用Animated代替state
2.推迟render
初次加载数据，loading动画处于render未执行结束时返回了网络数据，会再次触发render方法，可能需要创建大量原生视图
使用InteractionManager.runAfterInteractions 方法，在有动画执行或者有触摸手势时，会延迟执行
网友评论