React综合指南(三)

#1024程序员节｜征文#
在这里插入图片描述

41、hooks的使用有什么注意事项

在使用Hooks的过程中，需要注意的两点是：

  • 不要在循环，条件或嵌套函数中调用Hook，必须始终在React函数的顶层使用Hook。这是因为React需要利用调用顺序来正确更新相应的状态，以及调用相应的钩子函数。一旦在循环或条件分支语句中调用Hook，就容易导致调用顺序的不一致性，从而产生难以预料到的后果。
  • 只能在React函数式组件或自定义Hook中使用Hook。

42、纯函数有什么特点

  • 无状态。线程安全。不需要线程同步。
  • 纯函数相互调用组装起来的函数，还是纯函数。
  • 应用程序或者运行环境（Runtime）可以对纯函数的运算结果进行缓存，运算加快速度。

43、解释一下 Flux

flux
Flux 是一种强制单向数据流的架构模式。它控制派生数据，并使用具有所有数据权限的中心 store 实现多个组件之间的通信。整个应用中的数据更新必须只能在此处进行。 Flux 为应用提供稳定性并减少运行时的错误。

44、什么是Redux？

Redux 是当今最热门的前端开发库之一。它是 JavaScript 程序的可预测状态容器，用于整个应用的状态管理。使用 Redux 开发的应用易于测试，可以在不同环境中运行，并显示一致的行为。

45、Redux遵循的三个原则是什么？

  1. ***单一事实来源：***整个应用的状态存储在单个 store 中的对象/状态树里。单一状态树可以更容易地跟踪随时间的变化，并调试或检查应用程序。
  2. ***状态是只读的：***改变状态的唯一方法是去触发一个动作。动作是描述变化的普通 JS 对象。就像 state 是数据的最小表示一样，该操作是对数据更改的最小表示。
  3. ***使用纯函数进行更改：***为了指定状态树如何通过操作进行转换，你需要纯函数。纯函数是那些返回值仅取决于其参数值的函数。

Store

46、你对“单一事实来源”有什么理解？

Redux 使用 “Store” 将程序的整个状态存储在同一个地方。因此所有组件的状态都存储在 Store 中，并且它们从 Store 本身接收更新。单一状态树可以更容易地跟踪随时间的变化，并调试或检查程序。

47、列出 Redux 的组件。

Redux 由以下组件组成：

  1. Action – 这是一个用来描述发生了什么事情的对象。
  2. Reducer – 这是一个确定状态将如何变化的地方。
  3. Store – 整个程序的状态/对象树保存在Store中。
  4. View – 只显示 Store 提供的数据。

48、数据如何通过 Redux 流动？

Data Flow in Redux

49、如何在 Redux 中定义 Action？

React 中的 Action 必须具有 type 属性，该属性指示正在执行的 ACTION 的类型。必须将它们定义为字符串常量，并且还可以向其添加更多的属性。在 Redux 中，action 被名为 Action Creators 的函数所创建。以下是 Action 和Action Creator 的示例：

function addTodo(text) {
       return {
                type: ADD_TODO,    
                 text
    }
}

50、 解释 Reducer 的作用。

Reducers 是纯函数，它规定应用程序的状态怎样因响应 ACTION 而改变。Reducers 通过接受先前的状态和 action 来工作，然后它返回一个新的状态。它根据操作的类型确定需要执行哪种更新，然后返回新的值。如果不需要完成任务，它会返回原来的状态。

51、Store 在 Redux 中的意义是什么？

Store 是一个 JavaScript 对象，它可以保存程序的状态，并提供一些方法来访问状态、调度操作和注册侦听器。应用程序的整个状态/对象树保存在单一存储中。因此，Redux 非常简单且是可预测的。我们可以将中间件传递到 store 来处理数据，并记录改变存储状态的各种操作。所有操作都通过 reducer 返回一个新状态。

52、 Redux与Flux有何不同？

FluxRedux
1. Store 包含状态和更改逻辑1. Store 和更改逻辑是分开的
2. 有多个 Store2. 只有一个 Store
3. 所有 Store 都互不影响且是平级的3. 带有分层 reducer 的单一 Store
4. 有单一调度器4. 没有调度器的概念
5. React 组件订阅 store5. 容器组件是有联系的
6. 状态是可变的6. 状态是不可改变的

53、Redux 有哪些优点？

