对比普通代码和函数

let b =1+a
// 这是函数 (不讨论参数)
let f= ()=>1+a
let b =f()

能看出来什么?

1.普通代码立即求值，读取a的当前值

2.函数会等调用时再求值,即延迟求值。且求值时才会读取a的最新值

对比React元素和函数组件

App1=React.createElement('div',null,n)
App1是一个React元素
App2=()=>React.createElement('div',null,n)
App2是一个React函数组件

启示

1.函数App2是延迟执行的代码,会在被调用的时候执行

2.注意我说的是代码执行的时机，没有在说同步和异步

目前小结

React元素

1.createElement的返回值element可以代表一个div

2.但element并不是真正的div (DOM对象)

3.所以我们一般称element为虚拟DOM对象

()=>React元素

1.返回element的函数,也可以代表一个div

2.这个函数可以多次执行，每次得到最新的虚拟div，

3.React 会对比两个虚拟div，找出不同，局部更新视图