React入门

2018-05-17 本文已影响0人奶瓶SAMA

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）

可以创建一个独立的js文件来使用,通过script标签来引入
使用多个标签,使用div包裹
支持表达式, js表达式可以直接被解析
不支持if else 可以使用三元表达式代替相当于是vue中的 v-if
直接解析数组相当于是vue中的v-for
标签中注释使用花括号包裹,区别于原先的js注释 , 否则的话 , 注释会直接解析成文本
推荐使用内联样式直接进行样式的绑定相当于是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 结合的方式,实现元素的变化检测与更新