Dear

仿网易云音乐PC使用到的技术页面全部通过函数组件实现使用styled-components解决组件间样式编写冲突的问题使用axios发送网络请求使用react-router，借助react-router-config完成路由的集中映射管理使用redux进行数据的集中管理通过redux-thunk在```redux````进行异步请求通过pm2对后台服务进行进程守护后台服务借助：NeteaseCloudMusicApi完成功能推荐页面搜索功能搜索对应歌曲会出现相应的搜索结果。

在引入 thunk 时报的错纠结了一晚上，蓦然间，才发现，我把包导错了。。（心态直接炸了）import thunk from ‘react-thunk’应该改为import thunk from ‘redux-thunk’

文章目录单页面富应用（SPA）前端路由url 的 hashhtml5 的 historyreact-router路由的基本使用常见的一些 APIBrowserRouter或HashRouterLink和NavLinkRouteSwitchRedirect路由的嵌套路由传递参数动态路由search 传递参数to传入对象react-router-config单页面富应用（SPA）单页面富应用：single-page application，简称SPA；单页面富应用是指整个Web应用有一个页面，当 url

文章目录认识 react-reduxreact-redux 的使用react-redux 相关 APIProviderconnect()mapStateToprops()mapDispatchToProps()redux-thunk的使用reducer 的合并redux 调试工具的使用举例不使用 redux使用 redux使用 react-redux认识 react-reduxreact-redux 是一个 react 的插件库，它是专门用来简化 react 应用中使用 redux的传送门react

文章目录redux 简介为什么需要 reduxredux 核心理念storeactionreducerredux 三大原则单一数据源State 是只读的使用纯函数来执行修改redux 的基本使用redux 简介redux 是一个帮助我们管理State的容器：redux是JavaScript的状态容器，提供了可预测的状态管理redux 不是只能用于 react 中的，它还可以用在 vue 等其它框架中redux 的主要作用就是：集中式管理（读/写）react 应用中多个组件共享状态为什么需要 red

文章目录什么是高阶组件高阶函数高阶组件的使用props 的增强不修改原有代码的情况下，添加新的props利用高阶组件来共享Context属性渲染判断鉴权生命周期劫持什么是高阶组件高阶组件（HOC）就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件高阶函数高阶组件其实有点类似与高阶函数，高阶函数是接收一个或多个函数作为参数，并返回一个函数举例有两个函数 login 和 exit，一个welcome，一个goodbye。两个函数先从localStorage 读取了username，然后对

Fragment由于 render 函数的返回值中只能有有一个根节点，所以每次返回内容时都需要包裹一个div元素这个div元素对于某些场景是需要的（比如我们就希望放到一个div元素中，再针对性设置样式）某些场景下这个div是没有必要的，比如当前这里我可能希望所有的内容直接渲染到root中，而不是所有的内容外面还需要包裹一个 div此时，就可以使用 Fragmentclass Title extends PureComponent { render() { return (

文章目录ref的作用如何使用传入字符串传入一个对象传入一个函数举例ref 的节点类型ref的作用react 中，很少直接的操作dom 元素，如果需要操作 dom 元素的话，那么就需要使用到 ref常见的应用场景管理焦点，文本选择或媒体播放触发强制动画集成第三方 DOM 库如何使用传入字符串使用时通过 this.refs.传入的字符串格式获取对应的元素传入一个对象对象是通过 React.createRef() 方式创建出来的使用时获取到创建的对象其中有一个current属性就是对

react 事件总线解决的问题：跨组件之间的事件传递如何实现借助第三方库 events来实现 传送门常见的 api创建EventEmitter对象：eventBus对象发出事件：eventBus.emit(“事件名称”, 参数列表)监听事件：eventBus.addListener(“事件名称”, 监听函数)移除事件：eventBus.removeListener(“事件名称”, 监听函数)使用前需要先安装，下面两种方式任选一个npm install events yarn ad.

文章目录render什么时候被调用组件没有必要的重新 render如何避免组件没有必要的重新 rendershouldComponentUpdatePureComponentmemorender什么时候被调用如图所示当 props 或 state 发生改变时， render 函数会被重新调用组件没有必要的重新 render在 App 中，有一个计数器的代码，当点击 +1 时，由于 state 发生了改变，那么就会重新执行App 中的 render 函数，而当 App 中的 render 函数被调

文章目录为什么要是用 setStatesetState 异步更新为什么要异步更新如何获取更新后的值同步 or 异步setState的合并数据的合并多个setState合并setState性能优化react 更新机制diff算法的作用传统 diff算法react diff算法对比不同类型的元素对比同一类型的元素对子节点进行递归keys的优化在最后位置插入数据在前面插入数据为什么要是用 setState当我们希望通过点击一个按钮从而改变一个文本时，就需要使用到 setState方法，比如：import R

分而治之的思想将一个复杂的问题拆分成许多小的问题，通过解决每一个小问题进而解决复杂的问题。比如：在求解大数问题上就用到了分而治之的思想。组件化开发组件：组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。将一个完整的页面分成很多个组件，每个组件都用于实现页面的一个具体功能。而每一个组件还可以根据具体需求进行具体的划分，另外有的组件也可以在不同的页面进行复用常见的组件常见的组件有两种类组件，也叫做有状态组件函数组件，也叫做无状态组件区别：有状态组件：拥有状态、拥有

什么是 jsxjsx 是一种 JavaScript 的语法扩展（eXtension），有时候也叫做 JavaScript XML，它能让我们可以在 js 中编写 htmljsx 的使用书写规范jsx的顶层只能有一个根元素，即就是最外层需要包括一个 div 标签或者 Fragment在 jsx 最外面包裹一个 () ，就可以进行换行书写jsx 中单、双标签都可以注释的使用render() { return ( <div> {/* 注释 */}

react 简介react 是用于构建用户界面的 JavaScript 库 官网特点声明式编程：我们只需要维护自己的状态（数据），当状态（数据）改变时，React可以根据最新的状态（数据）去渲染我们的UI界面组件化开发多平台适配：可以开发移动端跨平台或 web 应用程序开发依赖react：react开发所必须的核心代码react-dom：渲染在不同平台所需的核心代码babel：将 jsx 转换成 react 代码的工具<script src="https://unpkg.c