- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在制作一个应用程序,其中有 3 个按钮,其中 2 个按钮对我的问题很重要。一个按钮应向用户正在查看的网站添加元素,另一个按钮应删除元素。
我是 React 的新手,感觉自己掌握了基础知识,但显然需要更好地理解它。
我的第一直觉是创建一个数组,我可以将元素放入其中,然后将该数组作为我的一个 JSX.Elements 的内容。
看起来像这样:
我的 JSX.Element:
answerView = (
<div>
<button onClick={this.removeIceCream}>Poista jäätelö!</button>
<button onClick={this.addIceCream}>Lisää jäätelö!</button>
<button onClick={this.keyInput}>OK</button>
<div>{this.iceCreamCount}</div>
</div>
);
向元素添加内容的函数。
addIceCream() {
this.iceCreamCount.push(<li>"Jäätelö"</li>);
}
然而,这最终会更新数组 iceCreamCount,但不会显示在 DOM 中。 React 不会对元素的变化以及仅对其状态或属性的变化做出“ react ”吗?
这是否意味着为了根据用户输入操作 DOM 元素,我包含元素的数组也需要是状态变量?
我检查了一些教程和示例并想出了这样的东西:
addIceCream = () => {
this.setState(state => {
const iceCreams = state.iceCreams.concat(state.iceCream);
return {
iceCreams,
iceCream: 'Jäätelö',
};
});
};
我的状态声明如下所示:
this.state = { doorView: true, bunnyView: false, answerView: false, iceCream: "Jäätelö", iceCreams: [] };
在写这个问题的过程中,我实际上得到了这个看似有效的方法,但我也想了解它是如何以及为什么有效的,因为我对我的知识并不十分自信。
但是我觉得我没有掌握这里到底发生了什么。我对箭头函数不太有信心(如果有人有关于它们的简单教程,请链接)虽然我想我已经收集到了,因为 React 中的数据应该是不可变的,这就是我需要使用的原因concat()
创建一个新数组,它是旧数组的副本 + 我添加的元素。但是,为什么我需要 return()
状态变量,为什么会有这么多箭头函数被抛出(见下文我的浓缩“我想知道的列表”)?
addIceCream = () => {....
并告诉我发生了什么,这对我的理解和学习有很大帮助。最佳答案
我会在下面回答问题。
Is the first part of my question a workable way in React or is it simply the wrong approach completely? If it can be done, I would appreciate if someone would show me how and what are my mistakes in my thinking.
不幸的是,第一种方法是“完全错误的方法”(在 React 世界中)。
addIceCream() {
this.iceCreamCount.push(<li>"Jäätelö"</li>);
}
However this ends up in the array iceCreamCount updating but not being displayed in the DOM. Does React not ehmm "react" to changes in elements and only changes in its State or Properties?
就是这样。 React 对 React 跟踪的 state 和 props 变化做出“ react ”。
Does this mean that in order to manipulate the DOM elements in accordance to user input my array containing the elements also needs to be a state variable?
这取决于。一些控件是“controlled”和另一个“uncontrolled”(主要适用于表单域。)
大多数时候,您会使用(React)“受控”选项来保持与 React 关联的所有状态以进行跟踪。 (在类组件中 this.state ={...}
或在使用钩子(Hook)的函数组件中,const [state, setState] = React.useState(...)
)
React 的 Reconciliation (一种奇特的说法,知道发生了什么变化以及要呈现什么)算法通过检查已更改的状态/ Prop “引用”(而不是值)来工作。
当你做了 this.iceCreamCount.push(<li>"Jäätelö"</li>)
,您基本上是在更改数组“this.iceCreamCount”的值,而不是其引用。
并且在重新分配 this.iceCreamCount
之后到一个新对象,你还需要this.setState({iceCreamCount: newIceCreamCount})
通知 React 某些内容已更改并需要重新渲染。
现在我们知道了为什么第一种方法不起作用,让我们继续讨论您的解决方法。
Why and how does the second part of my question work? If someone had the time and patience to go through it line by line starting from: addIceCream = () => {.... and tell me what is happening that would help me a lot in understanding and learning.
state declaration
this.state = {
doorView: true,
bunnyView: false,
answerView: false,
iceCream: "Jäätelö",
iceCreams: []
};
addIceCream = () => {
this.setState(state => {
const iceCreams = state.iceCreams.concat(state.iceCream);
return { iceCreams, iceCream: "Jäätelö" }
};
});
};
当您查看 addIceCream
时,你确实在创建一个新的引用,iceCreams
.
正如上面问题 #1 中所解释的,这就是 React 的协调算法知道状态已经改变的方式。
要点是 React 被优化以检查引用更改,因为深度属性检查(假设 this.state
具有深层嵌套对象,然后比较每个值将花费太长时间)
最后您将返回一个新的引用 return { iceCreams, iceCream: "Jäätelö" }
,它通知 React 确实发生了一些变化。
how do the arrow functions here work and why they are required for the "addIceCream"-function to work?
您已声明 addIceCream
使用 Arrow Functions语法。
如以下部分所述,No Separate this , 箭头函数不会创建自己的 this
变量。
但是当你这样做时,this
设置为父上下文的 this
由于范围规则的魔力。
addIceCream = () => {
this.setState(state => {
const iceCreams = state.iceCreams.concat(state.iceCream);
return { iceCreams, iceCream: "Jäätelö" }
};
});
};
这就是为什么您可以调用 this.setState
的原因多于。 JavaScript 引擎将尝试找到最近的父项的 this
在作用域链中。
如果你声明了 addIceCream
作为常规方法,
class App extends React.Component {
addIceCream() { ...}
}
然后 this
指向 addIceCream
因此,将无法访问 App
的 this.setState
,可从 React.Component
获得当你扩展它时。
因此您会看到 bind 的解决方法通过传递自己的类方法 this
给它,用当前类的 this
创建一个新函数.
class App extends React.Component {
constructor(props) {
super(props)
// ...👇 this create a new method with `App`'s `this`.
this.addIceCream = this.addIceCream.bind(this)
}
addIceCream() {
// now that `this` is bound to `App`'s `this`, you can call this
this.setState({...})
}
}
这在您使用类组件 (CC) 时适用。当您使用功能组件 (FC) 时,这无关紧要。
您可以使用 React 的新 Hooks(useState 或 useReducer)来保存状态。
(使用 useReducer
进行复杂的状态管理)
cosnt initialState = {
doorView: true,
bunnyView: false,
answerView: false,
iceCream: "Jäätelö",
iceCreams: []
};
function reducer(state, action) {
switch (action.type) {
case 'ADD_ICECREAM':
const { iceCream } = action.payload
const iceCreams= [...state.iceCreams].concat(iceCream)
return { ...state, iceCream, iceCreams }
default: return state;
}
}
function App() {
const [icecreams, setIceCreams] = React.reducer(reducer, initialState);
// You can use either one now.
const addIceCream = iceCream =>
dispatch({type: 'ADD_ICECREAM', payload: { iceCream }});
// OR
function addIceCream(iceCream) {
dispatch({type: 'ADD_ICECREAM', payload: { iceCream }});
}
}
reducer
函数返回一个新的对象引用,因此将导致 React 重新渲染。
您可能已经注意到箭头语法版本使用 const
喜欢const addIceCream = iceCream => ...
.
现在它变成了一个指向函数的指针,所以它应该在使用前声明,不像 function
版本因何JavaScript hoisting有效。
关于javascript - 了解 React 如何/为什么/何时更新 DOM 以及如何使用它,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57327098/
我查看了网站上的一些问题,但还没有完全弄清楚我做错了什么。我有一些这样的代码: var mongoose = require('mongoose'), db = mongoose.connect('m
基本上,根据 this bl.ocks,我试图在开始新序列之前让所有 block 都变为 0。我认为我需要的是以下顺序: 更新为0 退出到0 更新随机数 输入新号码 我尝试通过添加以下代码块来遵循上述
我试图通过使用随机数在循环中设置 JSlider 位置来模拟“赛马”的投注结果。我的问题是,当然,我无法在线程执行时更新 GUI,因此我的 JSlider 似乎没有在竞赛,它们从头到尾都在运行。我尝试
该功能非常简单: 变量:$table是正在更新的表$fields 是表中的字段,$values 从帖子生成并放入 $values 数组中而$where是表的索引字段的id值$indxfldnm 是索引
让我们想象一个环境:有一个数据库客户端和一个数据库服务器。数据库客户端可以是 Java 程序或其他程序等;数据库服务器可以是mysql、oracle等。 需求是在数据库服务器上的一个表中插入大量记录。
在我当前的应用程序中,我正在制作一个菜单结构,它可以递归地创建自己的子菜单。然而,由于这个原因,我发现很难也允许某种重新排序方法。大多数应用程序可能只是通过“排序”列进行排序,但是在这种情况下,尽管这
Provisioning Profile 有 key , key 链依赖于它。我想知道 key 什么时候会改变。 Key will change after renew Provisioning Pr
截至目前,我在\server\publications.js 中有我的 MongoDB“选择”,例如: Meteor.publish("jobLocations", function () { r
我读到 UI 应该始终在主线程上更新。但是,当谈到实现这些更新的首选方法时,我有点困惑。 我有各种函数可以执行一些条件检查,然后使用结果来确定如何更新 UI。我的问题是整个函数应该在主线程上运行吗?应
我在代理后面,我无法构建 Docker 镜像。 我试过 FROM ubuntu , FROM centos和 FROM alpine ,但是 apt-get update/yum update/apk
我构建了一个 Java 应用程序,它向外部授权客户端公开网络服务。 Web 服务使用带有证书身份验证的 WS-security。基本上我们充当自定义证书颁发机构 - 我们在我们的服务器上维护一个 ja
因此,我有时会在上传新版本时使用 app_offline.htm 使应用程序离线。 但是,当我上传较大的 dll 时,我收到黄色错误屏幕,指出无法加载 dll。 这似乎与我对 app_offline.
我刚刚下载了 VS Apache Cordova Tools Update 5,但遇到了 Node 和 NPM 的问题。我使用默认的空白 cordova 项目进行测试。 版本 如果我在 VS 项目中对
所以我有一个使用传单库实例化的 map 对象。 map 实例在单独的模板中创建并以这种方式路由:- var app = angular.module('myApp', ['ui', 'ngResour
我使用较早的 Java 6 u 3 获得的帧速率是新版本的两倍。很奇怪。谁能解释一下? 在 Core 2 Duo 1.83ghz 上,集成视频(仅使用一个内核)- 1500(较旧的 java)与 70
我正在使用 angular 1.2 ng-repeat 创建的 div 也包含 ng-click 点击时 ng-click 更新 $scope $scope 中的变化反射(reflect)在使用 $a
这些方法有什么区别 public final void moveCamera(CameraUpdate更新)和public final void animateCamera (CameraUpdate
我尝试了另一篇文章中某人评论中关于如何将树更改为列表的建议。但是,我在某处(或某物)有未声明的变量,所以我列表中的值是 [_G667, _G673, _G679],而不是 [5, 2, 6],这是正确
实现以下场景的最佳方法是什么? 我需要从java应用程序调用/查询包含数百万条记录的数据库表。然后,对于表中的每条记录,我的应用程序应该调用第三方 API 并获取状态字段作为响应。然后我的应用程序应该
只是在编写一些与 java 图形相关的代码,这是我今天的讲座中的非常简单的示例。不管怎样,互联网似乎说更新不会被系统触发器调用,例如调整框架大小等。在这个例子中,更新是由这样的触发器调用的(因此当我只
我是一名优秀的程序员,十分优秀!