react第三天

react的核心知识点

• 虚拟dom
• JSX语法
• 单向数据绑定
• 组件化

虚拟dom的概念

1.虚拟dom和dom的本质区别：
dom是浏览器里面自带的，虚拟dom是js模拟的

2. 虚拟dom的原理和作用：
   用js模拟出dom的层次结构，通过对比新旧两颗虚拟dom的不同，得到页面哪些地方需要更新，最后再去更新这个不同的地方，实现了局部更新（高效更新），而不是页面的重新渲染（大量更新），优化了性能
3. diff算法
   先比较所有元素的节点，再比较所有组件，再比较组件下面的所有元素，最后用key把虚拟dom和dom进行关联

创建一个基本的react案例

1.下载react和react-dom包，npm i react react-dom -S
2.导入 const React from 'react' ,const ReactDOM from 'react-dom'
3.使用react包里的React.createElement()方法创建一个dom
4.使用react-dom包里的render()方法渲染dom

JSX语法的使用

1.使用jsx语法编写组件
2.下载安装配置babel和babel插件，转换JSX为js

创建一个组件

1.安装
npm i react react-dom -S
2.导入包
require('react');require('react-dom');
3.创建虚拟dom,并且渲染
reactDOM.render(虚拟dom,渲染到哪个节点上)
__如果想使用组件化进行开发，那么建议使用webpack去配置打包，这样维护起来会方便很多，可以分开来维护组件，出现问题一个组件一个组件的去找，想要修改页面某一个效果也很方便，直接去更新需要更新的地方即可，别的项目去使用，也可以直接把组件复制过去，直接引用，不用重新去写了，项目越写越大，就会开发起来越来越简单，因为到最后，就是调用组件就可以了__