react学习笔记其一 | 青训营

React是什么

用于构建用户界面的javaScript库

是一个将数据渲染为HTML视图的开源JavaScript库

为什么要学

1.原生JavaScript操作DOM繁琐、效率低（DOM-API操作UI )

2.使用JavaScript直接操作DOM，浏览器会进行大量的重绘重排。

3.原生JavaScript没有组件化编码方案，代码复用率低。

学习React之前要掌握的JavaScript基础知识

判断this的指向

class(类)

ES6语法规范

npm包管理器

原型、原型链

数组常用方法

模块化

React的特点

1.采用组件化模式、声明式编码，提高开发效率及组件复用率。

2.在React Native中可以使用React语法进行移动端开发。

3.使用虚拟DOM+优秀的Diffing算法，尽量减少与真实DOM的交互。

React高效的原因

（1）使用虚拟(virtual)DOM不总是直接操作页面真实DOM。

（2）DOM Diffing 算法,最小化页面重绘。

React的基本使用

（1）相关js库

1.react.js：React核心库。

2.react-dom.js：提供操作DOM的react扩展库。

3.babel.min.js：解析JSX语法代码转为JS代码的库。

（2）创建虚拟DOM的两种方式

1.纯JS方式(一般不用)

2.JSX方式

（3）虚拟DOM与真实DOM

1.React提供了一些API来创建一种 “特别” 的一般js对象

const VDOM = React.createElement(‘xx’,{id:‘xx’},‘xx’)

上面创建的就是一个简单的虚拟DOM对象

2.虚拟DOM对象最终都会被React转换为真实的DOM

我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界。

模块与组件、模块化与组件化的理解

1模块

1.理解：向外提供特定功能的js程序, 一般就是一个js文件

2.为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。

3.作用：复用js, 简化js的编写, 提高js运行效率

2组件

1.理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)

2.为什么要用组件： 一个界面的功能更复杂

3.作用：复用编码, 简化项目编码, 提高运行效率

3模块化

当应用的js都以模块来编写的, 这个应用就是一个模块化的应用

4组件化

当应用是以多组件的方式实现, 这个应用就是一个组件化的应用

实践案例：

<div id="test"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script
  type="text/javascript"
  src="../js/react-dom.development.js"
></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
  function MyComponent() {
    console.log(this); //此处的this是undefined,因为babel开启了严格模式
    return <h2>定义函数式组件（适用于简单组件）</h2>;
  }
  ReactDOM.render(<MyComponent />, document.getElementById("test"));
</script>