React学习笔记

你觉得你用的react框架有什么特点呢？

1)使用jsx语法，可以在js中写html。
2)单向数据流：数据一旦更新，会渲染整个app。
react的渲染方式：
用户输入
从API获取数据
将数据传给顶层组件
React将每个组件渲染出来
由于是单向数据流，所以不会有双向数据绑定、数据模型的脏检查、确切的DOM操作。

react组件

可以接受参数、可复用、可以传递、返回结果(渲染组件)

虚拟DOM树

javascript虽然快，但是操作DOM却非常慢。

react的生命周期

安装：创建组件的实例将其插入DOM时，将按以下顺序调用这些方法：
constructor()
static getDerivedStateFromProps()
render()
componentDidMount()
更新：props or state的更改可能导致更新。重新呈现组件时，将按以下顺序调用这些方法：
static getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()
卸载：从DOM中删除组件时调用此方法。
componentWillUnmount()

setState是异步的还是同步的
异步

setState是如何实现的？
调用setState更新this.state不是马上生效的，是异步。
然后之后会发生什么？
会执行更新阶段的life circle hooks，调用render函数的过程中会执行diff算法。
Vdom
为什么需要vdom?
虚拟dom就是结构树和 dom 的结构一样的对象。
用虚拟dom配合diff算法找出需要更新的部分，避免额外更新dom的开销。
Diff算法的原理