React之prop和虚拟Dom（四）

一、PropTypes 和 DefaultProps

1.PropTypes 和 DefaultProps
通过PropTypes对组件中的数据进行强检验
通过defaultProps对组件中数据进行设置默认值

TodoItem.propTypes = {
	test: PropTypes.string.isRequired,
	content: PropTypes.arrayOf(PropTypes.number, PropTypes.string),
	deleteItem: PropTypes.func,
	index: PropTypes.number
}
TodoItem.defaultProps = {
	test: 'hello world'
}

2.可以设置的类型
PropTypes.array
bool
func
number
object
string
symbol
node
element
3.api
optionalMessage: Proptypes.instanceOf(Message)
optionalEnum: Proptypes.oneOf([‘News’, ‘Photos’])
…见文档

二、Props，State与render函数

1.render函数
1） 当数据发现变化，render就会重新执行，页面视图就会发生变化
2） 当父组件的render函数被运行时，它的子组件的render函数都将被运行

三、虚拟DOM

1.传统视图更新方案

2.React性能优化方案是：（更新原理）

3.深入了解虚拟DOM

4.虚拟DOM中的diff算法

1.时间较短的多次setState会使用同一次setState，
######（是一个异步函数，会等一会在运行。）
2.采取同层比对，当发现一个点不同，将会把该点及其之下所有进行重新渲染，并且停止往下对比。
3.without keys 和 with keys
with key 不变化的组件可以进行复用，提高虚拟DOM比对的性能
因此尽可能不使用index做key值

四、React中的ref

帮助我们在react中找到标签，但尽量少用

<input
	id="insertArea"
	className='input'
	value={this.state.inputValue}
	onChange={this.handleInputChange}
	ref={ (input) => { this.input = input}}
/>

此处的this.input指向的就是当前这个input标签，相当于就是一个引用ref
使用如下，用this.input去代替e.target

handleInputChange(e) {
	const value = this.input.value;
	this.setState( () => ({
		inputValue: value
	}))
}