React-生命周期-其它方法

简介: React-生命周期-其它方法

前言


React的生命周期是组件在其生命周期内的一系列事件和方法调用,允许您管理组件的行为和状态。除了常见的生命周期方法如componentDidMount和componentDidUpdate之外,还有一些其他方法可供使用。

打开之前 React 的生命周期文档网页,点击展开不常用的生命周期如下:

  • getDerivedStateFromProps 函数:组件在被挂载或者更新时 (映射数据),就会回调
  • shouldComponentUpdate 函数:组件在更新时,决定是否要更新UI,就会回调
  • getSnapshotBeforeUpdate 函数:组件在更新时,最后能获取到更新之前数据的地方,就会回调




挂载或更新时


App.js:

import React from 'react';
class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0
        }
    }
    static getDerivedStateFromProps(props, state) {
        console.log('挂载或更新时-映射数据-getDerivedStateFromProps');
        console.log(props, state);
        return null;
    }
    render() {
        return (
            <div>
                <p>Home</p>
                <button onClick={() => {
                    this.btnClick();
                }}>Home按钮
                </button>
            </div>
        );
    }
    btnClick() {
        this.setState({
            count: 1
        });
    }
}
class App extends React.Component {
    render() {
        return (
            <div>
                <Home name={'yangbuyiya'}/>
            </div>
        );
    }
}
export default App;

getDerivedStateFromProps 只需要 了解 即可(用得非常非常的少)




更新时决定是否要更新 UI


返回值为布尔类型,true 代表需要更新 UI,false 代表不需要更新 UI。

import React from 'react';
class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0
        }
    }
    shouldComponentUpdate(nextProps, nextState, nextContext) {
        console.log('更新时-决定是否要更新UI-shouldComponentUpdate');
        return true;
    }
    render() {
        console.log("渲染 UI");
        return (
            <div>
                <p>Home</p>
                <button onClick={() => {
                    this.btnClick();
                }}>Home按钮
                </button>
            </div>
        );
    }
    btnClick() {
        this.setState({
            count: 1
        });
    }
}
class App extends React.Component {
    render() {
        return (
            <div>
                <Home name={'yangbuyiya'}/>
            </div>
        );
    }
}
export default App;




更新时最后能获取到更新之前数据的地方


App.js:

import React from 'react';
class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0
        }
    }
    render() {
        return (
            <div>
                <p>Home</p>
                <button onClick={() => {
                    this.btnClick();
                }}>Home按钮
                </button>
            </div>
        );
    }
    getSnapshotBeforeUpdate(prevProps, prevState) {
        console.log('更新时-最后能获取到更新之前数据的地方-getSnapshotBeforeUpdate');
        console.log(prevProps, prevState);
        return null;
    }
    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log('更新时-componentDidUpdate');
    }
    btnClick() {
        this.setState({
            count: 1
        });
    }
}
class App extends React.Component {
    render() {
        return (
            <div>
                <Home name={'yangbuyiya'}/>
            </div>
        );
    }
}
export default App;

注意点,getSnapshotBeforeUpdate 必须与 componentDidUpdate 一起使用。


最后

本期结束咱们下次再见👋~

🌊 关注我不迷路,如果本篇文章对你有所帮助,或者你有什么疑问,欢迎在评论区留言,我一般看到都会回复的。大家点赞支持一下哟~ 💗

相关文章
|
17天前
|
前端开发 JavaScript 开发者
在React中,如何利用生命周期方法管理组件的状态和行为?
【5月更文挑战第29天】在React中,如何利用生命周期方法管理组件的状态和行为?
21 3
|
17天前
|
前端开发 JavaScript 调度
React的生命周期是什么
【5月更文挑战第29天】React的生命周期是什么
17 1
|
29天前
|
缓存 前端开发 JavaScript
React和Next.js开发常见的HTTP请求方法
React和Next.js开发常见的HTTP请求方法
23 0
|
1月前
|
前端开发
【专栏】在 create-react-app 中集成 less/sass 预处理器和 react-css-modules 的方法
【4月更文挑战第29天】本文介绍了在 create-react-app 中集成 less/sass 预处理器和 react-css-modules 的方法。首先,通过 `npm` 安装 less 或 sass 依赖,然后修改 `config-overrides.js` 配置文件以支持 less/sass 编译。接着,详细阐述如何使用 less/sass 编写样式。再者,安装 react-css-modules 并配置 webpack,使能样式模块化。最后,展示了如何结合使用 less/sass 和 react-css-modules,以提升前端开发的效率和代码质量。
|
1月前
|
存储 人工智能 开发框架
【AI大模型应用开发】【AutoGPT系列】0. AutoGPT概念及原理介绍 - Agent开发框架及ReAct方法
【AI大模型应用开发】【AutoGPT系列】0. AutoGPT概念及原理介绍 - Agent开发框架及ReAct方法
68 0
|
1月前
|
前端开发 JavaScript
React生命周期方法在实际开发中的应用场景有哪些?
【4月更文挑战第6天】 React 生命周期方法应用于数据获取、订阅管理、渲染逻辑处理、用户交互响应、性能优化、资源清理、强制更新、错误处理、动画实现、代码分割、服务端渲染、路由处理、依赖注入和集成第三方库。它们帮助控制组件行为和性能,但现代开发推荐使用Hooks替代部分生命周期方法。
20 0
|
1月前
|
前端开发 JavaScript
react生命周期函数
react生命周期函数
12 0
|
1月前
|
前端开发 JavaScript 开发者
浅谈React生命周期
浅谈React生命周期
14 0
|
1月前
|
前端开发 中间件 数据安全/隐私保护
React路由进阶方法
React路由进阶方法
32 1
|
1月前
|
前端开发
React旧有生命周期和新生命周期的解析
React旧有生命周期和新生命周期的解析
32 0
React旧有生命周期和新生命周期的解析