YuLong的博客

文章目录Hookshooks与fiber（workInProgress）状态派发——useState（useReducer）原理处理副作用——useEffect（useLayoutEffect）原理状态获取与缓存——useRef（useMemo）原理总结Hooks可参考之前文章：React Hooks详解Hooks 出现没有Hooks时，函数组件能够做的只是接受 Props、渲染 UI ，以及触发父组件传过来的事件。有的处理逻辑都要在类组件中写，这样会使 class 类组件内部错综复杂，每一个

文章目录ContextContext 相关用法Context 原理总结ContextReact提供了 Context 上下文模式，为了解决 props 每层都需要传递的问题，即Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。注意：提供者一定要是消费者的某一层父级Context 相关用法v16.3.0后，context api 正式发布用 createContext 创建出一个 context 上下文对象，context 对象提供两个组件，Provi

文章目录FiberFiber 更新机制FiberReactv15及之前，React 对于虚拟 DOM 是采用 递归方式 遍历更新的，一次更新，从应用根部递归更新，递归开始后中途无法终端，随着项目复杂，层级变深，导致更新时间变成，给前端交互上的体验就卡顿。Fiber 诞生在 Reactv16 版本，Fiber 架构目的就是解决大型 React 应用卡顿，fiber 在 React 中是最小粒度的执行单元，在遍历更新每一个节点的时候都不是用的真实 DOM ，都是采用虚拟 DOM ，所以可以 理解成 f

文章目录异步调度时间分片异步调度原理总结异步调度问题：由于对于大型的 React 应用，会存在一次更新，递归遍历大量的虚拟 DOM ，造成占用 js 线程，使得浏览器没有时间去做一些动画效果，伴随项目越来越大，项目会越来越卡。对比Vue：Vue 有这 template 模版收集依赖的过程，轻松构建响应式，使得在一次更新中，Vue 能够迅速响应，找到需要更新的范围，然后以组件粒度更新组件，渲染视图。React 中，一次更新 React 无法知道此次更新的波及范围，所以 React 选择从根节点开

文章目录事件系统事件处理事件合成事件绑定事件触发总结事件系统问：React 为什么要写出一套自己的事件系统呢？答：1、首先，对于不同的浏览器，对事件存在不同的兼容性，React 想实现一个兼容全浏览器的框架， 为了实现这个目标就需要创建一个兼容全浏览器的事件系统。2、其次，v17 之前 React 事件都是绑定在 document 上，v17 之后 React 把事件绑定在应用对应的 容器 container 上，将事件绑定在同一容器统一管理，防止很多事件直接绑定在原生的 DOM 元素上，造成

文章目录JSXReact.createElementfiber类型总结JSXReact.createElementJSX元素节点会被babel编译成 React Element 形式React.createElement( type, [props], [...children] )第一个参数：如果是组件类型，会传入组件对应的类或函数；如果是 dom 元素类型，传入 div 或者 span 之类的字符串。第二个参数：一个对象，在 dom 类型中为标签属性，在组件类型中为 props 。其他参

文章目录props chidren模式操作 propsprops 是 React 组件通信最重要的手段props：对于在 React 应用中写的子组件，父组件绑定在它们标签里的 属性和方法，最终会变成 props 传递给它们。1）props 可以是：① props 作为一个子组件渲染数据源。② props 作为一个通知父组件的回调函数。③ props 作为一个单纯的组件传递。④ props 作为渲染函数。⑤ render props ， 和④的区别是放在了 children 属性上。⑥

文章目录setState：React 项目中 UI 的改变来源于 state 改变，类组件中 setState 是更新组件，渲染视图的主要方式。用法：setState(obj,callback)第一个参数：当 obj 是一个对象，则为即将合并的 state当 obj 是一个函数，那么当前组件的 state 和 props 将作为参数，返回值用于合并新的 state第二个参数 callback ：callback 为一个函数，函数执行上下文中可以获取当前 setState 更新后的最新

文章目录React HooksHooks简介Hook函数（9种）自定义HooksReact HooksHooks简介介绍Hooks之前，首先要说一下React的组件创建方式，一种是类组件，一种是纯函数组件，并且React团队希望，组件不要变成复杂的容器，最好只是数据流的管道。开发者根据需要，组合管道即可。也就是说组件的最佳写法应该是函数，而不是类。但是，在以往开发中类组件和纯函数组件的区别是很大的，纯函数组件有着类组件不具备的多种特点：纯函数组件没有状态纯函数组件没有生命周期纯函数组件没

文章目录React-ReduxReact-Redux概念相关API方法案例——用React+React-Redux实现数字求和纯函数和高阶函数数据共享——案例React-ReduxReact-Redux概念React-Redux 是 Redux 的官方 React 绑定库、插件库。专门用来简化React应用中使用Redux能够 使React组件从Redux store中读取数据，并且向 store 分发 actions 以更新数据React-Redux 并不是 Redux 内置，需要单独安装。

