react|react 也就这么回事 04 —— 元素渲染
为了便于后续理解,我们再来回顾和总结前面几个章节的内容
1 元素及其创建
元素是构成 React 应用的最小砖块。
元素描述了你在屏幕上想看到的内容。
const element = Hello, world;
与浏览器的 DOM 元素不同,React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致。
我们用
React.createElement
来创建 React 元素(语法上还可以使用其语法糖 JSX)2 将一个元素渲染为DOM 想要将一个 React 元素渲染到指定的 DOM 节点中,只需把它们一起传入
ReactDOM.render()
:const element = Hello, world;
ReactDOM.render(element, document.getElementById('root'));
3 更新UI React 元素是不可变对象。一旦被创建,你就无法更改它的子元素或者属性。一个元素就像电影的单帧:它代表了某个特定时刻的 UI。
根据我们已有的知识,更新 UI 唯一的方式是创建一个全新的元素,并将其传入
ReactDOM.render()
。考虑一个计时器的例子:
function tick() {
const element = (Hello, world!
It is {new Date().toLocaleTimeString()}.);
ReactDOM.render(element, document.getElementById('root'));
}setInterval(tick, 1000);
这个例子会在
setInterval()
回调函数,每秒都调用 ReactDOM.render()
。4 React 只更新它需要更新的部分 【react|react 也就这么回事 04 —— 元素渲染】React DOM 会将元素和它的子元素与它们之前的状态进行比较,并只会进行必要的更新来使 DOM 达到预期的状态。
例如前面计时器的例子,尽管每一秒我们都会新建一个描述整个 UI 树的元素,React DOM 只会更新实际改变了的内容,也就是例子中的文本节点。
文章图片
公众号【前端嘛】
推荐阅读
- react-window|react-window 源码浅析
- react中配置路由
- React Native原理之跨端通信机制
- 记一次react前端项目打包优化的方法
- React 应用 (基于 React 脚手架)
- react|react 也就这么回事 01 —— React 元素的创建和渲染
- React|React 也就这样 01——React 元素的创建和渲染
- React|React - 高阶组件
- Day8.|Day8. React中的setState及更新机制看这篇就够了
- 将基于Appsync的react程序发布到AWS|将基于Appsync的react程序发布到AWS S3