React基础

一、 React概念

React 是一个构建用户界面javascript的库，和vue、angular并称前端的三大框架，react引领了很多前端思想。

二 、为什么学习react

原生js操作dom比较繁琐、效率低

使用原生js操作dom，浏览器会进行大量的重绘重排

原生js没有组件化的概念，导致代码复用率比较低

三.react的特点

声明式UI −React采用声明范式，可以轻松描述应用。

组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。

使用react native可以跨平台

高效 -使用虚拟dom+优秀的diffing算法，减少与dom的交互。

灵活 −React可以与已知的库或框架很好地配合。

JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。

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

四.创建工程化项目

使用开源的脚手架  create-react-app

通过 npx create-react-app react-basic 命令

（npx与npm的不同）

• NPM（Node Package Manager） 是一个包管理器，但它不太擅长执行（运行）包。
• NPX（Node Package Execute） 是一个内置于 NPM 的包运行器 CLI 工具（从 NPM 版本 5.2 开始）。
• 

 如果显示下图内容代表创建成功

 项目结构

 

五.JSX语法

1. jsx介绍

概念：

JSX是 JavaScript XML（HTML）的缩写，表示在 JS 代码中书写 HTML 结构

作用：

在React中创建HTML结构（页面UI结构）

优势：

1）采用类似于HTML的语法，降低学习成本，会HTML就会JSX

2）充分利用JS自身的可编程能力创建HTML结构

注意：JSX 并不是标准的 JS 语法，是 JS 的语法扩展，浏览器默认是不识别的，脚手架中内置的 @babel/plugin-transform-react-jsx 包，用来解析该语法

1. Jsx中使用js表达式

可以使用的表达式

1）字符串、数值、布尔值、null、undefined、object（ [] / {} ）

2）1 + 2、'abc'.split('')、['a', 'b'].join('-')

3）fn()

特别注意

if 语句/ switch-case 语句/ 变量声明语句，这些叫做语句，不是表达式，不能出现在 {} 中！！

1. Jsx中使用循环

方法：使用数组的map 方法

注意点：需要为遍历项添加 key 属性

1）key 在 HTML 结构中是看不到的，是 React 内部用来进行性能优化时使用

2）key 在当前列表中要唯一的字符串或者数值（String/Number）

3）如果列表中有像 id 这种的唯一值，就用 id 来作为 key 值

4）如果列表中没有像 id 这种的唯一值，就可以使用 index（下标）来作为 key 值

1. Jsx中使用条件判断

作用：根据是否满足条件生成HTML结构，比如Loading效果

实现：可以使用 三元运算符 或   逻辑与(&&)运算符

1. 注意事项

1）JSX必须有一个根节点，如果没有根节点，可以使用<></>（幽灵节点）替代

2）所有标签必须形成闭合，成对闭合或者自闭合都可以

3）JSX中的语法更加贴近JS语法，属性名采用驼峰命名法  class -> className  for -> htmlFor

4）JSX支持多行（换行），如果需要换行，需使用() 包裹，防止bug出现

六.组件

-概念： 组件化就是将一个页面拆分成一个个小的功能模块，

每个功能模块完成属于自己这部分独立的功能，

使得整个页面的管理和维护变得非常容易。

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

- 为什么要用组件： 使界面更灵活化

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

1. 分类：
   1. 根据组件的定义方式，可以分为：函数组件(Functional Component )和类组件(Class Component)；

根据组件内部是否有状态需要维护，可以分成：无状态组件(Stateless Component )和有状态组件(Stateful Component)；

根据组件的不同职责，可以分成：展示型组件(Presentational Component)和容器型组件(Container Component)；

1. 函数组件
   1. 概念：函数组件是使用function来进行定义的函数，只是这 个函数会返回和类组件中render函数返回一样的内容。
   2. 特点： 没有生命周期，也会被更新并挂载，但是没有生命周期函数；

没有this(组件实例）；

它是为了创建纯展示组件，这种组件只负责根据传入的props来展示，不涉及到state状态的操作；

1. 1. 要求： - 组件名必须首字母大写

- 构造函数必须要有返回值，返回值是虚拟DOM

- 将组件渲染到页面上，需要使用标签的形式使用组件。 - 函数名就是组件名

d.注意点： 1、函数式组件的名称首字母必须大写。    

2、必须写组件标签，不能是函数名或函数调用。

e.函数式组件的性能优化

减少重新 render 的次数。因为在 React 里最重(花时间最长)的一块就是 reconction(简单的可以理解为 diff)，如果不 render，就不会 reconction。

减少计算的量。主要是减少重复计算，对于函数式组件来说，每次 render 都会重新从头开始执行函数调用。

f.执行ReactDOM.render函数的原理：

1、首先找到组件对应的类，并new了这个类的一个实例

2、通过实例找到原型上的render函数，让render执行

3、ReactDOM.render接收到原型上render函数retrun的虚拟的dom

4、将虚拟dom转换成真实dom，插入到页面中

g：函数式组件和类组件的区别

1. 语法上的区别：

函数式组件是一个纯函数，它是需要接受props参数并且返回一个React元素就可以了。

类组件是需要继承React.Component，而且class组件需要创建render并且返回React元素，语法上来讲更复杂。

2. 调用方式

函数式组件可以直接调用，返回一个新的React元素；

类组件在调用时是需要创建一个实例的，然后通过调用实例里的render方法来返回一React元素

3. 状态管理(state)

函数式组件没有状态管理，类组件有状态管理。

4. 使用场景

类组件没有具体的要求。

函数式组件一般是用在大型项目中来分割大组件（函数式组件不用创建实例，所有更高效），

一般情况下能用函数式组件就不用类组件，提升效率