学习React基础

1.0 React历史与背景

 

2.0 以组件方式思考UI的构建

1、以组件方式思考UI的构建

2、单一职责原则

3、DRY原则

 

3.0 理解JSX

JSX：在JavaScript代码中直接写HTML标记

本质：动态创建组件的语法糖

 

JSX表达式：

JSX本身也是表达式

表达式写在属性中  attrs={1+2+3+4}

延展属性 ...props

表达式作为子元素

 

JSX的优点：

1、声明式创建界面的直观

2、代码动态创建界面的灵活

3、无需学习新的模板语言

 

JSX约定：

1、小写的tag为DOM原生节点

2、大写字母开头为自定义组件

3、JSX标记可以直接使用属性语法 <menu.Item />

 

4.0 React 生命周期

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

分三个阶段的生命周期：挂载时、更新时、卸载时

1、挂载时：

constructor、getDerivedStateFromProps、render、React更新DOM和refs、componentDidMount

2、更新时：(触发更新的3个方式：New props / setState()  / forceUpdate() )

getDerivedStateFromProps、

shouldComponentUpdate（Virtual DOM， 决定什么东西应该重绘，pureCompnent来是实现，性能优化的时候可以）、render、getSnapshotBeforeUpdate、react更新DOM和refs、componentDidUpdate

 

3、卸载时：componentWillUnmount

 

滚动条的

5.0 Virtual DOM

diff算法：判断新旧UI的区别算法  O(n)

广度优先分层比较：主要就是删除和添加，新的UI中不存在旧的UI中存在就删除，新的UI中存在旧的不存在就添加

 

虚拟DOM的两个假设：

1、组件的DOM 结构相对稳定的；

2、类型相同的兄弟节点可以被唯一标识；

 

6.0 高阶组件&函数作为子组件

待更新......