进击的react二

前端框架（react）

三大框架的区别：
Angular带有比较强的排它性的
React主张是函数式编程的理念，侵入性没有Angular那么强，主要因为它是软性侵入。
Vue 渐进式的

react与vue的对比 可以从redux和vuex中对比

你如何看待react /什么是react react就是一个框架 他相对于mvc来说只是其中的v 他适用于开发数据不断变化的大型应用程序

react相对其他框架优势： 高性能高效率 实现了前端界面的高性能高效率开发，所以说react很擅长处理组件化的页面

React与Vue对比

相似点：
使用 Virtual DOM
提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。
将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。
区别：
在 React 应用中，当某个组件的状态发生变化时，它会以该组件为根，重新渲染整个组件子树。如要避免不必要的子组件的重渲染，你需要手动实现；在 Vue 应用中，组件的依赖是在渲染过程中自动追踪的，所以系统能精确知晓哪个组件确实需要被重渲染，开发者不需要考虑组件是否需要重新渲染之类的优化。
在React中，一切都是JavaScript，所有的组件的渲染功能都依靠 JSX。JSX 是使用 XML 语法编写 JavaScript 的一种语法糖。你可以使用完整的编程语言 JavaScript 功能来构建你的视图页面；在Vue中有自带的渲染函数，Vue也支持JSX，Vue官方推荐使用模板渲染视图。组件分为逻辑类组件和表现类组件。
组件作用域内的CSS。CSS 作用域在 React 中是通过 CSS-in-JS 的方案实现的；在Vue中是通过给style标签加scoped标记实现的。
Vue 的路由库和状态管理库都是由官方维护支持且与核心库同步更新的。React 则是选择把这些问题交给社区维护，因此创建了一个更分散的生态系统。

react特点和优势：

1.虚拟dom

虚拟DOM是在DOM的基础上建立了一个抽象层，对数据和状态所做的任何改动，都会被自动且高效的同步到虚拟DOM，最后再批量同步到DOM中。

是一个JavaScript对象，重新渲染的时候，会对比这一次产生的Virtual DOM和上一次渲染的Virtual DOM，对比发现差异之后，只需修改真正的DOM树时就只需要触及差别中的部分就行，使用这个虚拟dom，避免对原生dom的创建和对比，这样就大大提升了性能，因为原生dom的创建是非常 消耗性能的，而对js对象的对比和创建对性能开销很小，从这种方式来提供应用的性能

2.组件

组件化 组件指的就是同时包含了html、css、js、image元素的聚合体

每个组件和组件都相互独立 便于维护

组件是通过React.createClass创建的（ES5），在es6中直接通过class关键字来创建

组件的划分要满足高内聚，低耦合的原则。

高内聚是指把逻辑紧密相关的内容放在一个组件中。
低耦合指的是不同组件的依赖关系要尽量弱化，每个组件要尽量独立。
组件其实就是一个构造器,每次使用组件都相当于在实例化组件

react的组件必须使用render函数来创建组件的虚拟dom结构

组件需要使用ReactDOM.render方法将其挂载在某一个节点上

组件的首字母必须大写

3.单向数据流 数据绑定 父到子

4.jsx树

react 的渲染过程中，兄弟节点之间是怎么处理的？也就是key值不一样的时候。
通常我们输出节点的时候都是map一个数组然后返回一个ReactNode，为了方便react内部进行优化，我们必须给每一个reactNode添加key，这个key prop在设计值处不是给开发者用的，而是给react用的，大概的作用就是给每一个reactNode添加一个身份标识，方便react进行识别，在重渲染过程中，如果key一样，若组件属性有所变化，则react只更新组件对应的属性；没有变化则不更新，如果key不一样，则react先销毁该组件，然后重新创建该组件。

遍历子节点的时候，不要用 index 作为组件的 key 进行传入。
主要是因为react是基于虚拟dom跟diff算法提高性能的，而提高性能意味着会做一些dom节点的复用，key就是负辅助diff算法的，在某些情况下用index是没问题的，例如只是循环渲染展示，但是如果有涉及中间节点的增删的操作，这样就会造成react无法正确识别哪些节点是删的，哪些节点是增加的，会发生很多看似奇怪的现象

react纯函数、函数组件点击这里
优化react性能的时候，对于太多深层嵌套的组件，由于父组件的state改变会导致包括子组件也重新render可以根据情况使用纯函数组件，由于纯函数组件是没有状态的组件这个时候可以用高阶组件给函数组件封装一个类似PureComponet的功能

对于性能优化 还可以使用React.memo

React.memo 是 React 16.6 新的一个 API，用来缓存组件的渲染，避免不必要的更新，其实也是一个高阶组件，与 PureComponent 十分类似，但不同的是， React.memo 只能用于函数组件 。

import { memo } from 'react';
 
function Button(props) {
  // Component code
}
 
export default memo(Button);

高级用法

默认情况下其只会对 props 做浅层对比，遇到层级比较深的复杂对象时，表示力不从心了。对于特定的业务场景，可能需要类似 shouldComponentUpdate 这样的 API，这时通过 memo 的第二个参数来实现：

function arePropsEqual(prevProps, nextProps) {
  // your code
  return prevProps === nextProps;
}