文章目录ReduxRedux简介ReduxRedux简介redux是一个专门用于做状态管理的JS库(不是react插件库)。它可以用在react,，angular， vue等项目中, 但基本与react配合使用。作用：集中式管理react应用中多个组件共享的状态。使用场景：某个组件的状态，需要让其他组件可以随时拿到（共享）。一个组件需要改变另一个组件的状态（通信）。总体原则：能不用就不用, 如果不用比较吃力才考虑使用。设计思想：Redux 是将整个应用状态存储到一个叫做 st

文章目录路由组件1、HashRouter和BrowserRouter2、Route3、Router4、Link和NavLink5、Redirect6、Switch7、withRouter嵌套路由向路由组件传递参数路由跳转的两种模式编程式路由导航Router Hooks路由组件路由组件与一般组件区别：1、写法不同：一般组件：<Demo/>路由组件：<Route path="/demo" component={Demo}/>2、存放位置不同：一般组件：compone

文章目录路由的理解前端路由hash模式history模式路由的理解路由：一个路由就是一个映射关系(key:value)key为 路径，value可能是 function 或 component路由分类：后端路由：理解： value是 function，用来处理客户端提交的请求。注册路由： router.get(path, function(req, res))工作过程：当node接收到一个请求时，根据请求路径找到匹配的路由，调用路由中的函数来处理请求，返回响应数据前端路由：

文章目录React ajax前置说明常用ajax请求库axios消息订阅-发布机制Fetch案例——github用户搜索React ajax前置说明React 本身只关注于界面, 并不包含发送ajax请求的代码前端应用需要通过ajax请求与后台进行交互(json数据)react 应用中需要集成第三方ajax库(或自己封装)常用ajax请求库1、jQuery: 比较重, 如果需要另外引入不建议使用2、axios: 轻量级, 建议使用封装XmlHttpRequest对象的ajaxpr

文章目录React脚手架脚手架创建项目并启动项目结构功能界面的组件化编码流程（通用）React脚手架脚手架用来帮助程序员快速创建一个基于xxx库的模板项目包含了所有需要的配置（语法检查、jsx编译、devServer…）下载好了所有相关的依赖可以直接运行一个简单效果React提供了一个用于创建React项目的脚手架库: create-react-app项目的整体技术架构为: react + webpack + es6 + eslint使用脚手架开发的项目的特点: 模块化, 组件化,

文章目录duff算法key的作用index和id作为key的区别duff算法key的作用问题：react中的 key 有什么作用？（key的内部原理是什么？）虚拟DOM中key的作用：简单的说: key是虚拟DOM对象的标识, 在更新显示时key起着极其重要的作用详细的说: 当状态中的数据发生变化时，react会根据【新数据】生成【新的虚拟DOM】，随后React进行 【新虚拟DOM】与【旧虚拟DOM】的diff比较，比较规则如下：1、 旧虚拟DOM中找到与新虚拟DOM相同的key：

文章目录生命周期旧生命周期新生命周期生命周期示例——时钟生命周期组件从创建到死亡它会经历一些特定的阶段。React组件中包含一系列钩子函数(生命周期回调函数), 会在特定的时刻调用。在定义组件时，会在特定的生命周期回调函数中，做特定的工作旧生命周期生命周期的三个阶段（旧）三个阶段：初始化阶段: 由 ReactDOM.render() 触发——初次渲染constructor()componentWillMount()render() =====> 必须使用的一个comp

文章目录事件处理收集表单数据非受控组件受控组件函数柯里化事件处理在React中获取虚拟组件中的标签的值使用组件的 refs属性在虚拟组件的标签中定义事件，在事件中通过 箭头函数 获取标签的值使用事件对象——event事件处理：通过onXxx属性指定事件处理函数(注意大小写)React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 ———为了更好的兼容性React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) ————为了高效通过event.targe

文章目录React 三大属性state 属性props 属性refs 属性React 三大属性state 属性在React框架中定义了一个状态(State) 概念， 并通过状态(State)来实现React组件的状态机特性。“状态机” 特性： 就是指 组件通过与用户的交互， 更新实现不同的状态，通过渲染UI保证用户界面和数据一致性 (不需要操作DOM)应用场景：组件的内容需要根据数据的刷新而刷新创建方法： 在类的构造函数中定义this.state={ 属性名：属性值 …}t

文章目录组件与模块概念React 组件介绍组件与模块概念模块：理解：向外提供特定功能的js程序, 一般就是一个js文件为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。作用：复用js, 简化js的编写, 提高js运行效率组件：理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)为什么要用组件： 一个界面的功能更复杂作用：复用编码, 简化项目编码, 提高运行效率模块化： 当应用的js都以模块来编写的, 这个应用就是一个模块化的应用组件化：

文章目录React 简介React 概述及特点React 渲染机制JSX 语法React 简介React 概述及特点是一个用于构建用户界面，将数据渲染为HTML视图的开源 JavaScript库中文官网：React官方中文文档是 Facebook 开发并于2013年发布并宣布开源基于 JSX 的语法，JSX是React的核心组成部分，它使用xml标记的方式去直接声明界面，和html、js混写React核心是 组件，组件的设计提高了代码的复用率，降低了测试的难度和代码复杂度。组件将数据和逻