React 学习笔记(二)

看了慕课网双流的视频教程,记录了一些React笔记。

组件化

  • 封装(视图、数据、变化逻辑)
  • 复用(props)

JSX

  • 语法糖
  • 开发环境下将JSX编译成JS
  • 降低学习成本和编码工作量
  • 独立的标准,可以用在其他地方(例如:Preact)
  • 核心函数:React.createElement
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import Test from './Test'

var jsx = (
<div>
<Test/>
<input type="text" value={this.state.value}/>
<ul>
{
list.map(item => {
return (
<li>{item}</li>
)
})
}
</ul>
</div>
)

通过Babel转换后

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import Test from './Test';

var jsx = React.createElement(
"div",
null,
React.createElement(Test, null),
React.createElement("input", { type: "text", value: this.state.value }),
React.createElement(
"ul",
null,
list.map(item => {
return React.createElement(
"li",
null,
item
);
})
)
);

自定义组件的解析

处理组件(自定义标签)的时候,传入的第一个参数是构造函数,而不是字符串。

需要组件声明render函数

实际上是先根据props执行组件的render函数,返回一个vnode

可以理解为递归

vdom

  • snabbdom
  • h,patch
  • jsx -> html 的过程中需要vdom
  • 初次渲染 ReactDOM.render(\<App />, container),触发patch(container, vnode)
  • re-render - setState,触发patch(vnode, newVnode)

setState

  • 异步
  • 出于性能考虑,不能每次更改state都重新渲染
  • 即使每次都重新渲染,用户也看不到,因为js执行的时候,dom会卡顿
  • vue修改属性也是异步的

过程:

  • 每个组件实例,都有renderComponent方法(extends Component)
  • 执行renderComponent会重新执行实例的render
  • render返回newVnode,然后拿到preVnode
  • 执行patch(preVnode, newVnode)

Vue & React

  • vue-本质是MVVM框架,由MVC发展而来
  • react-本质是前端组件化框架,由后端框架发展而来
  • vue-使用模板
  • react-JSX
0%