export default memo(Button, arePropsEqual);
注意：与 shouldComponentUpdate 不同的是，arePropsEqual 返回 true 时，不会触发 render，如果返回 false，则会。而 shouldComponentUpdate 刚好与其相反。

生命周期

(新)

(旧)

组件的生命周期
所谓的生命周期就是指某个事物从开始到结束的各个阶段，当然在 React.js 中指的是组件从创建到销毁的过
程，React.js 在这个过程中的不同阶段调用的函数，通过这些函数，我们可以更加精确的对组件进行控制，前面
我们一直在使用的 render 函数其实就是组件生命周期渲染阶段执行的函数
生命周期演变
之前（React 16.3 之前）
挂载阶段
constructor
componentWillMount
render
componentDidMount
更新阶段
父组件更新引起组件更新
componentWillReceiveProps(nextProps)
shouldComponentUpdate(nextProps, nextState)
componentWillUpdate(nextProps, nextState)
render
componentDidUpdate(prevProps, prevState)
组件自身更新
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate
卸载阶段
componentWillUnmount
现在
index.md 2/5/2020
3 / 4
挂载阶段
constructor
static getDerivedStateFromProps(props, state)
注意 this 问题
render
componentDidMount
更新阶段
父组件更新引起组件更新
static getDerivedStateFromProps(props, state)
shouldComponentUpdate()
componentWillUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()
组件自身更新
shouldComponentUpdate()
componentWillUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()
卸载阶段
componentWillUnmount
错误处理
static getDerivedStateFromError()
componentDidCatch(error, info) 参考：http://projects.wojtekmaj.pl/react-lifecycle-methodsdiagram/
生命周期函数详解
constructor(props)
类的构造函数，也是组件初始化函数，一般情况下，我们会在这个阶段做一些初始化的工作
初始化 state
处理事件绑定函数的 this
render()
render 方法是 Class 组件必须实现的方法
static getDerivedStateFromProps(props, state)
index.md 2/5/2020
4 / 4
该方法会在 render 方法之前调用，无论是挂载阶段还是更新阶段，它的存在只有一个目的：让组件在 props 变
化时更新 state
componentDidMount()
在组件挂载后（render 的内容插入 DOM 树中）调用。通常在这个阶段，我们可以：
操作 DOM 节点
发送请求
shouldComponentUpdate(nextProps, nextState)
发生在更新阶段，getDerivedStateFromProps 之后，render 之前，该函数会返回一个布尔值，决定了后续是否
执行 render，首次渲染不会调用该函数
getSnapshotBeforeUpdate(prevProps, prevState)
该方法在 render() 之后，但是在输出到 DOM 之前执行，用来获取渲染之前的快照。当我们想在当前一次更新
前获取上次的 DOM 状态，可以在这里进行处理，该函数的返回值将作为参数传递给下个生命周期函数
componentDidUpdate
该函数并不常用。
componentDidUpdate()
该函数会在 DOM 更新后立即调用，首次渲染不会调用该方法。我们可以在这个函数中对渲染后的 DOM 进行
操作
componentWillUnmount()
该方法会在组件卸载及销毁前调用，我们可以在这里做一些清理工作，如：组件内的定时器、未完成的请求等

React的基本使用

1、相关js库
react.js: React的核心库

react-dom.js: 提供操作DOM的react扩展库

babel.min.js: 解析JSX语法代码转为纯JS语法代码的库

渲染虚拟DOM元素

语法:
ReactDOM.render(virtualDOM, containerDOM)

参数一: 纯js或jsx创建的虚拟dom对象
参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)
作用:
将虚拟DOM元素渲染到页面中的真实容器DOM中显示

React 之 Hello World

第一步：引入react.js相关库

<script  src="../js/react.development.js"></script>
<script  src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>

第二步：定义根元素

<div id="app"></div>

第三步：在babel环境下写React代码

<script type="text/babel">
// 1、创建虚拟dom元素对象
var vDOM = <h1>Hello W</h1>  //不是字符串
// 2、将虚拟dom渲染为页面真实dom容器中
ReactDOM.render(vDOM,document.getElementById('app'))
</script>

总结

相同点：
1.都支持服务器端渲染
2.都有Virtual DOM,组件化开发,通过props参数进行父子组件数据的传递,都实现webComponent规范
3.数据驱动视图
4.都有支持native的方案,React的React native,Vue的weex
5.都有管理状态，React有redux,Vue有自己的Vuex（自适应vue，量身定做）

不同点：

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

2.virtual DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制
（简单的来说vue组件数据变化时，只重现渲染根据某个组件数据变化的元素，react则是全局重新渲染）

3.组件写法不一样, React推荐的做法是 JSX + inline style, 也就是把HTML和CSS全都写进JavaScript了,即’all in js’;
Vue推荐的做法是webpack+vue-loader的单文件组件格式,即html,css,jd写在同一个文件;

4.数据绑定: vue实现了数据的双向绑定,react数据流动是单向的;（vue双向，react单向）

5.state对象在react应用中不可变的,需要使用setState方法更新状态;
在vue中,state对象不是必须的,数据由data属性在vue对象中管理；