React入门

React 是一个用于构建用户界面的 JAVASCRIPT 库。 起源: React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站 描述

由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单
这个项目本身也越滚越大,从最早的UI引擎变成了一整套前后端通吃的 Web App 解决方案。衍生的 React Native 
项目,目标更是宏伟,希望用写 Web App 的方式去写 Native App。
如果能够实现,整个互联网行业都会被颠覆,因为同一组人只需要写一次 UI ,就能同时运行在服务器、浏览器和手机

react的特点

1.声明式设计 −React采用声明范式,可以轻松描述应用。
2.高效 −React通过对DOM的模拟,最大限度地减少与DOM的交互。
3.灵活 −React可以与已知的库或框架很好地配合。
4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ,但我们建议使用它。
5.组件 − 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。
6.单向响应的数据流 − React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。

声明式设计

// 声明式
const element1 = React.createElement(
    'div',
    {className:"greeting"},
    '哈哈'
)

// 过程式
element2 = document.createElement 'div'
element2.className = 'greeting'
element2.innerHTML = '哈哈'

// 类似于这样一种简化的结构
const element = {
    type: 'h1',
    props: {
        className: 'greeting',
        children: 'Hello, world'
    }
};
ReactDOM.render(
    element1, 
    document.getElementById('root') 
);

组件(两大特点 封装 重用)

react的使用离不开三个核心的库

 <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <!--react的与dom相关的一些功能-->
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!--将浏览器不支持的jsx语法转化为js语法-->
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

JSX语法(react使用jsx代替常规的javascript)

  1. 可以创建一个独立的js文件来使用,通过script标签来引入
  2. 使用多个标签,使用div包裹
  3. 支持表达式, js表达式可以直接被解析
  4. 不支持if else 可以使用三元表达式代替 相当于是vue中 的 v-if
  5. 直接解析数组 相当于是vue中的v-for
  6. 标签中注释使用花括号包裹,区别于原先的js注释 , 否则的话 , 注释会 直接解析成文本
  7. 推荐使用内联样式 直接进行样式的绑定 相当于是vue中的 v-bind

为什么使用jsx语法

jsx语法允许html和js的混写, 使页面数据和样式的操作变得钢架简单 核心

  • 遇到 HTML 标签(以 < 开头),就用 HTML 规则解析;
  • 遇到 以 { 开头的结构,就用 js 规则解析;

如何使用jsx语法

标签渲染

遇到 HTML 标签(以 < 开头),就用 HTML 规则解析;

代码注释

在jsx语法中, 标签中写代码注释需要放到{} 中

React.createElement()

从本质上讲,JSX 只是为 React.createElement(component, props, ...children) 函数提供的语法糖

react数据变化检测--元素渲染

元素(Elements)是 React 应用中最小的构建部件(或者说构建块,building blocks)。 元素用于描述你在页面上看到的内容

页面的基本渲染

元素的更新

在React中,元素是不能发生突变的,要进行元素的,一旦创建了元素,就不能修改其子元素或者是相关的属性

元素更新的措施是: 创建一个新的元素并使用render函数重新渲染

页面变化检测与更新的实现原理

  • react维护两个状态——现在的页面DOM、即将要渲染的页面DOM(数据) 两部分进行对比:自动渲染不同部分。
  • 每次发生事件、动画,都会和之前的状态进行对比。
    • 相同:不再次进行渲染。
    • 不同:进行渲染界面。
    • 适合大量数据操作的框架——react。

参考链接 https://zhuanlan.zhihu.com/purerender/2034637 在react中,当元素发生变化的时候,并不会进行所有的元素的更新,

在react内部,执行了一个diff 算法,只对当前变化的节点进行检测更新,而不是更新所有的节点

在react中,使用diff + virtual dom 结合的方式,实现元素的变化检测与更新

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 组件传值&数据请求

    河湾欢儿
  • 前端三大框架比较Angularreactvue

    河湾欢儿
  • 受控组件表单&不受控组件

    表单里面的数据 根据State确定 在 HTML 中,表单元素如 <input>,<textarea> 和 <select>表单元素通常保持自己的状态,并根据...

    河湾欢儿
  • 用MobX管理状态(ES5实例描述)-5.使React组件自动反应

    本系列前几篇文章演示了不用react和es6/babel等如何方便的修改传统的es5代码,但MobX也为react提供了方便的包装方法,本篇还是引入一些jsx语...

    江米小枣
  • 数据结构学习笔记——总述

    数据结构是一门研究非数值计算的程序设计问题中的操作对象,以及它们之间的关系和操作等相关问题的学科。

    蜻蜓队长
  • Python3 列表

    列表的切分和字符串基本一样,但是列表在切分时,只要输入了’:’,不管结果有几个元素,都会返回一个列表.

    py3study
  • 线性结构和非线性结构

    1)特点是数据元素之间存在一对一的线性关系 2)线性结构有两种不同的存储结构,即顺序存储结构和链式存储结构。顺序存储的线性表称为顺序表,顺序表中的存储元素是连...

    桑鱼
  • Python 变量之列表与应用技巧

          Python 定义了一些标准数据类型,用于存储各种类型的数据。Python有五个标准的数据类型,分别是:

    py3study
  • 网页超过一屏时自动浮动在网页最上方的图层特效

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>adsorpti...

    欢醉
  • 每天 3 分钟,小闫带你学 Python(十八)

    Things may come to those who wait, but only the things left by those who hustle.

    小闫同学啊

扫码关注云+社区

领取腾讯云代金券