我的react学习之路

我的react学习之路

先简单的说一下React

React是Facebook 开发的前端JavaScript库

V层：react并不是完整的MVC框架，而是MVC中的C层

虚拟DOM：react引入虚拟DOM，每当数据变化通过reactdiff运算，将上一次的虚拟DOM与本次渲染的DOM进行对比，仅仅只渲染更新的，有效减少了DOM操作

JSX语法：js+xml，是js的语法扩展，编译后转换成普通的js对象

组件化思想：将具有独立功能的UI模块封装为一个组件，而小的组件又可以通过不同的组合嵌套组成大的组件，最终完成整个项目的构建

单向数据流：指数据的流向只能由父级组件通过props讲数据传递给子组件，不能由子组件向父组件传递数据

要想实现数据的双向绑定只能由子组件接收父组件props传过来的方法去改变父组件数据，而不是直接将子组件数据传给父组件

生命周期：简单说一下生命周期：Mounting(挂载)、Updateing(更新)、Unmounting(卸载)

开始学习

1. 简单说一下React的jsx语法

JSX 是JavaScript XML 的简写，是 React 使用的一种文件

它利用 JavaScript 的表现力和类似 HTML 的模板语法

使得 HTML 文件非常容易理解。此文件能使应用非常可靠，并能够提高其性能

浏览器只能处理 JavaScript 对象，而不能读取常规 JavaScript 对象中的 JSX

所以为了使浏览器能够读取 JSX，首先，需要用Babel转换器将 JSX 文件转换为 JavaScript 对象，然后再将其传给浏览器

2. React和vue的区别

相同点：

都支持服务器端渲染、数据驱动视图，状态管理

都有虚拟DOM、组件化开发、通过props参数进行父子组件数据的传递

不同点：

React严格上只针对MVC的C层,Vue则是MVVM模式

虚拟DOM方面

vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树，而React每当应用的状态被改变时,全部组件都会重新渲染

视图渲染方面

React采用JSX渲染到DOM，vue使用的是template模板

数据绑定方面

vue实现了数据的双向绑定，react数据流动是单向的

state对象方面

react应用中不可变的,需要使用setState方法更新状态

vue中,state对象不是必须的,数据由data属性在vue对象中管理

3.MVVM和MVC的区别

MVVM：

MVVM是Model-View-ViewModel的缩写

Model层代表数据模型

View代表组件视图，负责将数据模型转化成UI展现出来

ViewModel是一个同步 View 和 Model 的对象（双向绑定）

在MVVM中，View和Model之间并没有直接的联系，而是通过ViewModel进行交互，

Model和ViewModel之间的交互是双向的，因此 通过视图操作数据，也能通过数据操作视图

MVC：

MVC是Model-View- Controller的简写。即模型-视图-控制器，使用MVC的目的是为了将M和V相分离

MVVM与MVC最大的区别就是实现了View和Model的自动同步，也就是当Model的属性改变时

我们不用再手动操作Dom来改变View，而是改变后该属性对应View层会自动改变

4.简单说一下虚拟 DOM

虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存，利用 dom diff 算法避免了没有必要的 dom 操作，从而提高性能

Virtual DOM 工作过程有三个简单的步骤

1. > 每当底层数据发生改变时，整个 UI 都将在 Virtual DOM 描述中重新渲

2. >然后计算之前 DOM 表示与新表示的之间的差异

3. >完成计算后，将只用实际更改的内容更新 real DOM

5.简单说一下React的生命周期

（1）Mounting挂载阶段

constructor() 初始化阶段

componentWillMount() 组件挂载到页面之前

render() 创建虚拟DOM，进行diff运算，更新DOM树。不可进行setState()

componentDidMount() 组件挂载到页面之后，可以在此请求数据

（2）Updateing更新阶段

componentWillReceiveProps() 父级数据发生变化

shouldComponentUpdate()

性能优化：这个函数只返回true或false，表示接下来的组件是否需要更新（重新渲染）

返回true就是紧接着以下的生命周期函数，返回false表示组件不需要重新渲染，不再执行任何生命周期函数（包括render）

componentWillUpdate() 组件更新之前，不可进行setState() 会导致函数调用shouldComponentUpdate从而进入死循环

render()

componentDidUpdate() 组件更新之后

（3）Unmounting卸载阶段

componentWillUnmount 组件卸载和销毁之前立刻停用

可以在此销毁定时器，取消网络请求，消除创建的相关DOM节点等

6.react diff 原理

diff（翻译差异）：计算一棵树形结构转换成另一棵树形结构的最少操作

1）把树形结构按照层级分解，只比较同级元素

2）给列表结构的每个单元添加唯一的 key 属性，方便比较

3）React 只会匹配相同 class 的 component（这里面的 class 指的是组件的名字）

4）合并操作，调用 component 的 setState 方法的时候, React 将其标记为 dirty.到每一个事件循环结束, React 检查所有标记 dirty 的 component 重新绘制

5）选择性子树渲染。开发人员可以重写 shouldComponentUpdate 提高 diff 的性能

7.react渲染机制

1）当页面一打开，就会调用render构建一棵DOM树

2）当数据发生变化（ state | props ）时，就会再渲染出一棵DOM树

3）此时，进行diff运算，两棵DOM树进行差异化对比，找到更新的地方进行批量改动

8.受控组件与非受控组件

在HTML 中，类似 , 和 这样的表单元素会维护自身的状态，并基于用户的输入来更新，当用户提交表单时，前面提到的元素的值将随表单一起被发送，但在 React 中会有些不同，包含表单元素的组件将会在 state 中追踪输入的值，并且每次调用回调函数时如 onChange 会更新 state，重新渲染组件，一个输入表单元素，它的值通过 React 的这种方式来控制，这样的元素就被称为”受控元素”，这样的组件称为受控组件，
反之为非受控组件

9.无状态组件和class组件

无状态组件，也叫展示组件，UI组件，主要用来定义模板，接收来自父组件props传递过来的数据，使用{props.xxx}的表达式把props塞到模板里面

class组件，也叫有状态组件，容器组件，主要用来定义交互逻辑和业务数据，使用{this.state.xxx}的表达式把业务数据挂载到容器组件的实例上，然后传递props到展示组件，展示组件接收到props，把props塞到模板里面。

10.redux

redux 是一个应用数据流框架，主要是解决了组件间状态共享的问题，原理是集中式管理，主要有三个核心方法，action，store，reducer

三大原则：

1）唯一数据源(整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中)

2）reducer必须是纯函数（输入必须对应着唯一的输出）

3）State 是只读的, 想要更改必须经过派发action

redux的工作流程：

使用通过reducer创建出来的Store发起一个Action，reducer会执行相应的更新state的方法，当state更新之后，view会根据state做出相应的变化

1）提供getState()获取到state

2）通过dispatch(action)发起action更新state

3）通过subscribe()注册监听器

11.高阶组件

高阶组件是一个以组件为参数并返回一个新组件的函数。HOC 运行你重用代码、逻辑和引导抽象，最常见的可能是 Redux 的 connect 函数

除了简单分享工具库和简单的组合，HOC 最好的方式是共享 React 组件之间的行为

如果你发现你在不同的地方写了大量代码来做同一件事时，就应该考虑将代码重构为可重用的 HOC

12.路由

BrowserRouter或hashRouter用来渲染Router所代表的组件

Route用来匹配组件路径并且筛选需要渲染的组件

Switch用来筛选需要渲染的唯一组件

Link直接渲染某个页面组件

Redirect类似于Link，在没有Route匹配成功时触发

>

>