编辑
2023-11-16
React
00
请注意,本文编写于 98 天前,最后修改于 98 天前,其中某些信息可能已经过时。

目录

Props 变化
State 变化
Context 变化
使用 forceUpdate
父组件重新渲染
总结

当我们使用React编写组件时,组件的重新渲染是一个重要的概念。重新渲染是指React组件在特定情况下会重新执行其渲染函数,更新用户界面以反映最新的数据。很多情况下,组件不必要的重新渲染会严重影响性能,所以要充分了解触发组件重新渲染的条件。

Props 变化

React中,组件的props是父组件传递给子组件的数据。当这些props发生变化时,子组件将重新渲染以反映最新的数据。

js
// 父组件 const ParentComponent = () => { const [value, setValue] = useState(0); return <ChildComponent prop={value} />; }; // 子组件 const ChildComponent = React.memo(({ prop }) => { // prop发生变化时,会触发重新渲染 return <p>{prop}</p>; });

State 变化

React中的状态是通过useState来管理的。当使用setState函数更新状态时,组件将重新渲染。

js
const Counter = () => { const [count, setCount] = useState(0); const increment = () => { setCount(count + 1); // count发生变化时,组件重新渲染 }; return ( <div> <p>{count}</p> <button onClick={increment}>Increment</button> </div> ); };

Context 变化

React Context允许我们在组件树中传递数据而不必一级一级手动传递。当Context的值发生变化时,订阅了该Context的组件将重新渲染。

js
const MyComponent = () => { const contextValue = useContext(MyContext); // MyContext的值发生变化时,组件重新渲染 // ... };

使用 forceUpdate

虽然不推荐使用 forceUpdate,但在某些情况下,你可能需要强制组件重新渲染。forceUpdate方法将会导致组件的render方法被调用。

js
const MyComponent = () => { const forceUpdate = useForceUpdate(); const handleClick = () => { // 强制组件重新渲染 forceUpdate(); }; // ... };

父组件重新渲染

当一个子组件嵌套在一个父组件中时,父组件重新渲染,子组件也会重新渲染。

js
// 父组件 const ParentComponent = () => { // 状态变量 count const [count, setCount] = useState(0); return ( <div> <p>Parent Component Count: {count}</p> <ChildComponent /> <button onClick={() => setCount(count + 1)}>Increment Parent</button> </div> ); }; // 子组件 const ChildComponent = () => { console.log("Child Component Rendered"); return <p>Child Component</p>; };

总结

这些情况涵盖了导致React函数式组件重新渲染的主要场景。React通过虚拟DOM检测这些变化,从而实现了高效的更新,确保用户界面保持最新。理解这些重新渲染的情况有助于我们更好地优化和设计React应用程序。

如果对你有用的话,可以打赏哦
打赏
ali pay
wechat pay

本文作者:CreatorRay

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!