React学习日记

573 阅读4分钟

初学React one day

React中的核心概念:

虚拟DOM

  • 为什么要实现虚拟DOM:
    • DOM:是由浏览器中的js提供的功能,所以只能人为使用浏览器固定的api操作DOM对象
    • 虚拟DOM:并不是浏览器体用的,是程序员手动模拟实现的,类似浏览器中的DOM,但有本质的区别
    • 哪怕一丢丢的数据变化,也会被强制重建DOM树,这么做会涉及到很多元素的重绘和重排,导致性能浪费严重;所以实现按需更新页面的元素,只需要吧修改的数据所对应的DOM树重构,其他不变,就能避免这种性能浪费,
    • 要实现上述解决方案,只需要拿到页面更新前的内存中的DOM树,同时再拿到页面更新前,新渲染出来的内存DOM树,然后对比着两棵新旧DOM树,只需要找到那些需要被重新创造和修改的元素,这样就能实现DOM的按需更新
    • 如何拿到新旧两棵DOM树,浏览器没有这种功能,那么只能想办法自己模拟两棵新旧DOM树,使用JS创建一个对象,来模拟每个DOM节点,然后每个DOM节点又提供了类似于children这样的属性,来描述当前DOM的子节点,这样当DOM节点形成了嵌套关系,就模拟出了一个DOM树,
    • 虚拟DOM的本质:就是用js对象来模拟DOM树,
    • 虚拟DOM的目的:为了实现DOM节点的高效更新
    • 实现,使用Diff算法,寻找新旧DOM树的差别,只更新有改变的元素,从而达到高效并且不消耗性能

React创建页面:

  • 在 React 学习中,需要安装 两个包 react react-dom,

    • react 这个包,是专门用来创建React组件、组件生命周期等这些东西的;
    • react-dom 里面主要封装了和 DOM 操作相关的包,比如,要把 组件渲染到页面上
  • React.createElement() 方法:

    • 用于创建 虚拟DOM 对象,它接收 3个及以上的参数
    • 参数1: 是个字符串类型的参数,表示要创建的元素类型
    • 参数2: 是一个属性对象,表示 创建的这个元素上,有哪些属性
    • 参数3: 从第三个参数的位置开始,后面可以放好多的虚拟DOM对象,这写参数,表示当前元素的子节点
 var myDiv = React.createElement('div', { title'this is a div', id'mydiv' }, '这是一个div', myH1)
 //ReactDOM.render('要渲染的DOM元素','要渲染到页面的哪个位子')
ReactDOM.render() 方法的第二个参数, 不接受字符串, 而是需要传递一个原生的DOM对象
ReactDOM.render(myDiv, document.getElementById('app'));

小结:首先创建虚拟DOM对象,然后用render将要渲染的虚拟DOM元素渲染到页面指定的位子,

看一个例子:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
 
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
    //将一个 h1 标题,插入 id="example" 节点中
    <h1>Hello, world!</h1>,
    document.getElementById('example')
);
</script>
 
</body>
</html>

小结:实例输出为Hellow,world!,我们引入了三个库

  • react.min.js:React的核心库
  • react-dom.min.js: 提供DOM相关的功能
  • babel.min.js:Babel可以将ES6代码转换成es5,这样可以在目前不支持es6浏览器上执行react代码,Babel内嵌了对JSX的支持,通过将Babel和babel-sublime包,一同使用可以让源码的语法渲染上升到一个全新的水平
  • 如果我们需要使用 JSX,则 标签的 type 属性需要设置为 text/babel。

补充知识:

Diff算法

  • tree diff: 新旧DOM树,逐层对比的方式就叫做tree diff ,当我们从前到后,把所有的层节点对比完毕以后,必然能够找到需要更新的元素
  • component diff:对比每一层的时候,组件之间的对比叫做component diff;当对比组件的时候,如果两个组件的类型相同,则暂时认为这个组件不需要更新,如果组件的类型不同,则立即将就组建移除,新建一个组件,替换到被移除的位子
  • element diff:在组件中,每个元素之间也要进行对比,那么元素级别的对比,叫做element diff,
  • key:key这个属性,可以把页面上的DOM节点和虚拟DOM中的对象,做一层关联关系;