React旧有生命周期和新生命周期的解析

简介: React旧有生命周期和新生命周期的解析

React组件生命周期(旧有格式)

新的生命周期

下面是旧有声明周期的案例演示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
    <script src="../js/prop-types.js"></script>
</head>
<body>
    <div id="test"></div>
    <!-- 制作组件 -->
    <script type="text/babel">
        class Count extends React.Component{
            //构造器;
            constructor(props){
                console.log('我是构造器');
                super(props);
                //初始状态;因为在构造器内部,所以,需要加this关键字;
                this.state={count:0};
            }
            //组件将要挂载;
            componentWillMount(){
                console.log('组件将要挂载...');
            }
            //加1按钮的回调;
            add = () => {
                //获取原始状态;
                const{count}=this.state;
                //更新状态;
                this.setState({count:count+1});
            }
            death= () => {
                ReactDOM.unmountComponentAtNode(document.getElementById('test'));
            }
            //挂载完毕;
            componentDidMount(){
                console.log('组件挂载完毕...');
            }
            //卸载组件;
            componentWillUnmount(){
                console.log('组件卸载了...');
            }
            //组件更新
            shouldComponentUpdate(){
                console.log('shouldComponentUpdate...');
                return true;
            }
            //组件将要更新
            componentWillUpdate(){
                console.log('componentWillUpdate...');
            }
            //组件更新
            componentDidUpdate(){
                console.log('componentDidUpdate...');
            }
            //强制更新;
            force= () => {
                this.forceUpdate();
            }
            //渲染;
            render(){
                console.log('render');
                const {count}=this.state;  //这句不要忘了加
                return(
                    <div>
                        <h2>当前求和是:{count}</h2>
                        <button onClick={this.add}>按钮测试</button>
                        <button onClick={this.death}>卸载组件</button>
                        <button onClick={this.force}>强制更新</button>
                    </div>
                );
            }
        }
        //调用;
        ReactDOM.render(<Count/>,document.getElementById('test'));
    </script>
</body>
</html>


目录
相关文章
|
2月前
|
XML Java 数据格式
Spring 应用上下文探秘:生命周期解析与最佳实践
Spring 应用上下文探秘:生命周期解析与最佳实践
73 0
|
10天前
|
自然语言处理 前端开发
深入解析 React-i18next:在 React 中实现国际化(二)
深入解析 React-i18next:在 React 中实现国际化(二)
|
10天前
|
自然语言处理 资源调度 前端开发
深入解析 React-i18next:在 React 中实现国际化(一)
深入解析 React-i18next:在 React 中实现国际化(一)
|
15天前
|
前端开发 JavaScript
React生命周期方法在实际开发中的应用场景有哪些?
【4月更文挑战第6天】 React 生命周期方法应用于数据获取、订阅管理、渲染逻辑处理、用户交互响应、性能优化、资源清理、强制更新、错误处理、动画实现、代码分割、服务端渲染、路由处理、依赖注入和集成第三方库。它们帮助控制组件行为和性能,但现代开发推荐使用Hooks替代部分生命周期方法。
14 0
|
3月前
|
前端开发 JavaScript API
React组件生命周期
React组件生命周期
74 1
|
3月前
|
缓存 JavaScript 前端开发
从入门到项目实战 - Vue生命周期解析(vue2 与 vue3 比较)
从入门到项目实战 - Vue生命周期解析(vue2 与 vue3 比较)
138 0
|
2天前
|
前端开发 API UED
怎么学习React 18 进行项目开发?
【4月更文挑战第18天】学习React 18涉及新特性如并发模式、Suspense API和自动批处理更新,可提升性能和用户体验。首先了解这些新特性,然后掌握React基础知识,如组件化、JSX、props和state。使用Create React App创建项目,学习如何启用并发模式和使用Suspense显示占位符。实现自定义组件,关注props传递、状态管理和事件处理。通过Profiler优化性能,利用懒加载和代码分割减少加载时间,使用Context API共享状态。不断实践和探索,参考官方文档与社区资源,以提高开发技能。
82 3
|
11天前
|
前端开发 JavaScript API
如何学习react
【4月更文挑战第9天】 学习React前,需掌握JavaScript基础,了解React的JSX、组件、props、state和生命周期等概念。安装Node.js和npm,用Create React App搭建环境。学习核心API,如React.createElement、React.render等,并阅读官方文档。实践项目,从Todo List开始,逐渐挑战复杂应用。同时,学习相关技术如Redux、React Router,并参与社区交流,持续关注React新发展。持之以恒,祝学习顺利!
26 10
|
2月前
|
开发框架 前端开发 JavaScript
从零开始学习React Native开发
React Native是一种基于React框架的移动端开发框架,使用它可以快速地构建出高性能、原生的移动应用。本文将从零开始,介绍React Native的基础知识和开发流程,帮助读者快速入门React Native开发,并实现一个简单的ToDo应用程序。
|
4月前
|
人工智能 JSON 前端开发
react17+ts 学习
react17+ts 学习

推荐镜像

更多