在编写一些代码时，我遇到了一个问题，即我设置的值设置错误。我最终找到了罪魁祸首，并在测试时发现它在C ++ 14和C ++ 17上的表现有所不同。代码如下：
#include <stdio.h>
#include <cstdint>
#include <cstring>
int main()
{
uint8_t *p = new uint8_t[3];
memset(p, 0x00, 1);
p++;
memset(p, 0xF0, 1);
p++;
memset(p, 0xFF, 1);
p--;
p--;
// This line in particular
*p++ = *p;
*p++ = 0x0F;
p--;
p--;
printf("Position 0 has value %u\n", *p);
p++;
printf("Position 1 has value %u\n", *p);
p++;
printf("Position 2 has value %u\n", *p);
return 0;
}
在C ++ 14上它打印：
Position 0 has value 240
Position 1 has value …我正在开发具有一些可水平滚动的组件的应用程序。我遇到了一些不需要的行为，其中水平滚动条不会消失，留下难看的白色长滚动条。
在MacOS上，我的“显示滚动条”设置被设置为“基于鼠标或触控板自动”。我的镶边是版本72.0.3626.121（正式内部版本）（64位）。
可以在下面的代码段中复制该问题。
#horizontal {
width: 100%;
height: 150px;
overflow-x: scroll;
overflow-y: hidden;
flex-direction: row;
border: 2px solid purple;
display: flex;
}
#vertical {
width: 300px;
height: 300px;
overflow-x: hidden;
overflow-y: scroll;
flex-direction: column;
border: 2px solid purple;
display: flex;
}
.horizontal-item {
min-width: 100px;
width: 100px;
min-height: 100px;
height: 100px;
margin-right: 24px;
margin-bottom: 24px;
background-color: pink;
display: flex;
}
.vertical-item {
min-width: 100px;
width: 100px;
min-height: 100px;
height: 100px;
margin-right: 24px;
margin-bottom: 24px;
background-color: red;
display: flex;
}<div …我正在尝试了解钩子功能，但是我似乎还不太清楚如何useCallback正确使用该函数。据我从有关钩子的规则了解到，我应该将它们称为顶级，而不是在逻辑（如循环）之内。这让我很困惑，应该如何useCallback在从循环渲染的组件上实现。
看一下下面的示例代码片段，其中我创建了5个带有onClick处理程序的按钮，该处理程序将按钮的编号打印到控制台。
const Example = (props) => {
const onClick = (key) => {
console.log("You clicked: ", key);
};
return(
<div>
{
_.times(5, (key) => {
return (
<button onClick={() => onClick(key)}>
{key}
</button>
);
})
}
</div>
);
};
console.log("hello there");
ReactDOM.render(<Example/>, document.getElementById('root'));<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='root'>
</div>现在，由于我在中使用arrow函数<button onClick={() => onClick(key)}>，因此每次在Example呈现时都会创建一个新的函数实例，这是因为我希望onClick函数知道哪个按钮调用了它。我以为可以通过使用来使用新的react hooks功能来防止这种情况useCallback，但是如果将其应用到上，const onClick则仍会为每个渲染创建一个新实例，这是因为需要给key参数提供内联箭头功能，并且不允许这样做据我所知将其应用于循环内的渲染（尤其是循环顺序是否可能会改变吗？）。
那么useCallback在保持相同功能的情况下，我将如何在这种情况下实施呢？有可能吗？
我正在尝试使用新的 Hooks 从类组件转向功能组件。然而，感觉与useCallback类组件中的类函数不同，我会得到不必要的子元素渲染。
下面我有两个相对简单的片段。第一个是我编写为类的示例，第二个是我将示例重写为功能组件。目标是让功能组件获得与类组件相同的行为。
类组件测试用例
class Block extends React.PureComponent {
render() {
console.log("Rendering block: ", this.props.color);
return (
<div onClick={this.props.onBlockClick}
style = {
{
width: '200px',
height: '100px',
marginTop: '12px',
backgroundColor: this.props.color,
textAlign: 'center'
}
}>
{this.props.text}
</div>
);
}
};
class Example extends React.Component {
state = {
count: 0
}
onClick = () => {
console.log("I've been clicked when count was: ", this.state.count);
}
updateCount = () => {
this.setState({ count: this.state.count + 1});
};
render() …在尝试更好地理解React Hooks的过程中，遇到了一些意想不到的行为。我试图创建一个ref数组，并通过一个onRef函数将其推送到该数组，该函数将传递给我的<div>'s。大概每次重新渲染组件时，数组都会变得越来越大，这仅仅是因为它只是一个简单的箭头功能，而没有被记忆。
因此，然后我添加了该useCallback钩子，以确保不会多次获得相同的引用，但是令我惊讶的是，它每次重新渲染时仍调用该函数。在添加一个空数组作为第二个参数之后，引用仅按预期每个组件触发一次。
下面的代码段演示了此行为。
const Example = () => {
const _refs = React.useRef([]);
// Var to force a re-render.
const [ forceCount, forceUpdate ] = React.useState(0);
const onRef = (ref) => {
if (ref && ref !== null) {
console.log("Adding Ref -> Just an arrow function");
_refs.current.push(ref);
}
}
const onRefCallbackWithoutInputs = React.useCallback((ref) => {
if (ref && ref !== null) {
console.log("Adding Ref -> Callback without inputs.");
_refs.current.push(ref);
}
});
const onRefCallbackEmptyArray = React.useCallback((ref) …我有一个视频标签，我想连续播放，而用户可以同时在网站上进行操作。但是我发现，如果背景在背景图像之间转换，则视频将开始缓冲。我在下面的代码段中有一个可运行的示例。
注意：如果代码段正常运行，似乎不会发生缓冲，但是如果将代码段放入“整页”中，则会发生缓冲。
function changeBackground() {
const randomColor = '#'+Math.floor(Math.random()*16777215).toString(16);
const element = document.getElementById('background');
const currentOpacity = element.style.opacity;
const currentBackground = element.style.backgroundImage;
switch (currentBackground) {
case 'url("https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png")': {
element.style.backgroundImage = 'url("https://i5.walmartimages.ca/images/Large/428/5_r/6000195494285_R.jpg")';
break;
}
case 'url("https://i5.walmartimages.ca/images/Large/428/5_r/6000195494285_R.jpg")': {
element.style.backgroundImage = 'url("https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png")';
break;
}
default: {
break;
}
}
}
const element = document.getElementById('background');
element.style.backgroundImage = 'url("https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png")'#background {
display: flex;
position: absolute;
width: 100%;
height: 100%;
z-index: -10;
background-size: contain;
transition: background-image 3s ease-in-out;
}
#button {
display: flex;
width: 200px;
height: …我正在学习 React Hooks，这意味着我将不得不从类转向函数组件。以前在类中，我可以拥有独立于状态的类变量，我可以在不重新渲染组件的情况下更新这些变量。现在，我正在尝试将组件重新创建为带有钩子的函数组件，但我遇到了我无法（据我所知）为该函数创建变量的问题，因此存储数据的唯一方法是通过useState钩。然而，这意味着只要状态更新，我的组件就会重新渲染。
我已经在下面的示例中说明了它，我试图重新创建一个类组件作为使用钩子的函数组件。如果有人点击它，我想为一个 div 设置动画，但是如果用户在它已经设置动画时点击它，则防止再次调用该动画。
class ClassExample extends React.Component {
_isAnimating = false;
_blockRef = null;
onBlockRef = (ref) => {
if (ref) {
this._blockRef = ref;
}
}
// Animate the block.
onClick = () => {
if (this._isAnimating) {
return;
}
this._isAnimating = true;
Velocity(this._blockRef, {
translateX: 500,
complete: () => {
Velocity(this._blockRef, {
translateX: 0,
complete: () => {
this._isAnimating = false;
}
},
{
duration: 1000
});
}
},
{
duration: 1000
}); …我尝试使用 Hooks 为自己制作一个很好的动画示例，但我偶然发现了一个问题，我的函数没有状态变量的更新版本并继续使用第一个版本。
在下面的代码片段中，我有一个示例，一旦您单击一个条形图，它就会以方形形式移动。首先向东，然后向南，然后向西，然后向北，然后再次向东等等。但是它永远不会向南，因为即使它的方向从 更新为 到north（east由栏上的文本指示或再次单击它），功能仍然认为方向是北。
const Example = (props) => {
const [ direction, setDirection ] = React.useState('North');
console.log("Rendering Example: ", direction);
const isAnimating = React.useRef(false)
const blockRef = React.useRef(null);
// Animate on click.
const onClick = () => {
if (!isAnimating.current) {
decideDirection();
isAnimating.current = true
} else {
console.log("Already animating. Going: ", direction);
}
};
const decideDirection = () => {
console.log("Current direction: ", direction);
if (direction === 'North') {
moveEast();
} else …react-hooks ×5
reactjs ×5
macos ×2
c++ ×1
c++14 ×1
c++17 ×1
css ×1
html5-video ×1
javascript ×1
scrollbar ×1