react-webpack，react中组件生命周期简单展示

Posted 2020-08-21 oldcowstruggle

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了react-webpack，react中组件生命周期简单展示相关的知识，希望对你有一定的参考价值。

首先配置下webpack.config.js

module.exports={
    entry:{
        demo:‘./app/app.js‘
    },
    output:{
        path:__dirname+‘/build‘,
        filename:‘[name].js‘,
        library:‘game‘,
        libraryTarget:‘umd‘
    },
    module:{
        loaders:[
            {
                test:/\.js$/,
                loader:‘jsx-loader‘
            }
        ]
    }
}

入口文件entry，整合js后输出output，loaders:需要jsx-loader将jsx转换成js

创建html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>标题</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
</head>
<body>
    <div id="out"></div>
</body>
<script type="text/javascript" src="build/demo.js"></script>
</html>

上面配置文件中的入口文件./app/app.js

先来创建此文件

var Head=require(‘./app1.js‘);
var Con=require(‘./app2.js‘);
var Footer=require(‘./app3.js‘);
var React=require(‘react‘);
var ReactDOM=require(‘react-dom‘);
var Demo=React.createClass({
        render:function(){
            return (<div>
                        <header><Head/></header>
                        <section><Con/></section>
                        <footer><Footer/></footer>    
                    </div>)
        }
    })
ReactDOM.render(<Demo/>,document.getElementById(‘out‘));

用require先将依赖导入进来,然后就是用react创建组件

再来创建依赖的app1,app2,app3这3个js

var React=require(‘react‘);
var Head=React.createClass({
        render:function(){
            return (<div>
                    head    
                    </div>)
        }
    })

module.exports=Head;

简单例子创建完成，需要的react,react-dom,jsx-loader,我们可以使用npm install来创建依赖到项目中。

组件的生命周期

getDefaultProps------>getInitialState------>componentWillMount------>render------>componentDidMount------>组件运行

2.运行过程中

分为两种state状态改变和外部props改变

state:

　　shouldComponentUpdate------>如果为true------>componentWillUpdate------>render------>componentDidUpdate

props:

　　componentWillReceiveProps------>shouldComponentUpdate.....

3.卸载组件

componentWillUnmount

以上是关于react-webpack，react中组件生命周期简单展示的主要内容，如果未能解决你的问题，请参考以下文章