我目前正在学习next.js 教程，但我很难理解以下内容：
教程在这里告诉我，点击某个<Link>元素不会触发服务器请求，而是进行“客户端导航”，即用js调整页面内容：
Link 组件支持在同一 Next.js 应用程序中的两个页面之间进行客户端导航。客户端导航意味着页面转换使用 JavaScript 进行
马上问三个问题：
<Link>如果我在 Chrome 开发工具中禁用 javascript，它仍然有效。这说明js实际上并没有发生转换。这与他们的说法是否矛盾？<Link>. （与“常规”反应行为相反）。这怎么能被认为是“客户端导航”呢？在本教程中，他们进一步告诉我：
默认情况下，Next.js 预渲染每个页面。这意味着 Next.js 提前为每个页面生成 HTML，而不是由客户端 JavaScript 完成这一切
这一说法听起来与上面引用的另一说法相矛盾。你能帮我澄清一下吗？当我点击时<Link>到底发生了什么？是否加载了新的 html 文件？如果是这样，这怎么可能发生在“客户端”。谢谢你！
在这个最小的反应三纤维应用程序中，我尝试加载并包含相同的 GLTF 模型两次：
import React, { Suspense } from "react";
import { Canvas } from "@react-three/fiber";
import { useGLTF } from "@react-three/drei";
function MyContent() {
const firstGltf = useGLTF("/eye/scene.gltf");
const secondGltf = useGLTF("/eye/scene.gltf");
return (
<>
<primitive object={firstGltf.scene} position={[-200, 0, -400]} />
<primitive object={secondGltf.scene} position={[200, 0, -400]} />
</>
);
}
export default function App() {
return (
<Canvas>
<ambientLight color="white" intensity={0.5} />
<Suspense fallback={null}>
<MyContent />
</Suspense>
</Canvas>
);
}
请参阅此代码和框
然而，只有第二个<primitive>是可见的。如果我删除第二个<primitive>，则第一个可见。我正在努力理解为什么会发生这种情况以及如何做得更好。
（是因为第二次调用useGLTF …
我正在努力理解useReducer与useState. 有很多争论，但对我来说，没有一个真正有意义，在这篇文章中，我试图将它们应用到一个简单的例子中。
也许我错过了一些东西，但我真的不明白为什么useReducer应该在任何地方使用 over useState. 我希望你能帮助我澄清这一点。
让我们以这个例子为例：
function CounterControls(props) {
return (
<>
<button onClick={props.increment}>increment</button>
<button onClick={props.decrement}>decrement</button>
</>
);
}
export default function App() {
const [complexState, setComplexState] = useState({ nested: { deeply: 1 } });
function increment() {
setComplexState(state => {
// do very complex logic here that depends on previous complexState
state.nested.deeply += 1;
return { ...state };
});
}
function decrement() {
setComplexState(state => { …我正在使用 styled-components 来覆盖现有组件的样式，在这种情况下ToggleButton来自材料 ui。但是我希望我的新组件有一个额外的属性 ( hasMargin) 来控制样式：
import {ToggleButton} from "@material-ui/lab";
import styled, {css} from "styled-components";
const StyledToggleButton = styled(ToggleButton)<{ hasMargin?: boolean }>`
&& {
color: red;
${props => props.hasMargin &&
css`
margin: 10px;
`}
}
`;
我的意图是它的StyledToggleButton行为完全相同，ToggleButton但具有红色，并且可以使用附加属性调用hasMargin以打开边距 css。我想这样称呼它：
<StyledToggleButton
value={""} // ToggleButton prop
size={"small"} // ToggleButton prop
hasMargin={true} // My prop from StyledToggleButton
>
click
</StyledToggleButton>
但是如果我这样做，在浏览器控制台中我会得到：
Warning: React does not recognize the `hasMargin` prop on a DOM element.
这是因为， …
在我看来，Chrome（与 Firefox 相比）在使用开发人员工具的移动视图时会自动缩小某些 html 内容：
以这个最小的例子为例：
<html>
<head>
<style>
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
font-size: 40px;
}
.test {
background-color: lime;
height: 100px;
padding: 20px;
}
</style>
</head>
<body>
<div class="test">Test Test Test</div>
</body>
</html>
对我来说，当进入移动视图时，绿色 div 的大小和字体大小相对于窗口宽度进行缩放。但是，我希望它具有恒定的高度100px。在正常视图中，一切都如预期，没有缩放。
我已在此 gif 中记录了此行为： Chrome Resizing
我对 css 是否有根本性的误解，或者这是 Chrome 的特殊行为？我应该如何创建恒定高度的 div，以便我可以在 Chrome 中使用它们？谢谢你！
在我的 React 应用程序中，我渲染了不同的<Item>组件实例，我希望它们在上下文中注册/取消注册，具体取决于它们当前是否已安装。
我正在使用两个上下文（ItemContext提供已注册的项目，ItemContextSetters提供注册/取消注册的功能）来执行此操作。
const ItemContext = React.createContext({});
const ItemContextSetters = React.createContext({
registerItem: (id, data) => undefined,
unregisterItem: (id) => undefined
});
function ContextController(props) {
const [items, setItems] = useState({});
const unregisterItem = useCallback(
(id) => {
const itemsUpdate = { ...items };
delete itemsUpdate[id];
setItems(itemsUpdate);
},
[items]
);
const registerItem = useCallback(
(id, data) => {
if (items.hasOwnProperty(id) && items[id] === data) {
return;
}
const itemsUpdate = { ...items, [id]: data }; …reactjs ×5
react-hooks ×2
client-side ×1
css ×1
gltf ×1
html ×1
material-ui ×1
mobile ×1
next.js ×1
three.js ×1
typescript ×1
use-effect ×1
use-reducer ×1
use-state ×1
usecallback ×1