react深度学习

第一步：安装craco： yarn add @craco/craco 第二步：修改package.json文件 原本启动时，我们是通过react-scripts来管理的； 现在启动时，我们通过crac

React 项目打包时，如果不进行异步组件的处理，那么所有页面所需要的 js 都在同一文件中（bundle.js），整个js文件很大，从而导致首屏加载时间过长。 所有，可以对组件进行异步加载处理，通常

React学习之实现React Router导航守卫 导航守卫 我们知道，Vue 给我们提供了几个钩子函数来让我们完成导航守卫的功能，全局的有 beforeEach和 afterEach，组件内部的钩

导航守卫 导航守卫：当离开一个页面，进入另一个页面时，触发的事件 history对象 listen: 添加一个监听器，监听地址的变化，当地址发生变化时，会调用传递的函数 参数：函数，运行时间点：发生在

redux-saga 纯净 强大 灵活 在saga任务中，如果yield了一个普通数据，saga不作任何处理，仅仅将数据传递给yield表达式（把得到的数据放到next的参数中），因此，在saga中，

Reducer是用于改变数据的函数 一个数据仓库，有且仅有一个reducer，并且通常情况下，一个工程只有一个仓库，因此，一个系统，只有一个reducer 为了方便管理，通常会将reducer放到单独

Redux核心概念 action reducer store MVC 它是一个UI的解决方案，用于降低UI，以及UI关联的数据的复杂度。 传统的服务器端的MVC 环境： 服务端需要响应一个完整的HTM

Action action是一个plain-object（平面对象） 它的__proto__指向Object.prototype 通常，使用payload属性表示附加数据（没有强制要求） action

导航守卫 导航守卫：当离开一个页面，进入另一个页面时，触发的事件 history对象 listen: 添加一个监听器，监听地址的变化，当地址发生变化时，会调用传递的函数 参数：函数，运行时间点：发生在

路由信息 Router组件会创建一个上下文，并且，向上下文中注入一些信息 该上下文对开发者是隐藏的，Route组件若匹配到了地址，则会将这些上下文中的信息作为属性传入对应的组件 history 它并不

路由组件 React-Router 为我们提供了两个重要组件 Router组件 它本身不做任何展示，仅提供路由模式配置，另外，该组件会产生一个上下文，上下文中会提供一些实用的对象和方法，供其他相关组件

React动画 - SwitchTransition 用于有秩序的切换内部组件 默认情况下：out-in 当key值改变时，会将之前的DOM根元素添加退出样式（exit,exit-active) 退出

Reducer Hook Flux：Facebook出品的一个数据流框架 规定了数据是单向流动的 数据存储在数据仓库中（目前，可以认为state就是一个存储数据的仓库） action是改变数据的唯一原

Effect Hook Effect Hook：用于在函数组件中处理副作用 副作用： ajax请求 计时器 其他异步操作 更改真实DOM对象 本地存储 其他会对外部产生影响的操作 函数：useEffe

渲染原理 渲染：生成用于显示的对象，以及将这些对象形成真实的DOM对象 React元素：React Element，通过React.createElement创建（语法糖：JSX） 例如： <div>