功能性 React 组件生命周期
Functional React Components life cycle
考虑代码:
function Comp5 () {
const [count, setCount] = useState(0)
const valRef = useRef(0)
useEffect(() => {
setCount(prevCount => prevCount + 1)
}, [])
valRef.current += 1
console.log('valRef_Current', valRef.current)
return <div>Comp5</div>
}
function App () {
return (
<div>
<Comp5 />
</div>
)
}
你的控制台输出是什么?
我认为应该是:
valRef_Current 1
valRef_Current 2
valRef_Current 3
valRef_Current 4
但真正的输出是:
valRef_Current 1
valRef_Current 1
valRef_Current 2
valRef_Current 3
谁能帮我理解为什么?
提前致谢
我认为您的组件最初渲染了两次,因为 <React.StrictMode>
<React.StrictMode>
<App />
</React.StrictMode>,
这只会发生在开发环境中。您可以删除 <React.StrictMode>
以查看实际渲染。在这种情况下,您的输出将是。
valRef_Current 1
valRef_Current 2
你可以看看这个博客post for details
你真正输出的原因是React Strict Mode,一个用于突出显示已弃用和不安全方法的开发工具。它自动包含在新的 create-react-app 项目和 codesandbox 中,这是我能够复制您的行为的地方。它会在执行其工作的过程中导致双重渲染,但不会在您创建生产版本时包含在内。您通常可以在 index.js
.
中的顶层 <App/>
周围找到它
预期行为实际上是:
valRef_Current 1
valRef_Current 2
组件安装、递增 valRef
并记录它。 useEffect
然后用一个新值设置状态,这会导致一个额外的渲染。 valRef
再次递增并记录其值。您可以观察此代码段中的行为:
function Comp5 () {
const [count, setCount] = React.useState(0);
const valRef = React.useRef(0);
React.useEffect(() => {
setCount(prevCount => prevCount + 1)
}, []);
valRef.current += 1
console.log('valRef_Current', valRef.current);
return <div>Comp5</div>
};
function App () {
return (
<div>
<Comp5 />
</div>
)
};
ReactDOM.render(<App/>, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>
考虑代码:
function Comp5 () {
const [count, setCount] = useState(0)
const valRef = useRef(0)
useEffect(() => {
setCount(prevCount => prevCount + 1)
}, [])
valRef.current += 1
console.log('valRef_Current', valRef.current)
return <div>Comp5</div>
}
function App () {
return (
<div>
<Comp5 />
</div>
)
}
你的控制台输出是什么? 我认为应该是: valRef_Current 1 valRef_Current 2 valRef_Current 3 valRef_Current 4
但真正的输出是: valRef_Current 1 valRef_Current 1 valRef_Current 2 valRef_Current 3
谁能帮我理解为什么?
提前致谢
我认为您的组件最初渲染了两次,因为 <React.StrictMode>
<React.StrictMode>
<App />
</React.StrictMode>,
这只会发生在开发环境中。您可以删除 <React.StrictMode>
以查看实际渲染。在这种情况下,您的输出将是。
valRef_Current 1
valRef_Current 2
你可以看看这个博客post for details
你真正输出的原因是React Strict Mode,一个用于突出显示已弃用和不安全方法的开发工具。它自动包含在新的 create-react-app 项目和 codesandbox 中,这是我能够复制您的行为的地方。它会在执行其工作的过程中导致双重渲染,但不会在您创建生产版本时包含在内。您通常可以在 index.js
.
<App/>
周围找到它
预期行为实际上是:
valRef_Current 1
valRef_Current 2
组件安装、递增 valRef
并记录它。 useEffect
然后用一个新值设置状态,这会导致一个额外的渲染。 valRef
再次递增并记录其值。您可以观察此代码段中的行为:
function Comp5 () {
const [count, setCount] = React.useState(0);
const valRef = React.useRef(0);
React.useEffect(() => {
setCount(prevCount => prevCount + 1)
}, []);
valRef.current += 1
console.log('valRef_Current', valRef.current);
return <div>Comp5</div>
};
function App () {
return (
<div>
<Comp5 />
</div>
)
};
ReactDOM.render(<App/>, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>