React学习笔记之React原理

一、setState()

1.setState()方法说明

1）更新数据：异步更新

使用setState时，后面的setState不要依赖前面的setState

可以使用多次setState，但是只渲染一次（只有一次render）

2）推荐语法

//异步更新state，但是后面的setState可以依赖前面的setState

this.setState((state,props) => {

return {

count: state.count+1

}

})

3）第二个参数

状态更新完， render渲染完成之后，立即执行

 二、JSX语法的转化过程

 三、组件更新机制

四、组件性能优化

 1.减轻state

跟渲染没有关系，且很多方法都需要访问的变量，就存储在this中

 2.避免不必要的重新渲染

场景：有时候界面没有变化，无需重新渲染界面，所以使用shouldComponentUpdate进行判断，

 nextState获取最新状态

nextState和nextProps都可以进行判断，区别：状态是自己的，就用setState；状态是接收的，就用setProps

3.纯组件

 5.虚拟DOM和Diff算法

实现了高效更新，并且模型也很简单

 

 Diff过程发生在组件render调用后，根据状态和JSX结构生成虚拟DOM对象

6.总结

setState异步更新数据，多次调用后，一次性render