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 条评论
登录 后参与评论

相关文章

来自专栏更流畅、简洁的软件开发方式

分享一个基于jQuery的锁定表格行列的js脚本。

  网上也有很多锁定行列的方法,一个是使用css,另一个就是专门的控件附带有锁定的功能。css的大多数锁定行,而不能锁定列。好像看过园子里的司徒正美,写过一个用...

2936
来自专栏蔡述雄的专栏

包学会之浅入浅出Vue.js:结业篇

本篇我们会详细分析下如何完成由多个组件组成一个复用组件的开发流程。

19.9K32
来自专栏IMWeb前端团队

React16中的服务端渲染(译)

本文作者:IMWeb zzbozheng 原文出处:IMWeb社区 未经同意,禁止转载 React 16发布了。 React 16有很多令人兴奋的新东...

8819
来自专栏互联网杂技

开始学习React js

现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件...

4266
来自专栏Material Design组件

后台系统设计(上篇:选择)

在单个选项下,存在多组互斥选项,且互斥选项组之间存在一定关系,可以考虑混用分段控件和常规按钮,由于分段控件在视觉上占用更大的面积,故给人在层级上更加置前。

4582
来自专栏企鹅号快讯

常见的前端面试题,总有一点让你涨知识

首先在面试时,我会大声说:"本人擅长Ai、Fw、Fl、Br、Ae、Pr、Id、Ps等软件的安装与卸载,精通CSS、PHP、ASP、C、C++、C#、Java、R...

2277
来自专栏用户2442861的专栏

Chrome开发者工具不完全指南:(三、性能篇)

 卤煮在前面已经向大家介绍了Chrome开发者工具的一些功能面板,其中包括Elements、Network、Resources基础功能部分和Sources进阶功...

1412
来自专栏更流畅、简洁的软件开发方式

能自己“跑”的表单控件,思路,雏形,源码。vs2005版本

下载地址:  http://www.cnblogs.com/jyk/archive/2008/07/29/1255891.html 大家是怎么处理CRUD的呢?...

1969
来自专栏Modeng的专栏

Vue一个案例引发的动态组件与全局事件绑定总结

最近在自学 Vue 也了解了一些基本用法,也记录了一些笔记有兴趣的朋友可以去查看我的其他文章,技术这东西真的不能光靠看,看是没有的,你必须要动手实践,只有在实战...

1300
来自专栏小程序之家

如何使用小程序表单组件

上一篇文章中,我们给大家介绍了小程序的视图容器及基础内容组件,该组件主要应用是输出内容。接下来这篇文章中,我们将继续介绍小程序最常用的表单组件,该组件主要应用是...

2533

扫码关注云+社区

领取腾讯云代金券