React（1）——快速入门

一、React背景简介

官网和资料

1. 英文官网: https://reactjs.org/
2. 中文官网: 快速入门 – React (docschina.org)

3、如果JS基础忘了及时查看文档：JavaScript - 学习 Web 开发 |多核 (mozilla.org)

JavaScript - 标签 - 汤姆大叔 - 博客园 (cnblogs.com) 

4、React Guidebook - React 知识图谱 关于概念、技巧、生态、前沿、源码核心 - React Guidebook (tsejx.github.io)

5、Hello from React Status | React Status (docschina.org)

6、印记中文 - 深入挖掘国外前端领域，为中国 Web 前端开发人员提供优质文档 (docschina.org) 

7、React快速上手开发 

 介绍描述

1. 用于动态构建用户界面的 JavaScript 库(只关注于视图)
2. 由Facebook开源

React的特点

1. 声明式编码
2. 组件化编码
3. React Native 编写原生应用
4. 高效（优秀的Diffing算法）

React高效的原因

1. 使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。
2. DOM Diffing算法, 最小化页面重绘。

面试：说说自己理解的react/介绍一下react

版本1：

React是用于构建用户界面的JavaScript库。React可以创建交互式UI。为应用程序中的每个状态建立的视图，并且React将在数据更改时进行更新，呈现正确的组件。另外，我们也可以构建管理自己状态的封装组件，然后将它们组合成复杂的UI。因为组件用JS编写而不是模板，所以可以通过应用传递数据，并使状态与DOM分离。

版本2：

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

面试：项目里用到了react，为什么要选择react，react有哪些好处？

（1）声明式设计。

（2）高效：通过对DOM的模拟，最大限度的减少与DOM的交互。

（3）灵活：可以与已知的框架或库很好的配合。

（4）JSX：是js语法的扩展，不一定使用，但建议用。

（5）组件：构建组件，使代码更容易得到复用，能够很好地应用在大项目的开发中。

（6）单向响应的数据流：React实现了单向响应的数据流，从而减少了重复代码，这也是解释了它为什么比传统数据绑定更简单。

面试：angularJs和react区别 

React对比Angular是思想上的转变，它也并不是一个库，是一种开发理念，组件化，分治的管理，数据与view的一体化。它只有一个中心,发出状态，渲染view，对于虚拟dom它并没有提高渲染页面的性能，它提供更多的是利用jsx便捷生成dom元素，利用组件概念进行分治管理页面每个部分(例如 header section footer slider)

面试：说说vue、 react 、angularjs 、jquery的区别 

JQuery与另外几者最大的区别是，JQuery是事件驱动，其他两者是数据驱动。 JQuery业务逻辑和UI更改该混在一起， UI里面还参杂这交互逻辑，让本来混乱的逻辑更加混乱。 Angular，vue是双向绑定，而React不是 其他还有设计理念上的区别等

二、React的基本使用

三、React JSX（JSX:JavaScript XML）

1. react定义的一种类似于XML的JS扩展语法: JS + XML本质是React.createElement(component, props, ...children)方法的语法糖。
2. 作用: 用来简化创建虚拟DOM。
3. 写法：var ele = 

   Hello JSX!

      注意1：它不是字符串, 也不是HTML/XML标签   ；注意2：它最终产生的就是一个JS对象。
4. 标签名任意: HTML标签或其它标签   ； 标签属性任意: HTML标签属性或其它。
5. 基本语法规则：① 、遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析；②、遇到以 { 开头的代码，以JS语法解析: 标签中的js表达式必须用{ }包含。
6. babel.js的作用：①、浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行；②、只要用了JSX，都要加上type="text/babel", 声明需要babel来处理。

四、渲染虚拟DOM(元素)

1. 语法:  ReactDOM.render(virtualDOM, containerDOM)
2. 作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示
3. 参数说明：参数一: 纯js或jsx创建的虚拟dom对象 ；参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)

 

         由此可见，虚拟DOM产生的对象比真实DOM产生的更少。React效率更高。

创建虚拟DOM的两种方式

①、使用JSX方式（JSX就是原始JS的一个语法糖）

 ②、使用JS方式(一般不用，了解即可)

五、JSX练习

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

模块

1. 理解：向外提供特定功能的js程序, 一般就是一个js文件
2. 为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。
3. 作用：复用js, 简化js的编写, 提高js运行效率

组件

1. 理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
2. 为什么要用组件： 一个界面的功能更复杂
3. 作用：复用编码, 简化项目编码, 提高运行效率

模块化

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

组件化

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

七、React面向组件编程

使用React开发者工具调试

 安装之后，打开用React编写的官网，运行脚本将会发现。

 函数式组件：写一个demo

注意

1. 组件名必须首字母大写
2. 虚拟DOM元素只能有一个根元素
3. 虚拟DOM元素必须有结束标签

类式组件：写一个demo 

复习类的知识

 写一个demo 

渲染类组件标签的基本流程

1. React内部会创建组件实例对象
2. 调用render()得到虚拟DOM, 并解析为真实DOM
3. 插入到指定的页面元素内部

组件对象的三大核心

1、state——何为简单何为复杂？（复杂就是有状态，简单组件是没有状态的）

组件的状态会影响页面

理解

1. state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)
2. 组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)

 

强烈注意

1. 组件中render方法中的this为组件实例对象
2. 组件自定义的方法中this为undefined，如何解决？
   1. 强制绑定this: 通过函数对象的bind()
   2. 箭头函数
3. 状态数据，不能直接修改或更新

练习: 定义一个展示天气信息的组件

默认展示天气炎热 或 凉爽

点击文字切换天气

复习一下原生事件的绑定 

（其中按钮3方式是后面学习React使用最多的）

	
		
		
	
	
		按钮1
		按钮2
		按钮3

		
	

2、props

需求: 自定义用来显示一个人员信息的组件

姓名必须指定，且为字符串类型；

性别为字符串类型，如果性别没有指定，默认为男

年龄为字符串类型，且为数字类型，默认值为18

理解

1. 每个组件对象都会有props(properties的简写)属性
2. 组件标签的所有属性都保存在props中

作用

1. 通过标签属性从组件外向组件内传递变化的数据
2. 注意: 组件内部不要修改props数据

编码：

 3、 refs与事件处理

理解

组件内的标签可以定义ref属性来标识自己

编码

需求: 自定义组件, 功能说明如下:

  点击按钮, 提示第一个输入框中的值

  当第2个输入框失去焦点时, 提示这个输入框中的值

事件处理

1. 通过onXxx属性指定事件处理函数(注意大小写)
   1. React使用的是自定义(合成)事件, 而不是使用的原生DOM事件
   2. React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)
2. 通过event.target得到发生事件的DOM元素对象

未完待续，将持续更新 ~