1. state的定义
状态（state） 和 属性（props） 类似，都是一个组件所需要的一些数据集合，但是它是私有的，并且由组件本身完全控制，可以认为它是组件的“私有属性（或者是局部属性）”。
那我们如何改变这些“私有”的状态或者属性呢？React就引入了setState
2. setState的三个特性
a. 不要直接修改 state(状态)
例如：
this.state.comment = 'Hello';
此时，你虽然改变了this.state.comment的状态，但是改状态不会被重新渲染到组件上。
使用setState对this.state状态进行修改：
this.setState({
comment: 'Hello'
});
b. setState可能是异步的
官方文档有说，setState更新可能是异步的，所以 this.props 和 this.state 可能是异步更新的，你不应该依靠它们的值来计算下一个状态。
怎样理解可能是异步这个概念呢？
阅读React的源码，我们了解到，setStated的执行原理：
setState执行过程
- setState接收一个新的状态
- 该接收到的新状态不会被立即执行么，而是存入到pendingStates（等待队列）中
- 判断isBatchingUpdates（是否是批量更新模式）
1>. isBatchingUpdates: true 将接收到的新状态保存到dirtyComponents(脏组件)中
2>. isBatchingUpdates: false 遍历所有的dirtyComponents， 并且调用其 updateComponent方法更新pendingStates中的state 或者props。执行完之后，回将isBatchingUpdates: true。
c. state(状态)更新会被合并
当你调用 setState()， React 将合并你提供的对象到当前的状态中。所以当State是一个多键值的结构时，可以单独更新其中的一个，此时会进行“差分”更新，不会影响其他的属性值。
所以，setState并不是用异步的方式进行实现的，采用的是模拟异步的方式。即，setState可能是异步的。
一般我们会遇到这样的面试题：
this.setState({ number: this.state.number + 1 });
console.log(this.state);//0
this.setState({ number: this.state.number + 1 });
console.log(this.state);//0
setTimeout(() => {
this.setState({ number: this.state.number + 1 });
console.log(this.state);//2
this.setState({ number: this.state.number + 1 });
console.log(this.state);//3
}, 0);
为什么执行结果是 0 0 2 3 呢？
其实是，该代码在执行的时候，会先执行前4行同步代码，此时isBatchingUpdates: true，前两次执行的this.setState会被缓存到dirtyComponents中，所以前两次在打印状态的时候并没有改变状态值，打印结果为0。等同步代码执行完时，isBatchingUpdates: false，所以在执行setTimeout时，会先去遍历执行dirtyComponents，又因为state(状态)更新会被合并，所以其实前两次同步代码中对setState的执行被合并为一次，在执行到setTimeout里边的代码时，isBatchingUpdates已经为false，其this.setState会直接按顺序执行。固打印结果为 0 0 2 3。
3. 模拟源码实现setSate：
class Transaction {
constructor(wrappers) {
this.wrappers = wrappers;//{initialize,close}
}
perform(anyMethod) {
console.log("this.wrappers:", this.wrappers);
this.wrappers.forEach(wrapper => wrapper.initialize());
anyMethod.call();
this.wrappers.forEach(wrapper => wrapper.close());
}
}
//batchingStrategy.isBatchingUpdates batchedUpdates
let batchingStrategy = {
isBatchingUpdates: false,//默认是非批量更新模式
dirtyComponents: [],// 脏组件 就组件的状态和界面上显示的不一样
batchedUpdates() {
this.dirtyComponents.forEach(component => component.updateComponent());
}
}
class Updater {
constructor(component) {
this.component = component;
this.pendingStates = [];
}
addState(partcialState) {
this.pendingStates.push(partcialState);
batchingStrategy.isBatchingUpdates
? batchingStrategy.dirtyComponents.push(this.component)
: this.component.updateComponent()
}
}
class Component {
constructor(props) {
this.props = props;
this.$updater = new Updater(this);
}
setState(partcialState) {
this.$updater.addState(partcialState);
}
updateComponent() {
this.$updater.pendingStates.forEach(partcialState => Object.assign(this.state, partcialState));
this.$updater.pendingStates.length = 0;
let oldElement = this.domElement;
let newElement = this.createDOMFromDOMString();
oldElement.parentElement.replaceChild(newElement, oldElement);
}
//把一个DOM模板字符串转成真实的DOM元素
createDOMFromDOMString() {
//this;
let htmlString = this.render();
let div = document.createElement('div');
div.innerHTML = htmlString;
this.domElement = div.children[0];
//让这个BUTTONDOM节点的component属性等于当前Counter组建的实例
this.domElement.component = this;
//this.domElement.addEventListener('click',this.add.bind(this));
return this.domElement;
}
mount(container) {
container.appendChild(this.createDOMFromDOMString());
}
}
// 面向切片编程 AOP
let transaction = new Transaction([
{
initialize() {
batchingStrategy.isBatchingUpdates = true;//开始批量更新模式
},
close() {
batchingStrategy.isBatchingUpdates = false;
batchingStrategy.batchedUpdates();//进行批量更新，把所有的脏组件根据自己的状态和属性重新渲染
}
}
]);
window.trigger = function (event, method) {
let component = event.target.component;//event.target=this.domElement
transaction.perform(component[method].bind(component));
}
class Counter extends Component {
constructor(props) {
super(props);
this.state = { number: 0 }
}
add() {
this.setState({ number: this.state.number + 1 });
console.log(this.state);//0
this.setState({ number: this.state.number + 2 });
console.log(this.state);//0
setTimeout(() => {
this.setState({ number: this.state.number + 3 });
console.log(this.state);//5
this.setState({ number: this.state.number + 4 });
console.log(this.state);//9
}, 1000);
}
render() {
return `<button onclick="trigger(event,'add')">
${this.props.name}:${this.state.number}
</button>`;
}
}
