对React Hooks的理解 hooks的出现，使函数组件的功能得到了扩充，拥有了类组件相似的功能，在我们日常使用中，使用hooks能够解决大多数问题，并且还拥有代码复用机制，因此优先考虑hooks 解决老的函数式组件在React Hook出现之前，函数式组件（也称为无状态组件）的主要特点与优缺点如下： 早期函数式组件优点： 简洁性：函数式组件代码结构简单，易于阅读和理解，因为它仅负责接收pro
提高组件的渲染效率的？避免不必要的render？ 在React中提高组件渲染效率并避免不必要的渲染主要有以下几个策略： 使用PureComponent或React.memo： React.PureComponent自动进行浅比较(shallow comparison)，只有当props或state发生改变时才会触发组件重新渲染。继承自React.PureComponent的组件会默认检查props
diff的原理 React中的diff算法是其核心优化策略之一，用于比较新旧两个虚拟DOM树之间的差异，并找出最小化的DOM操作集以更新真实DOM。以下是React中diff算法的大致步骤概述： 树结构比较: React并不会简单地递归遍历整颗新旧虚拟DOM树进行全量比较，而是采用分层比较的思想，仅比较同层级的节点。 它首先会比较树的根节点，如果根节点不同，则直接替换整个根节点对应的真实DOM元素
tsx转换成真实DOM过程 TypeScript 编译阶段： .tsx 文件包含了 TypeScript 类型注解和 JSX 语法，首先通过 TypeScript 编译器（如tsc或者配合Babel的@babel/preset-typescript插件）进行编译。 TypeScript 编译器负责检查类型注解的正确性，并且把包含类型信息的 TypeScript+JSX 代码转换为普通的 JavaS
React 性能优化的手段 React 中进行性能优化的手段可以从多个维度进行分类，以下是一些关键类别及其对应的优化策略： 组件优化 使用PureComponent或React.memo：对于仅根据props和state改变才重新渲染的组件，使用React.PureComponent或者对其包装一层React.memo，它们都能通过浅比较props来避免不必要的重新渲染。 shouldComp
对 React 的理解、特性 React 是靠数据驱动视图改变的一种框架，它的核心驱动方法就是用其提供的 setState 方法设置 state 中的数据从而驱动存放在内存中的虚拟 DOM 树的更新 更新方法就是通过 React 的 Diff 算法比较旧虚拟 DOM 树和新虚拟 DOM 树之间的 Change ，然后批处理这些改变。 遵循组件设计模式、声明式编程范式和函数式编程概念，以使前端应
1. setState更新状态的2种写法 对象式的setState:setState(setChange, [callback]) setChange为状态改变对象（该对象可以体现出状态的更改） callback是可选的回调函数，它的状态更新完毕，界面也更新后（render调用后才被调用） 函数式的setState:setState(updater, [callback]) update
笔记gitee地址 学习了 redux,为什么还要讲react-redux呢？ redux不是专门为react所创建的,只不过在某一刻，react和redux看对眼了，所以俩人走到了一起，所以为了更好的支持redux,react官方出了react-redux来更好的支持redux 1. react-redux工作流程 2. 案例 1. 求和案例react_redux基本使用 明确两个概念：
笔记gitee地址 一、redux是什么 redux是一个专门用于做状态管理的js库（不是react插件库） 它可以用在react、angular、vue的项目中，但基本与react配合使用 作用：集中式管理react应用中多个组件共享的状态 二、什么情况下需要使用redux 某个组件的状态，需要让其他组件可以随时拿到（共享） 一个组件需要改变另一个组件的状态（通信） 总体原则：能不用就不用
路由 一、版本5路由 1. react-router-dom 2. 路由的使用 1. 基础使用 安装：yarn add react-router-dom@5 明确好界面中的导航区、展示区 导航区Link标签包裹 <Link to="/home">Home</Link> 展示区写在Route标签进行匹配 <Route path='/home' co
一、使用脚手架create-react-app创建项目 react脚手架 xxx脚手架：用来帮助程序员快速创建一个基于xxx库的模板项目 包含了所有需要的配置（语法检查、jsx编译、devServe...） 下载好了所有相关的依赖 可以直接运行一个简单的效果 react提供了一个用于创建react项目的脚手架库：create-react-app 项目的整体技术架构为：react+webp
1. 生命周期 1. 声命周期的三个阶段（旧） 初始化阶段：由ReactDOM.render()触发---初次渲染 1. constructor() 2. componentWillMount() 3. render() 4. componentDidMount() ==> 常用 一般在这个钩子中做一些初始化的事情，例如：开启定时器，订阅消息，发起网络请求 更新阶段：由组件
1. 收集表单数据 包含表单的组件分类 受控组件——页面中所有输入类的DOM,随着输入，把值存维护在状态里，需要用的时候去状态里取值（推荐，避免了过渡使用ref） 非受控组件——页面中所有输入类的DOM，现用现取 受控组件示例： 非受控组件示例： 2. 高阶函数 高阶函数：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数 若A函数，接收的参数是一个函数，那么A就可以称之为
1. 组件 函数式组件（适用于【简单组件】的定义） 示例： 执行了ReactDOM.render(<MyComponent/>, ...)之后执行了什么？ React解析组件标签，找到了MyComponent组件 发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中 类组件（适用于【复杂组件】的定义） 示例： 执行了Reac
1. 初识虚拟DOM 描述 什么是虚拟DOM呢？本质是Object类型的对象（一般对象） 我们为什么要了解虚拟DOM呢?很简单，因为React要用 我们第三点会使用React分别使用js和jsx创建虚拟DOM，在此呢，我们先要了解两大js库： react.js：react的核心库 react-dom.js：用于支持react操作DOM 注意：加development表示开发模式的库
1. 组件传值 组件化编码流程： 拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突 实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用： 一个组件在用，放在组件自身即可 一些组件在用，放在他们共同的父组件上（状态提示） 实现交互：从绑定事件开始 props适用于： 父组件 ===> 子组件 通信 子组件 ===> 父组件 通信（要求父
1.全局安装create-react-appyarn global add create-react-app2.创建项目yarn create react-app my-demo
解决报错
Copyright © 2005-2024 51CTO.COM 版权所有 京ICP证060544号
