react第三天

react的核心知识点

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

虚拟dom的概念

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

  1. 虚拟dom的原理和作用:
    用js模拟出dom的层次结构,通过对比新旧两颗虚拟dom的不同,得到页面哪些地方需要更新,最后再去更新这个不同的地方,实现了局部更新(高效更新),而不是页面的重新渲染(大量更新),优化了性能
  2. 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去配置打包,这样维护起来会方便很多,可以分开来维护组件,出现问题一个组件一个组件的去找,想要修改页面某一个效果也很方便,直接去更新需要更新的地方即可,别的项目去使用,也可以直接把组件复制过去,直接引用,不用重新去写了,项目越写越大,就会开发起来越来越简单,因为到最后,就是调用组件就可以了__

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 原教程内容详见精益 React 学习指南,这只是我在学习过程中的一些阅读笔记,个人觉得该教程讲解深入浅出,比目前大...
    leonaxiong阅读 7,846评论 1 18
  • HTML模版 之后出现的React代码嵌套入模版中。 1. Hello world 这段代码将一个一级标题插入到指...
    ryanho84阅读 11,415评论 0 9
  • 3. JSX JSX是对JavaScript语言的一个扩展语法, 用于生产React“元素”,建议在描述UI的时候...
    pixels阅读 7,915评论 0 24
  • 要说很煽情的话 我是真的真的很棒[羞嗒嗒] 也真的真的有很多人爱我[兔子] 我也真的真的很爱你们[爱你] ​​​
    努力努力再努力的xy阅读 1,111评论 0 0
  • 躺在床上才感觉到透心累 想做个电台 有空说吧 晚安
    TragicM阅读 1,209评论 0 0