Redux 的优点如下：

  • 结果的可预测性 - 由于总是存在一个真实来源，即 store ，因此不存在如何将当前状态与动作和应用的其他部分同步的问题。
  • 可维护性 - 代码变得更容易维护，具有可预测的结果和严格的结构。
  • 服务器端渲染 - 你只需将服务器上创建的 store 传到客户端即可。这对初始渲染非常有用，并且可以优化应用性能，从而提供更好的用户体验。
  • 开发人员工具 - 从操作到状态更改，开发人员可以实时跟踪应用中发生的所有事情。
  • 社区和生态系统 - Redux 背后有一个巨大的社区，这使得它更加迷人。一个由才华横溢的人组成的大型社区为库的改进做出了贡献，并开发了各种应用。
  • 易于测试 - Redux 的代码主要是小巧、纯粹和独立的功能。这使代码可测试且独立。
  • 组织 - Redux 准确地说明了代码的组织方式，这使得代码在团队使用时更加一致和简单。

54、什么是React 路由？

React 路由是一个构建在 React 之上的强大的路由库，它有助于向应用程序添加新的屏幕和流。这使 URL 与网页上显示的数据保持同步。它负责维护标准化的结构和行为，并用于开发单页 Web 应用。 React 路由有一个简单的API。

55、为什么React Router v4中使用 switch 关键字 ？

虽然 <div> * 用于封装 Router 中的多个路由，当你想要仅显示要在多个定义的路线中呈现的单个路线时，可以使用 “switch” 关键字。使用时，<switch>* 标记会按顺序将已定义的 URL 与已定义的路由进行匹配。找到第一个匹配项后，它将渲染指定的路径。从而绕过其它路线。

56、为什么需要 React 中的路由？

Router 用于定义多个路由，当用户定义特定的 URL 时，如果此 URL 与 Router 内定义的任何 “路由” 的路径匹配，则用户将重定向到该特定路由。所以基本上我们需要在自己的应用中添加一个 Router 库，允许创建多个路由，每个路由都会向我们提供一个独特的视图

<switch>
    <route exact path=’/’ component={Home}/>
    <route path=’/posts/:id’ component={Newpost}/>
    <route path=’/posts’   component={Post}/>
</switch>

57、列出 React Router 的优点。

几个优点是：

  1. 就像 React 基于组件一样，在 React Router v4 中，API 是 ‘All About Components’。可以将 Router 可视化为单个根组件（<BrowserRouter>），其中我们将特定的子路由（<route>）包起来。
  2. 无需手动设置历史值：在 React Router v4 中，我们要做的就是将路由包装在 <BrowserRouter> 组件中。
  3. 包是分开的：共有三个包，分别用于 Web、Native 和 Core。这使我们应用更加紧凑。基于类似的编码风格很容易进行切换。

58、React Router与常规路由有何不同？

主题常规路由React 路由
参与的页面每个视图对应一个新文件只涉及单个HTML页面
URL 更改HTTP 请求被发送到服务器并且接收相应的 HTML 页面仅更改历史记录属性
体验用户实际在每个视图的不同页面切换用户认为自己正在不同的页面间切换

59、类组件和函数组件之间有什么区别？

  • 类组件（ Class components ）

    • 无论是使用函数或是类来声明一个组件，它决不能修改它自己的 props 。

      • 所有 React 组件都必须是纯函数，并禁止修改其自身 props 。

    • React是单项数据流，父组件改变了属性，那么子组件视图会更新。

      • 属性 props 是外界传递过来的，状态 state 是组件本身的，状态可以在组件中任意修改
      • 组件的属性和状态改变都会更新视图。
class Welcome extends React.Component {
  render() {
    return (
      <h1>Welcome { this.props.name }</h1>
    );
  }
}
ReactDOM.render(<Welcome name='react' />, document.getElementById('root'));

  • 函数组件（functional component）

    • 函数组件接收一个单一的 props 对象并返回了一个React元素

function Welcome (props) { return

Welcome {props.name}

} ReactDOM.render(, document.getElementById(‘root’));

区别

函数组件和类组件当然是有区别的，而且函数组件的性能比类组件的性能要高，因为类组件使用的时候要实例化，而函数组件直接执行函数取返回结果即可。为了提高性能，尽量使用函数组件。

区别函数组件类组件是否有this没有有是否有生命周期没有有是否有状态state没有有

60、React中的refs作用是什么？

Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄。

我们可以为元素添加 ref 属性然后在回调函数中接受该元素在 DOM 树中的句柄，该值会作为回调函数的第一个参数返回：

class UnControlledForm extends Component {
  handleSubmit = () => {
    console.log("Input Value: ", this.input.value)
  }
  render () {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type='text'
          ref={(input) => this.input = input} />
        <button type='submit'>Submit</button>
      </form>
    )
  }
}

上述代码中的 input 域包含了一个 ref 属性，该属性声明的回调函数会接收 input 对应的 DOM 元素，我们将其绑定到 this 指针以便在其他的类函数中使用。

另外值得一提的是，refs 并不是类组件的专属，函数式组件同样能够利用闭包暂存其值：

