STATE
state
import React, { Component } from 'react';
class Count extends Component{
constructor(props){
super(props);
this.state={count:0};
this.increase=this.increase.bind(this);
this.decrease=this.decrease.bind(this)
this.add=this.add.bind(this)
}
add(){
this.state.count=this.state.count+1
console.log(this.state.count)
}
increaseSelf(){
for(let i=0;i<1000;i++){
console.log(i)
this.setState({
count:this.state.count+1
})
}
}
increase(){
this.setState({
count:this.state.count+1
})
}
decrease(){
this.setState({
count:this.state.count-1
})
}
render(){
console.log('********组件渲染*********')
return(
<div style={{margin:"100px"}}>
<span>{this.state.count}</span>
<button onClick={this.add}>add</button>
<button onClick={this.increase}>increase</button>
<button onClick={this.increase}>decrease</button>
</div>
)
}
}
class App extends Component {
render() {
return (
<Count/>
);
}
}
export default App;1.直接修改state,点击add按钮5次，依次打印1,2,3,4,5,但是页面上显示仍然是0，虽然修改了state，但不会渲染组件。
2.点击add按钮5次，一次打印1,2,3,4,5,页面上显示仍然是0，此时点击increase按钮，页面数字变成6.
修改increase()函数
increase(){
this.setState({
count:this.state.count+1
})
this.setState({
count:this.state.count+2
})
this.setState({
count:this.state.count+3
})
}点击increase按钮，页面数字变成3。这是因为当前state.count的值是0，执行第一个setState()函数，将{count:0+1}映射到待执行队列，执行第二个setState()函数，将{count:0+2}映射到待执行队列，后执行的setState将覆盖掉前面的，最后一个是有效的。待执行队列中的count的值是3，执行更新。
如果改变三个setState()函数的顺序，最后一个有效。下列代码点击increase按钮，数字变成2
increase(){
this.setState({
count:this.state.count+1
})
this.setState({
count:this.state.count+3
})
this.setState({
count:this.state.count+2
})修改increase()函数，点击increase按钮，数字变成6，执行前三个setState()函数时，最后一个有效，待执行队列中的count的值是3，当setState的参数是函数时，prevState的值从待执行队列中取得，所以最终结果是6。
increase(){
this.setState({
count:this.state.count+1
})
this.setState({
count:this.state.count+2
})
this.setState({
count:this.state.count+3
})
this.setState((prevState, props)=>{return{count:prevState.count+1}})
this.setState((prevState, props)=>{return{count:prevState.count+1}})
this.setState((prevState, props)=>{return{count:prevState.count+1}})
}修改increase()函数，每点击一次，数字加1，不管点击速度有多快
increase(){
this.setState({
count:this.state.count+1
})
}修改increase()函数
increase(){
this.increaseSelf()
}从上面的两种情况可以猜测，待执行队列的执行时机，根据用户的行为，用户的一次操作，可能执行很多setState()函数，但是执行队列只执行一次。
修改increase()函数，点击increase按钮，数字变成2，setTimeout()也可以执行一次待执行队列（本质是setTimeout执行时，isBatchingUpdates是false）。实际上执行了两次render()函数。
increase(){
this.setState({
count:this.state.count+1
})
setTimeout(()=>this.setState({
count:this.state.count+1
}),0)
}修改increase()函数，点击increase按钮，数字变成2，setTimeout()函数中的所有setState()都是同步执行，本质是isBatchingUpdates的值是false。
increase(){
setTimeout(()=>{
this.setState({
count:this.state.count+1
});
this.setState({
count:this.state.count+1
});
},0)
}replaceState()和setState()的区别
比如现在state的结构是
state={
name:"Jack"
age:18
}执行setState({name:"Tom"}),后
state={
name:"Tom"
age:18
}如果执行的是replaceState({name:"Tom"})
state={
name:"Tom"
}react中的事件是合成事件。其中就有事务对事件函数进行封装。
function method(){
console.log('111')
};
transaction.perform(method);
//执行initialize方法
//输出'111'
//执行close方法
**************************************************************************************************************
1.执行dispatchInteractiveEvent，此时isBatchingUpdates的值是false
function dispatchInteractiveEvent(topLevelType, nativeEvent) {
console.log('dispatchInteractiveEvent',isBatchingUpdates)//dispatchInteractiveEvent false
interactiveUpdates(dispatchEvent, topLevelType, nativeEvent);
}2._interactiveUpdates函数就是interactiveUpdates$1函数
function interactiveUpdates(fn, a, b) {
return _interactiveUpdates(fn, a, b);
}3.此时isBatchingUpdates的值是false，执行performWork()，isBatchingUpdates = true;finally最后执行，将isBatchingUpdates变成false，执行performSyncWork();更新内容。
function interactiveUpdates$1(fn, a, b) {
console.log('interactiveUpdates$1函数',isBatchingUpdates);//false
console.log(isBatchingInteractiveUpdates);//false
if (isBatchingInteractiveUpdates) {
return fn(a, b);
}
// If there are any pending interactive updates, synchronously flush them.
// This needs to happen before we read any handlers, because the effect of
// the previous event may influence which handlers are called during
// this event.
if (!isBatchingUpdates && !isRendering && lowestPendingInteractiveExpirationTime !== NoWork) {
// Synchronously flush pending interactive updates.
performWork(lowestPendingInteractiveExpirationTime, false, null);
lowestPendingInteractiveExpirationTime = NoWork;
}
var previousIsBatchingInteractiveUpdates = isBatchingInteractiveUpdates;
var previousIsBatchingUpdates = isBatchingUpdates;
isBatchingInteractiveUpdates = true;
isBatchingUpdates = true;
try {
return fn(a, b);
} finally {
isBatchingInteractiveUpdates = previousIsBatchingInteractiveUpdates;
isBatchingUpdates = previousIsBatchingUpdates;
if (!isBatchingUpdates && !isRendering) {
performSyncWork();
}
}
}4. dispatchEvent()调用batchedUpdates(),isBatching开始是false,执行_batchedUpdates()
var isBatching = false;
function batchedUpdates(fn, bookkeeping) {
console.log(isBatching);//false
console.log(isBatchingUpdates);//true
if (isBatching) {
// If we are currently inside another batch, we need to wait until it
// fully completes before restoring state.
return fn(bookkeeping);
}
isBatching = true;
try {
return _batchedUpdates(fn, bookkeeping);
} finally {
// Here we wait until all updates have propagated, which is important
// when using controlled components within layers:
// https://github.com/facebook/react/issues/1698
// Then we restore state of any controlled component.
isBatching = false;
var controlledComponentsHavePendingUpdates = needsStateRestore();
if (controlledComponentsHavePendingUpdates) {
// If a controlled event was fired, we may need to restore the state of
// the DOM node back to the controlled value. This is necessary when React
// bails out of the update without touching the DOM.
_flushInteractiveUpdates();
restoreStateIfNeeded();
}
}
}经过一系列函数调用执行incease()函数，执行setState()函数
Component.prototype.setState = function (partialState, callback) {
!(typeof partialState === 'object' || typeof partialState === 'function' || partialState == null) ? invariant(false, 'setState(...): takes an object of state variables to update or a function which returns an object of state variables.') : void 0;
this.updater.enqueueSetState(this, partialState, callback, 'setState');
};