pureComponent导致的setState数据变化后不更新

以下是一个racct-native代码示例，展示 PureComponent 的检查导致的数据更新后，一直不触发render的现象

• 首先，我们都知道，PureComponent 其实就是帮我们做了shouldComponentUpdate生命周期里的逻辑-->【浅比较】
• 其次，PureComponent 重写的SCU（shouldComponentUpdate）其实就是shallow equal 两类：（1）state和nextState（2）prop和nextProps。
• 再者，一旦shouldComponentUpdate返回false，那就一定不会触发render（）
• 原因，shouldComponentUpdate是执行于render之前的

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { Component, PureComponent } from 'react'
import { Text, View} from 'react-native'

type Props = {}
export default class App extends PureComponent<Props> {
	constructor(props) {
		super(props)
		this.togglePic = this.togglePic.bind(this)
		this.stopToggle = this.stopToggle.bind(this)
		this.timer
		this.state = {
			index: 0,
		}
	}
	componentDidMount() {
		this.togglePic()
	}
	componentWillUnMount() {
		this.stopToggle()
	}
	// shouldComponentUpdate(nextProps, nextState) {
	// 	console.log('nextProps, nextState', nextProps, nextState)
	// 	return false
	// }
	togglePic() {
		this.timer = setInterval(() => {
			console.log(111)
			this.setState((preState, currentProps) => {
                // 下面这条指令会导致preState的值被改变，相当于先赋值给了preState再赋值给                    nextIndex
				let nextIndex = ++preState.index
                // 正确做法
                // let nextIndex = preState.index + 1 
				return { index: nextIndex }
			})
			// this.setState({ index: this.state.index + 1 })
		}, 1000)
	}
	stopToggle() {
		clearInterval(this.timer)
	}

	render() {
		console.log(222)
		return (
			<View>
				<Text>{this.state.index}</Text>
			</View>
		)
	}
}