function CustomForm ({handleSubmit}) {
  let inputElement
  return (
    <form onSubmit={() => handleSubmit(inputElement.value)}>
      <input
        type='text'
        ref={(input) => inputElement = input} />
      <button type='submit'>Submit</button>
    </form>
  )
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/896706.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

配置nginx服务通过ip访问多网站

配置nginx服务通过ip访问多网站

文章目录 第一种方法第二种方法 先关闭防火墙 # systemctl stop firewalld # setenforce 0第一种方法 #mntui 第二种方法 # vim /etc/nginx/conf.d/test_ip.conf # cat /etc/nginx/conf.d/test_ip.conf server {listen 192.168.234.100:80;#server_nameroot /test/100;loca…
阅读更多...
基于neo4j的体育运动员问答问答系统

基于neo4j的体育运动员问答问答系统

你是不是也为毕业项目伤透了脑筋&#xff1f;我们为你准备了一个创新且实用的技术项目——基于neo4j的体育运动员问答系统。无论你是对图数据库技术感兴趣&#xff0c;还是想在自然语言处理方面有所突破&#xff0c;这套系统都能让你在答辩时脱颖而出&#xff01; &#x1f3a…
阅读更多...
filebeat接入nginx和mysql获取日志

filebeat接入nginx和mysql获取日志

下载nginx &#xff08;1&#xff09; 直接下载 yum install nginx -y&#xff08;2&#xff09;查看状态启动 systemctl start nginx systemctl status nginx&#xff08;3&#xff09;配置文件检查 nginx -t&#xff08;4&#xff09;端口检查 netstat -tulpn | grep :80&am…
阅读更多...
Mybatis 中＜where＞的用法注意事项（附Demo）

Mybatis 中＜where＞的用法注意事项（附Demo）

目录 前言1. 问题所示2. 基本知识 #1024程序员节 | 征文# 前言 对于Java的基本知识推荐阅读&#xff1a; java框架 零基础从入门到精通的学习路线 附开源项目面经等&#xff08;超全&#xff09;【Java项目】实战CRUD的功能整理&#xff08;持续更新&#xff09; 先从实战问…
阅读更多...
uniapp使用html2canvas时，页面内的image元素模糊

uniapp使用html2canvas时，页面内的image元素模糊

不废话很简单只需要将image改成img就行 改之前 改之后 原因可能是因为uniapp里面的image标签做了某种处理
阅读更多...
基于Java+Springboot+Vue开发的酒店客房预订管理系统

基于Java+Springboot+Vue开发的酒店客房预订管理系统

项目简介 该项目是基于JavaSpringbootVue开发的酒店客房预订管理系统&#xff08;前后端分离&#xff09;&#xff0c;这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Java编程技能&#xff0c;同时锻炼他们的项目设计与开发能力。通过学习基于Java…
阅读更多...
监控易监测对象及指标之：Kafka中间件JMX监控指标解读

监控易监测对象及指标之：Kafka中间件JMX监控指标解读

监控易作为一款功能强大的监控软件&#xff0c;旨在为企业提供全方位的IT系统监控服务。其中&#xff0c;针对Kafka中间件的JMX监控是监控易的重要功能之一。本文将详细解读监控易中Kafka的JMX监控指标&#xff0c;帮助企业更好地理解并运用这些数据进行系统性能调优和故障排查…
阅读更多...
开启RefCell debug_refcell feature查看借用冲突位置

开启RefCell debug_refcell feature查看借用冲突位置

文章目录 背景分析解决方法 本文解决两个问题&#xff1a; 开启rust源码库中的feature开启debug_refcell feature的方法查看 borrow 借用冲突的位置 背景 使用 RefCell 来实现内部可变性是在 Rust 开发中常用的方式&#xff0c;但是当逻辑复杂起来&#xff0c;常常会有可变借…
阅读更多...
word建立目录以及修改页码

word建立目录以及修改页码

1、为word建立新的目录 &#xff08;1&#xff09;选中word中的标题设置为第几级标题&#xff0c;将所有的标题均设置完成。最后可以鼠标右击标题&#xff0c;对不同的标题字体大小等进行设置。右击-->修改-->格式-->段落 &#xff08;2&#xff09;在word中插入新的…
阅读更多...
算法01----移动零（C++）

算法01----移动零（C++）

题目展示 算法原理 我们这里要用到的算法是双指针移动&#xff0c;和我们之前学的快排的核心思想是一样的。我们看看怎么做吧。我会以图片的形式将我的思路告知大家。 这就是整个题目的整体思想算法&#xff0c;大家理解一下&#xff0c;其实这道题目还是很简单的。 代码编写…
阅读更多...
【C++ 11】移动构造函数

【C++ 11】移动构造函数

文章目录 【 1. 问题背景&#xff1a;深拷贝引起的内存开销问题 】【 2. 移动构造函数 】【 3. 左值的移动构造函数: move 实现 】 【 1. 问题背景&#xff1a;深拷贝引起的内存开销问题 】 拷贝构造函数 在 C 11 标准之前&#xff08;C 98/03 标准中&#xff09;&#xff0c;…
阅读更多...
Vue脚手架学习 vue脚手架配置代理、插槽、Vuex使用、路由、ElementUi插件库的使用

Vue脚手架学习 vue脚手架配置代理、插槽、Vuex使用、路由、ElementUi插件库的使用

目录 1.vue脚手架配置代理 1.1 方法一 1.2 方法二 2.插槽 2.1 默认插槽 2.2 具名插槽 2.3 作用域插槽 3.Vuex 3.1 概念 3.2 何时使用&#xff1f; 3.3 搭建vuex环境 3.4 基本使用 3.5 getters的使用 3.6 四个map方法的使用 3.6.1 mapState方法 3.6.2 mapGetter…
阅读更多...
LabVIEW中句柄与引用

LabVIEW中句柄与引用

在LabVIEW中&#xff0c;句柄&#xff08;Handle&#xff09; 是一种用于引用特定资源或对象的标识符。它类似于指针&#xff0c;允许程序在内存中管理和操作复杂的资源&#xff0c;而不需要直接访问资源本身。句柄用于管理动态分配的资源&#xff0c;如队列、文件、网络连接、…
阅读更多...
[python flask 数据库ORM操作]

[python flask 数据库ORM操作]

一、链接数据库 我们选择的框架是flask-sqlAlchemy 这个框架是对pymysql的封装。 连接数据库 #导入包 from flask_sqlalchemy import SQLAlchemy #创建flask app对象 app Flask(__name__) #设置配置信息 HOSTNAME "localhost" PORT 3306; USERNAME "root&…
阅读更多...
在C++中比大小

在C++中比大小

关于min()函数和max()函数: min()、max()这两个函数如果需要使用&#xff0c;要在程序头文件中加上<algorithm>库就可以使用这个函数了 #include <algorithm>min()函数是比较数中哪一个数最小&#xff0c;就返回最小的数&#xff0c;而max()函数则是比较数中哪一个…
阅读更多...
计算机毕业设计Flask+Vue.js空气质量预测 空气质量可视化 空气质量分析 空气质量爬虫 大数据毕业设计 Hadoop Spark

计算机毕业设计Flask+Vue.js空气质量预测 空气质量可视化 空气质量分析 空气质量爬虫 大数据毕业设计 Hadoop Spark

《FlaskVue.js空气质量预测与可视化系统》开题报告与任务书 一、研究背景与意义 随着工业化进程的加速和城市化水平的不断提高&#xff0c;空气质量问题日益成为全球关注的焦点。空气污染不仅严重影响着人们的身体健康&#xff0c;如增加呼吸系统疾病、心血管疾病等风险&…
阅读更多...
商场楼宇室内导航系统

商场楼宇室内导航系统

商场楼宇室内导航系统 本文所涉及所有资源均在传知代码平台可获取 文章目录 商场楼宇室内导航系统效果图导航效果图查看信息数据加载加载模型模型选型处理楼层模型绑定店铺创建店铺名称动态显示隐藏2d元素空气墙查看信息楼梯导航效果图 导航效果图 查看信息 数据加载 因为是一…
阅读更多...
Java最全面试题-＞Java主流框架-＞Srping面试题

Java最全面试题-＞Java主流框架-＞Srping面试题

Spring面试题 下边是我自己整理的面试题，基本已经很全面了，想要的可以私信我，我会不定期去更新思维导图 哪里不会点哪里 谈谈你对 Spring 的理解？ Spring 是一个开源框架，为简化企业级应用开发而生。Spring 可以是使简单的 JavaBean 实现以前只有 EJB 才能实现的功能。…
阅读更多...
定时开关机功能实现

定时开关机功能实现

提示&#xff1a;本文仅仅针对MTK平台实现需求&#xff0c;对其它芯片主控平台暂无借鉴可言 文章目录 需求需求描述实际手机功能图 资料相关说明实现方案修改方案修改内容点内置App修改MtkAlarmManagerService.java 坑点解决总结 需求 实现手机一样的定时开关机功能 需求描述…
阅读更多...
计算不停歇，百度沧海数据湖存储加速方案 2.0 设计和实践

计算不停歇，百度沧海数据湖存储加速方案 2.0 设计和实践

本文整理自百度云智峰会 2024 —— 云原生论坛的同名演讲。 今天给大家介绍下百度沧海存储团队在数据湖加速方面的工作进展情况。 数据湖这个概念&#xff0c;从 2012 年产生到现在已经有十余年的时间&#xff0c;每家公司对它内涵的解读都不太一样。但是数据湖的主要存储底座…
阅读更多...
最新文章

Copyright @ 2022~2023