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%